HTML 문서의 구조
웹 문서는 아무리 길더라도 다음과 같은 기본 구조로 이루어져 있고 <head> ~ </head> 부분과 <body> ~ </body> 부분에 대부분의 소스가 표시 된다.
-HTML 문서와 DOCTYPE
웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용하는 것이 ‘문서 유형(document type)’을 지정하는 <!doctype>이다. 문서 유형은 웹 브라우저에서 “이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라.”고 알려주는 것이다. <!doctype>은 태그가 아니지만, 웹 문서를 만들 때 함께 사용해야 하는 요소이다.
HTML에서는 대소문자 구별이 없지만 doc-type을 좀더 강조하기 위해 대문자로 사용하기도 한다. HTML5은 복잡한 과정 없이 단 한 줄로 문서 유형을 선언한다.
<!DOCTYPE html> 또는 <!doctype html>
웹 브라우저는 이 소스만 보고 ‘HTML5에 맞춰 문서를 해석하면 되구나’라고 이해하게 된다. 문서라는 점만 표기하는 것으로 문서 유형 선언이 끝난다.
-언제나 시작은 <html> 태그
문서 유형을 선언한 후에 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html>태그이다. <html>태그는 웹 문서가 시작된다는 뜻이고, </html> 태그는 웹 문서가 끝났다는 뜻이다. <html> 태그에서는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. 예를 들어 한국어라면 korea의 약자인 ko를 사용하면 된다. 언어 표기는 ko처럼 두 자리를 사용할 수도 있고 en-US처럼 네 자리를 사용할 수도 있는데, 두 자리로 표기할 경우 주요 국가별 언어 코드는 다음과 같다.
<html> 태그와 </html> 태그 사이에는 문서 정보를 지정하는 <head> 부분과 실제 화면에 보이는 문서 내용을 입력하는 <body> 부분을 만든다.
-브라우저에게 정보를 주는 <head>태그
웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 모두 <head> 부분에 입력한다. 문서에게 사용할 외부 파일들도 이곳에서 링크한다. <head> 태그와 </head> 태그 사이에서 문서 정보를 표시하기 위해 사용할 수 있는 주요 태그는 다음과 같다.
<title> 태그 – 문서 제목
<head> 태그 안에서 가장 중요한 태그를 꼽으라면 <title> 태그일 것이다. <title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시되고, 해당 페이지를 방문하는 방문자나 검색 엔진은 제목 표시줄의 제목을 보고 페이지 전체의 내용을 추측할 수 있다.
è <title> 문서제목 </title
<meta> 태그 – 문자 인코딩 및 문서 키워드, 요약정보
<head> 태그 안에서 <meta> 태그는 여러 용도로 사용된다. 그 중에서 가장 중요한 것은 문자 인코딩을 지정하는 것이다. 한글을 화면에 표시하는 방법은 영문과 달라서 문자 인코딩 방법을 utf-8로 지정하는데 charset 속성만 사용해서 간단하게 지정할 수 있다.
è <meta charset = “utf-8”>
이 외에도 <meta> 태그를 이용하여 <title> 태그에서는 표시할 수 없었던 문서의 키워드와 요약 정보를 지정할 수 있다.
-문서의 몸통은 <body> 태그
문서 유형을 정의하고 문서 정보까지 입력했다면 <body> 태그와 </body>태그 사이에 실제 브라우저에 표시될 내용을 입력한다. 이 책에서 설명하는 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들이다.
'IT > 프로그래밍' 카테고리의 다른 글
| Textarea에 Naver Smarteditor 적용하기 (0) | 2016.10.06 |
|---|---|
| 소스트리(SourceTree)에서 system.componentmodel.win32exception 오류 해결 (1) | 2016.08.03 |
| Phaser로 웹 게임 만들기 (2) | 2016.07.19 |
| 자주 쓰는 기본 태그 익히기 (0) | 2016.07.18 |
| HTML - 텍스트 입력 (0) | 2016.07.14 |
