일반적으로 HTML문서는 다음과 같은 기본 구조를 가집니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>문서의 제목</title>
</head>
<body>
웹페이지에 표시할 내용
</body>
</html>
이제 이 기본 구조를 하나하나 알아보도록 하겠습니다!
!DOCTYPE html
<!DOCTYPE html>
- 문서의 첫 부분에서 문서 유형을 지정하는 단일태그입니다.
- DOCTYPE 선언은 HTML 문서에서 html 태그를 정의하기 전에 가장 먼저 선언되어야만 합니다.
- 현재 표준으로 사용되고 있는 HTML 버전을 사용하기 위해 적어주는 타입이 바로 'html'입니다.
html 태그
<html>
head, body등 기본태그가 들어갈수있습니다.
</html>
- 문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그입니다!
- 이 태그의 내부에 다양한 태그들이 포함되어 문서의 내용을 구성합니다!
head 태그
<head>
</head>
- 웹 브라우저 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어갑니다!
아래 코드는 <head></head> 안에 들어가는 내용입니다!
<meta charset="utf-8" />
- 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그입니다.
- 문자 인코딩이란?
- 한글을 표시하기 위해 문자 세트를 지정하는 작업으로, 영문과 한글을 모두 사용하기 때문에 utf-8 방식을 사용하는 것이 좋습니다.
<title>제목이 들어갑니다!</title>
- 문서의 제목을 나타냅니다! 콘텐츠는 브라우저 탭에 표시됩니다!
head태그 안에는 meta, title 외에도 많은 태그가 있습니다!
body태그
<body>
이곳에는 많은 태그들이 들어갑니다!
</body>
- 실제 브라우저 화면에 표시될 내용을 입력하는 태그입니다.
- 여기에는 다음과 같은 유형의 태그들이 포함될 수 있습니다.
- 텍스트를 표시하는 태그
- 이미지를 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태
내용정리
- HTML 코드를 작성할 때는 기본 문서 구조를 마련한 다음 작성하기!
- 들여쓰기를 통해 태가 간의 포함 관계를 나타낸다. 이는 가독성에 도움이 되지만 문법적으로 필수 사항은 아니다!
- head태그 에는 문서의 정보가, body태그에는 표시할 내용이 포함된다.
- 태그의 콘텐츠로 또 다른 태그가 포함될 수 있다!!