2009. 12. 15. 16:00 | 개발이야기

어제에 이어 오늘도 HTML이야기를 계속 해 볼까 합니다 ^^

기본적으로 html문서파일은 우리가 흔히 메모장으로 만드는 일반 텍스트 파일입니다.
즉, html을 작성할때는 일반 메모장으로도 충분히 연습을 할 수 있단 말이 되겠죠??

HTML문서의 기본 구조는 아래와 같습니다.

위의 내용을 메모장에 넣어서 .html 파일로 저장해서 실행을 시켜보면,
브라우저의 창에 "HTML문서가 나오는 부분입니다." 라는 글자를 확인 할 수 있습니다.

단, 저장할때 위 화면처럼 파일형식에 "모든파일", 인코딩에 "UTF-8" 로 저장해야 합니다.

실제로, HTML 태그들을 하나하나 뜯어서 보면,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이부분은 이 html문서가 어떤 문서타입으로 작성이 되었는지 알려주는 부분입니다.
Document Type Declation 이라고 하는데요, HTML의 많은 버전중 어떤 버전으로 작성을 했는지,
브라우저에게 알려주는 역할이라고 보시면 되겠습니다.

많은 버전의 DOCTYPE이 있고, 같은 버전이라도 strict, transitional, frameset 이 있는데요
해당 버전의 DOCTYPE은 여기 에서 확인 해 보시기 바랍니다 ^^

strict의 경우, 엄격한 문서타입을 의미하는데요,
표준을 엄격히 지켜 초창기 사용되던 태그나 특정 브라우저에서만 지원하는 태그의 사용이 제한됩니다.

transitional의 경우엔 strict보다 유연하게 관습적으로 사용되던 태그의 사용이 지원되고요,
framset의 경우 html문서의 frame을 지원하는 문서 타입입니다.

다음에 나오는 <html>은 제일 하단에 위치한 </html>과 짝을 이루는 복합태그입니다.
이제부터 HTML문서가 시작된다는 것을 알려주는 역할을 한다고 보시면 되구요,
하단의 </html>은 여기까지가 HTML문서다 라고 표시를 했다고 보면 됩니다.

이전에도 이야기를 했지만 태그에는 이렇게 시작과 끝이 있는 태그가 있는데요,
이 태그가 가지는 의미는 해당 내용이 여기<html>부터 여기</html>까지 포함된다고 생각하면 되겠습니다.

<head>~</head>
웹문서의 속성 설정을 하는 부분을 뜻합니다.
흔히 생각해서 웹페이지에 표시는 되지 않으나, 전체적인 문서의 속성을 지정해주는 부분이라 보면 됩니다.
예제에서 보시는 meta태그나, title등의 태그 및 그 외에 css나 javascript를 지정해주는 부분입니다.

<body>~</body>
웹문서의 본문이 나오는 부분입니다.
여기서 각종 태그들을 이용해서 웹문서를 나타낸다고 생각하면 됩니다 ^^

그 외에 여기서 사용된 태그를 안내를 해 드리면,

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
웹문서의 문자셋을 지정 해주는 메타태그 입니다 ^^
지금은 이정도로만 알고, 메타 태그에 대해선 나중에 더 자세히 알아보도록 하겠습니다 ^^

<title>~<title>
웹문서의 제목을 지정해주는 태그입니다.
제목이라고 해서 본문에 나오는 부분은 아니고.. 하단 그림처럼 제목표시줄에 나오는 부분입니다 ^^

여기까지 간단한 예제를 통해서 문서의 구조를 살펴 봤는데요,
HTML 문서 작성시 메모장이 불편하긴 하지만 처음 시작할땐 이만큼 좋은것도 없습니다 ^^;

추가적으로 별개의 에디터를 사용하시려면 추천 해 드리는 무료 에디터는,
vim(이건 처음에 사용하기 좀 어렵깁 합니다..^^;)
아크로에디터, 데이지 에디트 등이 있습니다 ^^

이러한 에디터를 사용하면 위의 html 화면처럼 각 부분별로 문법 하이라이팅이 지원되는 등의
편리함을 가지고 문서를 작성 할 수 있습니다 ^^




'개발이야기' 카테고리의 다른 글

HTML - HEAD 태그  (4) 2010.10.02
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09