HTML 독학을 위한 HTML이란? / HTML의 기본 구조

programming/HTML
2020. 6. 18. 17:29

안녕하세요. 홍지군입니다!

얼마전 친구를 만나고 왔는데 회사에서 홈페이지를 만든다고 하더니 업체에 맏기는게 아니라 카페24 같은 곳에서 직접 만든다고 이야기 하면서 나는 아무것도 모르겠다! 라는 이야기를 했습니다.

최근에는 개인 홈페이지를 쉽게 만들 수 있는 환경이 많이 있습니다. 카페24, XE, 워드프레스, 윅스 등등 다양하게 있는데요. 이런 것들을 이용한다고 하더라도 기본적으로 HTML / CSS / JAVAScript 등의 기초가 없다면 본인이 원하는 대로 홈페이지를 꾸미거나 할 수 없게 됩니다.

홈페이지 제작의 기초인 HTML에 대해서 한번 같이 공부해 보는 시간을 가져보겠습니다.!

HTML?

HTML이란 Hyper Text Markup Language의 약자입니다.

하이퍼텍스트(Hyper Text)란?

하이퍼텍스트(문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일)
- 출처 : 네이버 영어사전 -

일반적으로 텍스트로된 만화책 또는 소설책을 읽는다고 생각해보면 1페이지 부터 목차를 지나 내용을 읽고 -끝- 이 쓰여있는 마지막까지 순차적으로 읽게됩니다. 하이퍼텍스트는 링크를 통해서 비순차적으로 자신이 원하는 부분을 어디든지 이동할 수 있는 기능을 가진 것이 하이퍼텍스트의 특징입니다.

마크업 언어(Markup Language)란?

문서의 논리적 구성이나 체제 / 문서의 포맷을 지정하거나 링크를 연결하기 위해 사용되어지는 언어입니다.

문서의 구성 : 제목, 목차, 본문 등등

HTML문서를 만들기 위해서 문서를 만드는 언어의 규칙을 따라서 만들어야 하는데 HTML에서는 태그를 통해서 사용하게 됩니다.

우리가 알고 있는 태그는 어떤 것들이 있을까요??

블로그, 인스타, 페이스북의 태그는 #을 사용하는 규칙을 가지고 있습니다.
HTML에서는 <>로 시작해 </>로 끝나는 규칙을 가지고 있습니다.

즉!
블로그에서 #제목 #링크를 쓰는 규칙과
HTML <title>제목 </title> <a>링크</a> 규칙이 다를뿐 입니다.

HTML의 구조

<!doctype html>태그

현재 문서파일이 html5 문서다! 라고 명시해주는 태그입니다. HTML 문서의 첫번째 줄에 명시되어 있어야 하며 문서에 중간에 들어갈 경우 아무런 효과가 없습니다. 기본적인 HTML문서를 만든다면 <!doctype html>을 작성하지 않더라도 문제될 건 없지만 HTML5의 홈페이지를 만든다면 맨 첫번째 줄에 필수로 넣어주어야 합니다.

<html></html>태그

HTML태그는 "이제 여기서 부터 html문서야~" 라고 시작해서 "여기까지가 HTML 문서야~" 라고 생각하시면 됩니다.

책에 비유하자면 책의 겉표지 입니다. 겉표지로 책의 제목과 내용을 모두 포함시키고 있는 것입니다.

따라서 <html> 태그를 시작으로 "이제 여기서부터 html문서야" 라고 한뒤에 그 속에

</html>태그로 "여기까지가 HTML 문서야~" 라고 명시해 주는 것입니다.

<head></head>태그

여기는 홈페이지의 본문에 표시되지는 않지만 문서의 기본 정보를 가지고 있습니다. 해당 페이지의 제목을 정하는 <title></title>테그와 페이지의 설명이 들어가는 <meta></meta>태그 등등 페이지의 설명이라고 생각하시면 됩니다.

<body></body>태그

실제로 홈페이지 본문에 보여지는 곳 입니다! 홈페이지를 만들고 화면에 보여지는 모든 것 이라고 보시면 됩니다.

다음에는 HTML 문서를 직접 만들어보는 시간을 가져보겠습니다.

저작자표시 변경금지

'programming > HTML' 카테고리의 다른 글

HTML 독학을 위한 HTML의 문단 <p>, <br>, <pre>,<blockquote> (0)	2020.06.21
HTML 독학을 위한 HTML 표 만들기! <TABLE>, <TR>, <TD>,<TH> (1)	2020.06.21
HTML 독학을 위한 HTML 문자 태그활용 <hn>, <b>, <i>, <u> (3)	2020.06.20
HTML 독학을 위한 HTML의 기본 태그! (Hn,br,a 등등) (0)	2020.06.20
HTML 독학을 위한 HTML문서 만들기! (1)	2020.06.18

홍지군의 공간