'웹문서구조'에 해당되는 글 2

  1. 2010.10.02 HTML - HEAD 태그 (4)
  2. 2009.12.15 HTML 기본 구조 (2)
2010.10.02 03:16 | 개발이야기

정말 한 백년만에 적는 이야기인거같네요.. :)
최근에 궁시렁 대는글을 빼고는.. ㅎㅎ
슬슬 다시 HTML에 대해서 이야기를 해 볼까 하는데요..

지난번에 어떤 이야기를 했는지 가물가물 하다면 여기 를 클릭하면 됩니다.

지난번엔 HTML문서의 전체적인 구조를 한번 살펴봤군요..
다시 되짚어 본다면 HTML의 문서는 크게 세부분으로 나눠 볼 수 있습니다.

첫번째.. DTD선언부.
HTML문서의 타입과 버전을 선언하는 부분입니다.
이거 선언 제대로 안해주면 크로스 브라우징에서 애먹어요~

두번째는 HEAD 부분
오늘 자세히 설명을 할 부분으로 HTML문서의 전체적인 속성을 정의하는 부분이라고 볼 수 있습니다.

그리고 마지막으로 BODY부분
우리가 실제로 브라우저에서 보고 읽고 클릭하는 부분을 넣어두는 부분이라고 보면 됩니다.

자.. 그럼 이제 HEAD에 대해서 알아보도록 하겠습니다.

이 HEAD내부에 넣어둔 태그는 대부분 우리가 보는 웹브라우저상에서 확인을 할 수 없습니다.
딱 하나.. TITLE 태그만이 웹브라우저의 제목표시줄상에서 보여지게 되는데요..
HEAD는 말 그대로 HTML문서의 머리 역할을 하게 됩니다.

이 HEAD 태그 내부에 들어가는 태그들 역시 대략 세개가 있는데요..

첫번째.. META태그 입니다.
지난 글에 살짝 언급을 했었는데요.. 
이 META태그는 폭 넓게 봤을때 HTML문서의 속성을 정리 해 두는 태그라고 생각하면 됩니다.

지난 글에는 아래와 같은 코드를 소개를 해 드렸었습니다.

위의 코드를 보면 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
와 같은 부분을 찾아 볼 수 있습니다.
이 부분이 바로 META태그인데요.. 이 태그의 목적은 HTML문서의 Content Type
즉, 문서의 컨텐츠 타입에 대해서 안내를 해 주는것입니다.

content는 일반 텍스트로 이루어진 html문서 (text/html)이고 문자 인코딩(charset)은 utf-8 이라는
일종의 유니코드 형식으로 이루어져 있다고 해석하면 됩니다.

이 외에도 META태그의 대표적인 쓰임새가 있는데요..
그것은 바로 검색엔진최적화(SEO)에 쓰이는 검색 키워드 설정입니다.


위의 코드를 보면 Description 부분과 Keywords 두 부분이 보이실겁니다. Description부분은 말 그대로 이 문서의 설명을 뜻한다고 보면 됩니다. 그리고 Keywords 부분은 이 문서가 검색엔진에 등록 될 시 검색엔진에 제공해줄 키워드를 넣어두는 곳이라고 생각하시면 됩니다.

즉, 내 HTML문서와 관련된 키워드로는 이러이러이러한것들이 있다 라는것을 알려준다고 보면 되겠네요.

이 외에도 META 태그에는 Author, Copyright 등의 정보를 넣어서 검색엔진에 정보를 줄 수 있습니다. 하지만 이 META태그가 검색에 얼마나 유용하게 쓰이는지는 각 검색엔진의 특성에 따라 조금씩 다를수는 있다고 하네요

두번째로는 TITLE입니다. 위의 첫번째 코드에서 <title>HTML문서의 구조</title> 와 같은 부분이 바로 TITLE인데요 이 HTML문서의 제목을 넣어두는 태그라고 보시면 됩니다. 군더더기 없이 그냥 위와같이 넣어두면 브라우저의 제목표시줄이나 탭에 그 안에 있는 내용을 보여주게 되구요 검색엔진에 따라서는 TITLE태그의 내용도 검색에 반영하게 됩니다.

세번째로는 STYLE, LINK 태그가 있습니다. 이부분은 HTML문서의 Style Sheet를 위한 태그로, 웹문서의 스타일을 넣어주는 부분입니다. STYLE태그를 사용하면 아래처럼 태그 안에 일일이 CSS를 넣어주는 형태 (Internal CSS)로 사용을 해야하구요 LINK태그를 사용하면 아래 코드처럼 CSS만을 모아놓은 파일을 link (External CSS)시키는 형태로 사용을 하면 됩니다. CSS에 대해서는 다음에 한번 깊게 다룰 예정이니 여기선 이정도 알아 두면 될꺼 같네요..

그 외에도 <SCRIPT>태그가 올수 있는데요.. 문서에 사용되는 스크립트 언어를 사용하는 태그입니다. 이 태그에서 사용되는 스크립트는 주로 자바스크립트를 사용하는데요.. 아래 코드처럼 외부에 따로 모아둔 파일만을 링크 시킬 수 있구요.. 혹은 아래처럼 직접 스크립트를 작성 해서 사용도 가능합니다. HEAD부분에는 아래에 사용될 함수 등을 미리 선언해주는 정도로 사용을 하게 됩니다. 그 외에 실제로 스크립트를 실행하게 해주는 부분은 문서의 중간이나 최하단(권장)에 위치하게 되는데요 이는 문서가 채 로딩되기도 전에 혹시 모를 스크립트 오류때문에 문서가 안보여질 것을 미리 예방하기 위해 이렇게 사용하곤 합니다.

즉, HTML문서가 브라우저 상에서 렌더링이 거의 끝나서 보여질때쯤 해서 자바스크립트 실행을 시작하는거죠.. 그러면 스크립트에 오류가 있어도 해당 스크립트 실행만 안될뿐, 웹문서를 보는데는 큰 지장 없이 볼 수 있게 됩니다.

위의 이야기들처럼 HEAD는 직접적으로 보이지는 않는 부분이지만 웹문서를 보여주기 위한 아주 중요한 속성들을 담고 있는 부분이라고 보면 됩니다 :)

여기까지 기본적인 이야기였구요 다음번부터는 BODY태그 소개와 함께 대표적인 HTML태그들을 한번 살펴보도록 하겠습니다

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

HTML - HEAD 태그  (4) 2010.10.02
HTML 기본 구조  (2) 2009.12.15
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09
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 기본 구조  (2) 2009.12.15
HTML  (4) 2009.12.14
CSS : Box Model  (0) 2009.12.11
CSS : Float 흐름끊기  (2) 2009.12.10
CSS : Float  (0) 2009.12.09