<head> 를 정말 머리처럼

XHTML 이 나오게 되면서 여러가지 부분들이 바뀌었습니다. 특히 바로 이 head, 머리부분, 그리고 그 윗 부분이 심각하게 살벌해졌습니다. W3C 에서 요구하는 사항들이 강해졌거든요. 많은분들께서 '뭐가 이렇게 정할께 많은거야?' 라고 생각하실지 모르지만, 오히려 이 부분을 자세히 다루면서 '문서'의 개념또한 더욱 발전했다고 생각합니다. 문서의 종류를 정한다거나 인코딩을 꼭 정해준다거나, 여러 부분에 있어서 더욱 내 홈페이지가 더 내 논문같은, 리포트같은, 혹은 일기장 같은 종류로 구분될수 있다고 봅니다.

"내홈피는 웹표준. 5가지부터 시작하기." 에서 약간 더 들어가 보는 식이 되겠네요.

  1. DOCTYPE 은 <html> 의 시작 전에 declare, 정해집니다. <DOCTYPE 으로 시작되는 이것은 document type 의 줄임말로 문서의 종류를 정합니다. 더 정확히는 어떤 버전의 xhtml, 혹은 html 버전으로 씌인건지 말해주게 됩니다. 이것이 html 4.0 으로 만들어 진것인지, xhtml 1.0 인지 등등 말이죠. 뭐 별로 중요한게 아닐꺼라고 말씀하신다면 혹시 지금 가지고 계신 홈페이지를 xhtml 1.1 로 정해보세요. 상당히 다른 모습을 볼수 있으실 겁니다. 그만큼 코딩의 차이가 있기때문에, 그리고 인식하는 값들이 틀리기 때문에 DOCTYPE 을 확실하게 말해주는 것이 절대 필요한것입니다.

    xhtml 의 버전을 적으실때는 이 4가지가 가장 보편적으로 쓰입니다. (XHTML WIKI 참고) 더 많은 종류를 원하시면 이곳으로 가서 확인해 보시구요

    • XHTML 1.0 Strict 가 있으며 이것은 XML 형식으로 된 HTML 4.01 Strict 모드와 같습니다. 상당히 strict 엄격합니다.
    • XHTML 1.0 Transitional 은 transitional 이라는 단어가 설명해 주듯이 바뀌어 가는 중간선에 놓여진 버전입니다. XHTML strict 버전에서 사용할수 없는 몇가지 html 의 속성들의 사용이 가능합니다. 예를들어 <center>, <u>, <strike>, <applet> 등등 말이죠.
    • XHTML 1.0 Frameset: HTML 의 Frameset 을 허락합니다.
    • XHTML 1.1 최근에 만들어지는 홈페이지는 이것으로 제작하기를 권장하고 있는데, 제작자가 필요한 도구들을 import, 넣을수가 있습니다. frameset 같은것들 입니다.

    이런 버전에 따라서 <DOCTYPE> 이 바뀌게 되는데요 자신이 쓴 버전에 따라서 다음의 문구, 즉 회색부분을 카피하셔서 <html> 전에 넣으시면 됩니다. XHTML 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

  2. <head> 바로 전것을 보았으니 그 안에 것을 보겠습니다. 안에서 주시해야 할 부분은 바로 charset, 인코딩 부분입니다. 어떠한 문서로 인식이 될것인지 정했으니 이제 어떠한 언어로 만들어졌는지를 말해 주어야 겠습니다.

    보통 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 이렇게 표기합니다. <meta> 안의 여러 속성들이 모여졌는데 여기서 중요한것은 빨간 부분입니다. 아직까지 대부분의 홈페이지는 EUC-KR 로 정해져 있지만 이제 슬슬 UTF-8이 이끌어가는 추세입니다. Unicode Transformation Format-8 의 줄임말로 여러전문적인 설명들이 있지만 확실한건 여러가지 장점들로 XML 의 인코딩으로 선택되어 웹에서도 멋지게 쓰이고 있다는 것입니다. 제작자에겐 UTF-8 의 사용이라고 다를건 없습니다만, 웹사이트를 제작하는 프로그램(Dreamweaver, notepad, editplus) 등이 저장시에 UTF-8로 저장되는지 확인만 한다면 문제가 없겠습니다. UTF-8 의 전문적인 지식을 원하시면 이 문서를 참고하시기 바랍니다.

  3. 이 부분은 W3C 가 요구하는 사항이 아니지만 <meta name="Author" content="SEMIN KIM aka ilmol" /> 의 저자부분을 넣으며 또한 <meta name="Keywords" content="키워드 한칸씩 띄워서 CSS CSS2 CSS3 XHTML" /> 부분또한 잘 표현해 주면 검색에 도움이 되게 됩니다. 또한 이 키워드 부분을 적으면서 제작자 자신에게도 자신의 웹사이트의 방향을 다시 돌아보는 좋은 기회라고 생각됩니다. 차근차근 생각하셔서 넣어보세요

    ; *쉼표 로 나누는것이 더 낫다고도 하고 다른곳에서는 쉼표없이 빈칸으로 나누는것이 좋다고도 합니다.
  4. 마지막 부분 즈음에는 이제 바로 CSS 파일 링크 부분이나 자체안에 넣는식이 들어가겠습니다. <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 식으로 들어가는데 더 자세히 CSS 파일의 적용은 "css 를 html에 넣는법"을 더 참고하시기 바랍니다.
  5. 이렇게 문서의 언어가 지정되었으면 아시다시피 <title> 부분이 잘 정해졌나 확인하시면 되겠네요.

이렇게 head 부분에 많은것을 넣으셔서 자신만의 멋진 웹페이지의 정보를 나열하세요 부담으로 보지 마시고 기회로 받아들이시면 더욱 친근하게 다가올거라 생각됩니다.