[HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점

티스토리 뷰

Programming Lecture/HTML5

[HTML5 튜토리얼] 기초 및 기본 구조, 프로그래밍상 기존의 HTML과 바뀐 점

Unikys 2012. 11. 3. 22:44

* 이번에는 HTML의 기초와 기본구조를 한번 살펴보도록 하자.

2012/10/25 - [Programming Lecture/HTML5] - [HTML5 튜토리얼] HTML5의 등장 배경과 여러 가지 개발 환경 및 현재 현황

: 이전 글에 있었던 XHTML의 해더를 다시한번 살펴보자.

1 2	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">` `<html` `xmlns="http://www.w3.org/1999/xhtml"` `xml:lang="en"` `lang="en">`

: HTML에 익숙하지 않는다면 이게 뭔가 싶을수도 있을 것이고, xhtml에 익숙했던 사람들이라면 지긋지긋하게 외우기도 했을 문서의 형식과 스펙, 그리고 validation 스펙을 정의하는 헤더이다. XHTML에서는 이 헤더가 아주 중요한 역할을 하고 있었다. XHTML은 XML과 동일하게 사용을 하고자 했기 때문에 XML의 엄역한 validation을 똑같이 적용하고자 했던 것이다. xml에 익숙한 사람들이라면 헤더에 명시되어있는 dtd 파일 형식도 많이 익숙할 것이다.

: DTD는 바로 Document Type Definition의 약자로 현재 문서가 어떠한 문서인지 스펙을 명시하는 파일인 것이다. 즉, XML 파일이 있으면 현재 XML 파일이 가지고 있을 구조에 대해서 명시를 한 것이고, XHTML은 이렇게 명시되어있는 DTD파일에서 어긋나면 안되는 것이었다. 상당히 엄격한 제약을 가지고 있던터라 기존에 있는 웹페이지들이 그것을 지켰을리 만무하고 개발자들이 그것을 순순히 따라가지도 않았을 것이다. 그 스펙은 아래 사이트에 들어가면 여전히 살펴볼수 있다. 쭉 살펴보는것도 재미가 있을 것이다.

http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0-Strict

: 이러한 복잡한 헤더파일이 불만이 되어 HTML5에서는 단순화 되었다. Zen Coding을 이용해서 나오는 템플릿을 통해서도 어떠한 기본 구조를 가지는지 확인할 수 있을 것이다.

<!DOCTYPE html>
<html lang="ko-kr">
<head>
  <meta charset="UTF-8"/>
  <title></title>
</head>
<body>
</body>
</html>

: 다음 HTML5의 헤더는 XHTML의 뒤에 있는 복잡한 내용들을 다 생략하고 !DOCTYPE html 이렇게 하면 HTML5를 사용하는 것으로 구분하게 되는 것이다. 그리고 html에는 현재 페이지의 언어를 명시해주고 head 태그 안에 캐릭터셋을 utf-8로 해주면 한글을 사용하는데에 기본적으로 인코딩을 시켜주게 될 것이다. 캐릭터셋을 명시하는 meta 태그 같은 경우에도 기존보다 간단하게 축약된것으로 원래는 아래와 같이 해야했다.

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

원래 이러한 방식으로 명시했던것을 charset="UTF-8"이렇게 간단하게 바뀐것이다. 이런식으로 HTML5에서는 개발자의 편의를 위해서 다양한 것들을 축약하게 된 것이다. 이렇게 축약하는 대상들은 기존의 HTML 규격에서 당연하게 써야했던 것들, 항상 반복해서 해야했던 것들을 축약할 수 있게 해준 것이다. 그 외 당연한 것들을 축약한 예들이 아래와 같다.

기존

<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js" />

HTML5

<link rel="stylesheet" href="style.css" />
<script src="script.js" />

: HTML5에서는 type을 생략해도 잘 돌아가게 되었다. 이것은 이제 HTML5에서는 Javascript와 CSS3가 기본이 되었기 때문에 생략하게 되면 이렇게 자동으로 설정이 되는 것이다. 기존처럼 VBScript나 JScript 등을 이용하고자 한다면 그때에는 명시를 해줘야할 것이지만, 이제는 Javascript가 웹의 대세로 자리매김을 했다고 보고 Javascript로 포팅하는 것이 괜찮을 것이다.

: 이 외에는 특별한 경우 종료태그를 생략해도 되는 경우들도 있다. 위의 meta를 할 때 위에 />를 안하고 그냥 >로 닫아도 아무 문제가 없으며, 목록을 작성할 때 리스트 아이템 태그(li)도 생략이 가능하다. 다른 예로는 테이블의 tr td도 생략이 가능해졌다.

meta 태그는 종료 태그를 생략해도 된다. meta태그 외에도 area, base, br, col, command, embed, hr, img, input, keygen, link, param, source등의 태그들이 생략 가능하다.

  <meta charset="UTF-8">

li의 종료태그를 생략하는 것도 가능하고,

<ul>
    <li>종료태그 생략가능
    <li>종료태그 생략가능
</ul>

또는 table에서 tr, td의 종료태그도 생략가능하다

<table>
    <tr><td>종료태그<td>생략가능
    <tr><td>종료태그<td>생략가능
</table>

: 위와 같이 종료태그를 난무해야되었던 경우 생략해도 되는 태그들도 생긴 것이다. 물론 생략은 가능 하지만 구조적인 문서를 위하여 그래도 종료태그도 같이 써주는 것이 현명할 때가 많을 것이다.

: 그 외에는 속성을 true시켜주는 것 또한 간단해졌다. 기존에는 disabled 속성을 활성화 시킬대에는 disabled="true" 이런식으로 사용하였지만, 이제는 간단하게 설정이 가능하다.

<input type="buton" disabled>
<input type="buton" disabled="">
<input type="buton" disabled="disabled">

: 위와 같이 disabled를 활성화 시키려면 그냥 disabled만 쳐도 되고, 공백의 문자열로 설정해도 되며, 속성명과 똑같이 disabled로 속성 값을 설정하면 활성화가 된다.

* 이렇게 HTML5에서는 개발자들을 위하여 점점 복잡해져왔던 규격들을 쉽게 바꿔주었고, 엄청난 제약조건들을 풀어줌으로써 개발자들을 위한 편한 언어로 바뀌게 된 것이다. 하지만 이러한 변화만이 HTML5의 전부라고 한다면 사람들이 HTML5에 열광을 하지 않을 것이다. 그 외에도 HTML자체의 문서화와 캔버스, 그리고 브라우저를 통한 통신기능, 저장기능 등 다양한 기능들을 제공해줌으로써 웹으로도 네이티브 어플리케이션과 비슷한 기능들을 제공해주고자하는 노력들이 담겨져 있기 때문에 많은 주목을 받고 있는 것이다.

: 모바일에서의 Flash 지원이 끊기고 있는 실정에서 이제 Flash가 저물어각 있는 것은 너무나 당연한 일이 되어버렸고, 사이트를 Flash로 덕지덕지 붙이는 것은 이제 촌스러운 시대가 되어버리고 HTML5와 CSS, 그리고 자바스크립트로 사이트를 멋지게 꾸미는 것이 점점더 각광 받기 시작할 것이다.

* 일단 간단하게 프로그래밍상 변화된 부분은 여기까지 보고, 다음에는 HTML5에서 바뀐 문서의 구조에 대해서 살펴보도록 하자.

* 다음편

2012/11/05 - [HTML5 튜토리얼] HTML5에 추가된 Element들 그리고 문서의 구조화

2012/11/18 - [HTML5 튜토리얼] Canvas 기초 강좌

2012/11/23 - [HTML5 튜토리얼] Video와 Audio 태그 기본

2012/12/03 - [HTML5 튜토리얼] 새로운 form element 들

2016/05/04 - [HTML5 튜토리얼] Web storage (localStorage, sessionStorage)

2017/01/09 - [HTML5 튜토리얼] navigator.geolocation 위치 정보 수집 API

- [HTML5 튜토리얼] 기초 및 기본 구조 끝.