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
  1. Favicon of http://gutmsl.blog.me BlogIcon 본카 (2010.10.27 21:51)
    좋은 정보 감사합니다!
  2. Favicon of https://clason.tistory.com BlogIcon 오드리햇반 (2011.07.06 18:56 신고)
    highlighter로 코드를 입력하니까 추가되거나 누락되는 현상이 생기는데 어찌 해결해야 될까?
    • Favicon of https://codebuzz.tistory.com BlogIcon Nasty (2011.07.12 17:47 신고)
      추가되는 현상은 봤어도 누락되는건 못봤는데..흠
      혹시 js파일 티스토리에 업로드 해서 사용하세요??
  3. Favicon of https://clason.tistory.com BlogIcon 오드리햇반 (2011.07.12 18:03 신고)
    누락되는건 치환자였는데 꺽은괄호 바꿔주거나 대괄호랑 #사이에 추가하는걸로 해결봤지.. 이 방법이 맞는겨?
    추가되는건 생략된 소스가 추가되는거 같은데.... 포스트 참고 http://clason.tistory.com/155