HTML 기본 구조

By | 2013년 12월 23일

[목적]
HTML의 기본 구조에 대해 배운다.

[이론]
일반적으로 홈페이지는 MSIE, FireFox, Chrome 등과 같은 브라우저를 통해 접속한다. 이 때 브라우저는 서버로 부터 HTML(Hyper Text Markup Language) 형식의 홈페이지 문서를 렌더링(해석)하여 사용자에게 보여준다. 따라서 홈페이지 작성의 가장 기본은 HTML이다. 이 글에서는 HTML의 기본형식에 대해 살펴보겠다.

[HTML의 기본 형식]
HTML은 태그(Tag)로 구성된 스크립트 언어다. 그러므로 HTML을 공부할 때 가장 먼저 배우는 것은 태그다. 하나의 홈페이지를 구성하고있는 HTML의 내용은 각각의 홈페이지 마다 다르지만 거의 모든 HTML은 다음과 같은 구조를 가지고 있다.

<!DOCTYPE html-버전>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=문자셋"/>
        <title>홈페이지 제목</title>
    </head>
    <body>
        홈페이지 내용
    </body>
</html>

위 구조에서 사용된 태그는 ‘<html>’, ‘<head>’, ‘<meta>’, ‘<title>’, ‘<body>’ 등 이다. 태그들을 살펴보면 <meta> 태그를 제외한 모든 태그들은  ‘</html>’, ‘</body>’ 등과 같이 앞 부분에 ‘/’가 붙어있는 태그들과 쌍을 이루고 있다. 이것은 닫힌 태그를 의미하며, 괄호구조 ‘(‘ ~ ‘)’에서 ‘)’과 같은 의미로 생각하면 된다. ‘<meta>’ 태그의 경우에는 ‘</meta>’와 쌍을 이루고 있지 않은데 대신 다른 태그와는 달리 ‘<meta>’ 태그의 마지막 부분에 ‘/>’로 닫혀있다. 이는 태그 내에 내용이 없는 빈 태그를 의미하며 Line 4의 ‘<meta>’ 태그는 ‘<meta http-equiv=”Content-Type” content=”text/html; charset=문자셋”></meta>’의 다른 표현이다.

Line 1 : html의 버전을 표시한다.
Line 2 : html 문서의 최상위 태그로 html 문서는 반드시 ‘<html>’ ~ ‘</html>’를 최상위 태그로 갖는다.
Line 3 : 문서의 제목 또는 정보 및 스크립트 또는 스타일시트 연결 등과 같은 내용이 ‘<head>’ ~ ‘</head>’ 태그 사이에 위치한다.
Line 4 : 다국어 지원을 위한 인코딩 문자셋으로 한글의 경우 문자셋 부분에 ‘UTF-8’ 또는 ‘EUC-KR’이 온다.
Line 5 : 브라누저 상단 타이틀바에 표시될 문자가 ‘<title>’ ~ ‘</title>’ 태그 사이에 위치한다.
Line 7 : 브라우저 메인 화면에 표시될 내용이 ‘<body>’ ~ ‘</body>’ 태그 사이에 위치한다.

앞에서 실습한 ‘exam-01-01.html’을 위 내용에 유념하여 살펴보면 브라우저의 출력 결과 화면을 이해할 수 있을 것이다.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>My 1st HTML</title>
    </head>
    <body>
        Hello, World!
    </body>
</html>

Line 1 : html 버전이 html5임을 표시
Line 4 : 인코딩 문자셋이 ‘UTF-8’ 임을 표시
Line 5 : 브라누저 상단 타이틀바에 ‘My 1st HTML’을 출력
Line 7 : 브라우저 메인 화면에 ‘Hello, World’를 출력

03-01

[실습]
다음 예제 ‘exam-03-01.html’을 서버에 올리고 결과를 예상한 후 브라우저로 확인해 보자.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>HTML5</title>
    </head>
    <body>
        HTML5 is The New HTML Standard.
    </body>
</html>

03-02

[과제]
다음 결과를 출력하는 HTML 파일을 ‘exam-04-01.html’로 작성해 보자.

04-02