HTML 기본 구조 알아 보기

HTML

HTML 기본 구조 알아 보기

 

환경: Eclipse Mars

 

웹 브라우저를 만드는 HTML 문서의 기본 구조는 크게 4가지로 나눌 수 있습니다. HTML 을 배우는데 가장 기초적인 내용이며, 앞으로 각 항목에 해당하는 태그들을 다룰 것입니다. 오늘은 가장 기초적인 HTML 문서 기본 구조에 대해 알아 보겠습니다. 

 

 샘플 소스에 나와 있는 것처럼 HTML 기본 구조는 4가지로 이루어져 있습니다. <!DOCTYPE html>, <html>, <head>, <body> 이며 각 요소들을 간략하게 설명하도록 하겠습니다. 

HTML 기본 구조 알아 보기

 

¤ <!DOCTYPE html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

DOCTYPE HTML 문서 형식에 관한 버전 정보를 알려 주는 코드이며 페이지 제일 상단에 위치합니다. 이것은 브라우저가 올바르게 화면을 표시하기 위해 필요한 항목입니다. 만약 선언하지 않는 다면 브라우저의 호환모드로 웹 페이지를 해석하게 됩니다호환모드가 되면 HTML 태그가 정확하게 표현이 안될 수 있습니다. DOCTYPE 내부 값들에 대해 알아 보겠습니다. 

 

- HTML : HTML 문서임을 알려줍니다.

- PUBLIC : 외부로 공개한 문서와 내부용이 있는데 외부 공개용 문서임을 알립니다.

- "-//W3C//DTD HTML 4.01 Transitional//EN" : 비공식기관인 W3C 기관에 의해 HTML 4.01 Transitional 방식으로 출력한다는 말입니다.

- http://www.w3.org/TR/html4/loose.dtd : 링크 주소의 dtd 문서를 참고하라는 말입니다.

 

¤ <html></html>

 

문서의 시작과 끝에 해당하는 태그입니다. 작성한 내용은 모두 <html> 을 시작으로 하고 마지막에 </html> 로 끝나야 합니다. 그런데 DOCTYPE <html> 위에 위치하게 되죠.

 

¤ <head></head>

 

head 는 웹 브라우저에 표시되는 영역이 아니며 여러 설정들을 모아 두는 곳입니다. head 에는 <title>, <style>, <meta> 태그가 들어가게 됩니다. <title>은 문서의 제목을 보여 주게 됩니다. <style> 은 자바스크립트나 스타일 시트를 표시합니다. <meta> 는 문자 인코딩이나 컨텐츠 타입 등을 표시합니다. 한글일 경우 EUC-KR 로 표기하죠.

 

¤ <body></body>

 

<body> 안에 웹 브라우저에 표현할 모든 태그들이 들어가는 곳입니다. <body> 안에 있어야 웹 브라우저에 출력이 가능합니다. 앞으로 나올 대부분의 태그는 <body> 안에 포함되어 있겠죠.

Posted by 녹두장군