HTML 시작하기, DOCTYPE(DTD), meta 에 관하여.

들어가기 앞서.


HTML 을 작성하려고 보면 항상 기본적으로 들어있는 내용들이 있습니다.
사실 모두 암기하고 있을 필요는 없지만, 어떤 내용들을 담고 있는지 정도는 알아두어야 겠습니다. 


HTML 기본 형태


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Untitled Document</title>

</head>


<body>

</body>

</html>


HTML 을 작성하려고 드림위버나 기타 다른 에디터 프로그램을 켜면 나오는 기본 형태입니다.
아주 예전에 HTML을 작성했을 때는 볼 수 없었던, DOCTYPE 와 meta 부분에 대해 간단히 살펴 보도록 하겠습니다.


DOCTYPE(DTD)


1. DOCTYPE 란?


HTML 시작 부분에 문서 타입을 선언하는 것을 DOCTYPE 또는 DTD라고 칭합니다.
즉, 어떤 문서타입인지, 마크업 언어가 무엇인지, 버젼이 무엇인지, 구문 규칙을 얼마나 준수할 것인지에 대한 정보를 브라우저에게 넘겨줍니다.


2. 작성방법


그럼 우리는 어떻게 작성을 해야 할까요? 
대부분의 Edit 프로그램에서 제공하는 자동 완성 기능을 이용하면 됩니다.

<드림위버 환경에서 DOCTYPE 설정방법>


드림위버에서는 7가지 타입으로 DOCTYPE 를 자동 작성시켜주는 것을 볼 수 있습니다.
목록을 보면 어떤 역활인지 알 수 있는데, Transitional과 Strict이 무슨 역활을 하는지 잘 모르기에 약간의 설명을 붙입니다.

Transitional 이나 Strict 은 구문 규칙을 얼마나 엄격하게 준수할 것인지에 대한 정보입니다. 아래와 같이 3가지로 분류됩니다.

Strict (엄격모드)
다음과 같은 요소는 사용할 수 없습니다.

+ center

+ font

+ iframe

+ strike

+ u

다음과 같은 속성은 사용할 수 없습니다.

+ align

+ language

+ background

+ bgcolor

+ border

+ height

+ hspace

+ name

+ noshade

+ nowrap

+ target

+ text

+ link

+ vlink

+ alink

+ vspace

+ width 


Transitional (호환모드)
말 그대로 예전에 만들어진 문서에 디자인 요소를 추가하는 방법으로 이용이 됩니다. 기존 문서에는 이미 위와 같은 요소나 속성들이 들어가 있기 때문에 Transitional 모드를 사용하지만, 앞으로 새롭게 개발되는 문서라면 Strict 모드를 이용할 것을 추천합니다.


Frameset (프레임 사용가능 - 현재는 비추천 됨)
다음과 같은 태그를 사용할 수 있습니다.

+ frame

+ frameset

+ noframes 


meta


meta 요소는 문서의 필수 요소는 아닙니다. 추가적인 정보를 제공할 때 사용합니다.
주로 문서 저자에 대한 정보, 문서를 제작하는데 사용한 도구, 검색 엔진에 키워드 제공(최근에는 비사용) 등등이 있습니다.

아래와 같이 2가지 방법으로 사용됩니다.


<meta name="속성명" content="내용">


아래와 같은 속성을 사용할 수 있습니다.


+ keywords

+ author

+ generator 

<meta http-equiv="속성명" content="내용">


아래와 같은 속성을 사용할 수 있습니다.

+ content-type

+ content-disposition

+ pragma

+  cache-control

+ refresh

+ set-cookie 




'Development > HTML/CSS' 카테고리의 다른 글

css :: table css 모음 싸이트  (0) 2014.02.18
웹의 과거와 현재 HTML5  (0) 2014.02.18

css :: table css 모음 싸이트

유용하게 쓰일 수 있을꺼 같습니다. 특히나 table 쪽 css가 처음이시라면 참고해서 바꾸셔도 될듯 하네요!



http://icant.co.uk/csstablegallery/tables/100.php



'Development > HTML/CSS' 카테고리의 다른 글

HTML 시작하기, DOCTYPE(DTD), meta 에 관하여.  (0) 2014.02.18
웹의 과거와 현재 HTML5  (0) 2014.02.18

웹의 과거와 현재 HTML5



웹의 과거

처음 WWW(World Wide Web) 가 이 세상에 나왔을때에 당시 인터넷의 속도는 매우 느렸습니다. 이미지 파일을 하나 받기에도 버거운 시절이였죠. 당연히 웹의 언어는 미디어 중심이 아닌 문자 중심이였습니다. 마크업 언어인 HTML은 그에 따라 문자와 내용 중심인 즉 웹페이지 자체를 문서화 하는 것이 핵심이였습니다. 


2000년 경 XHTML 이 나오면서 HTML 의 차기 표준으로 모든 이들의 기대를 모았고 이 기대의 바람을 타고 XHTML 은 HTML의 차기 표준이 되었습니다. 하지만 브라우저의 XHTML의 지원은 매우 느렸습니다. W3C가 HTML/XHTML의 차기작으로 계획했던 XHTML 2에 대한 브라우저의 지원은 전무하여 W3C에서는 지원을 중단하였습니다.


그 사이 웹에는 새로운 바람이 불고 있었습니다. 광대역 초고속 인터넷을 통해 수많은 사용자들이 빠른 인터넷의 혜택을 맛보았고 그에 따라 블로그와 UCC가 대세를 이루게 되었습니다. 이것은 마이크로소프트사의 XMLHttpRequest(비동기식 처리방법, 우리가 흔히 알고 있는 Ajax 기술)와 연동되어 웹 어플리케이션을 만드는 일이 현실화되게끔 하였습니다.


2004년, 모질라와 오페라에서는 HTML의 차기 표준으로 보다 실용적인 제안을 W3C에 공동 제출했습니다만, "웹 혁명을 위한 기존의 지향점에 위배된다"(웹페이지 자체를 문서화 하는 것)는 이유로 기각되었고 이에 대응책으로 애플, 오페라, 모질라 (당시 마이크로소프트사는 참여를 거부함, 이래서 익스플로러가 슈퍼 X이 되었죠.)는 WHATWG(Web Hypertext Application Technology Working Group) 를 구성하게 되었습니다. WHATWG의 처음 명칭은 Web Applications 1.0으로 정해졌고, 2007년 W3C의 HTML의 차기 HTML 로 정해지면서 HTML5로 명칭을 바꾸게 되었고 이것이 바로 HTML5의 시작입니다.


W3C HISTORY 본문

더보기


HTML5 주요기능

HTML5는 실무의 사용성에 중심을 두고 있으며 하위 HTML과의 호환성을 맞추는 것을 목표로 하고 있습니다.


주요기능 목록

  • 에러처리
  • canvas 요소 추가
  • 로컬 저장소
  • 웹 워커를 이용한 자바스크립스 스레드
  • 멀티미디어 지원
  • 지오로케이션을 이용한 위치 인식 웹 어플리케이션
  • 사용자 편집 가능 페이지


HTML5에서 추가되는 주요 기능들은 매우 강력합니다. 몇 가지 살펴 보자면, canvas 요소는 웹 페이지 상에서 2D의 그림객체들을 랜더링 할 수 있도록 도와줍니다. 이것은 웹 페이지에서 그래프라던지 통계페이지를 구성할때에 사용될 수 있는 요소이며 Ajax 기술을 이용하면 실시간 통계가 가능해집니다. 로컬 저장소는 쿠키를 매우 강력하게 개선한 것으로 일정치 않은 양의 데이터를 클라이언트에 안전하게 저장하고 접근을 가능하게 합니다.


참고

브라우저 엔진에 따른 HTML5 지원 현황 (영문)

canvas 요소에 대한 설명 (영문)

HTML5 로컬 저장소에 대해 배워 볼만한 곳 (영문) < 추천합니다.


마치며..

HTML5가 세상에 나온지 벌써 7년째가 되었습니다. 우리나라는 신기술을 받아들이는 속도는 빠르지만, 기능들에 대한 적절한 이해와 사용에 대해서는 많이 뒤쳐지는것 같습니다. HTML5를 제대로 이해하기 위해서는 웹(WWW)의 과거도 알아볼 필요가 있다고 생각되어 작성하였습니다. 다음편에는 HTML5에 새롭게 추가되는 요소에 대해 한번 써볼까 합니다.




참고문헌

웹 표준 가이드 (존 앨섭)


'Development > HTML/CSS' 카테고리의 다른 글

HTML 시작하기, DOCTYPE(DTD), meta 에 관하여.  (0) 2014.02.18
css :: table css 모음 싸이트  (0) 2014.02.18