문서구조

HTML 문서 포맷의 구조는 어떻게 되는지에 대해서 알아 보도록 합니다.

문서포맷

이전에서는 hello world 문자열을 웹 브라우저로 출력을 하였습니다.

최신 웹 브라우저는 기능이 많이 좋아져서, html 문서 규격을 맞지 않아도 정상적으로 우리가 원하는 문자열을 화면에 출력을 할 수 있습니다.
하지만, 정상적인 웹페이지를 화면 출력 하기 위해서는 html 문서구조를 맞추어 주어야 합니다.

작성된 코드가 html 형태의 파일임을 알리는 코드를 첫줄에 작성을 합니다. html 문서의 버전을 관리합니다. 5.x 이전에는 복잡하고 다양한 형태의 문서 버전 규격을 적용하였습니다.

하지만 5.x 부터는 다음과 같이 간단하게 html 버전을 지정할 수 있습니다.

<!DOCTYPE html>

doctype은 대문자, 소문자 모두 사용이 가능합니다. 하지만 선언문에 반드시 html이라는 문자가 같이 들어가 있어야 합니다.

<!DOCTYPE html> 태그는 웹 브라우저가 현재 웹 페이지가 HTMLS 문서임을 인식하게 만들어 줍니다.

html 파일은 크게 2개의 영역이 존재합니다. 문서의 정보를 출력하는 영역 입니다.
문서의 정보를 담고 있는 head 영역과 실제 내용을 담고 있는 body 입니다.

head 태그는 body 태그에서 필요한스타일시트와자바스크립트를 제공하는데 사용합니다.

<head> 
</head>

문서의 내용을 출력합니다.
body 태그는사용자에게 보이는실제 부분입니다.

<body>
</body>

앞에서 우리는 간단하게 테그의 기본에 대해서 학습을 하였습니다.
html 문서는 html 테그를 기반으로 작성을 하게 됩니다.

html문서의 시작과 끝은 html 테그로 감싸져 있습니다.

<html>

</html>

그리고 2개의 영역은 <html></html> 테그로 감싸져 있습니다.

html 테그는 문서의 최상의 루트 요소를 의미합니다.

html 테그에는 속성값으로 문서의 언어 포맷을 같이 지정하기도 합니다.

<html lang="ko">

</html>

lang 속성은 문서가 어떤 문화권의 언어로 작성이 되어 있는지에 대해서 추가 정보를 지정하는 것입니다.

lang 속성은 실제 웹 브라우저가 동작하는 데 어떠한 영향도 끼치지 않습니다. 대신 구글과 같은 검색 엔진이 웹 페이지를 탐색할때, 해당 페이지가 어떠한 언어로 만들어져 있는지 쉽게 파악을 하기 위해서 입니다.

앞에서 작성한 hello world 문자열을 문서타입 코드와 영역테그를 함께 사용하여 html 문서를 다시 작성을 합니다.

파일명 : hello-02.html

<!DOCTYPE html>
<html>
    <head> 
    </head>
    <body>
        Hello World
    </body>
</html>

hello

다시 작성한 html 문서를 브라우저에서 확인을 합니다.

이전과 다른 점은 없습니다. 하지만 html 웹 구조에 맞에 정확히 문서를 작성을 하였을뿐입니다.

html 문서 규격에 맞추어 코드를 작성을 해야만 , 예상되지 못한 문제를 방지하고 정확한 화면 출력이 가능합니다.