1. 마크업 기본 규칙
HTML5는 HTML4 버전대의 문법도 호환하고 XHTML1 버전대의 문법도 호환합니다. 그래서 HTML문법에 익숙한 사람들은 HTML방식의 마크업 코딩을 하면 되고, XHTML 문법에 익숙한 사람들은 XHTML 방식으로 마크업을 하면 됩니다.
간단히 짚고 넘어가면, HTML4.x는 문법이 대문자고, 홀태그에 대한 닫힘태그가 없는 것이 특징이고, XHTML1은 모든 문법이 소문자고, 홀태그에 대한 닫힘 표시도 해야되는 엄격한 문법구조를 가지고 있다는 차이점이 있습니다.
HTML5의 기본 문법과 마크업 규칙에 대해서 알아보겠습니다.
(1) 처음 선언할때는 독타입을 선언합니다. 독타입은 문서형식선언(Document Type Declaration)으로 보통 웹 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 데에 사용합니다.
HTML5의 독타입은 매우 간결합니다. HTML 문서의 최상단에 다음 코드 한 줄만 넣어 주면 끝나니까요.^^
<!DOCTYPE html>
여기서 알파벳을 전부 대문자나 소문자로 또는 섞어 사용하셔도 무방합니다.
(2) 다음으로 현재 문서가 어떤 언어문서인지 선언을 해야 됩니다.
한글문서인 경우에는 lang=”ko”를, 영어문서인 경우에는 lang=”en”을 일어인 경우에는 lang=”jp” 중국어인 경우에는 lang=”zh”을 사용합니다. 우린 주로 영어와 한국어를 사용하므로, en이나 ko를 사용하시면 되겠습니다.
<html lang="ko">
(3) 그다음으로 설정해줘야하는 것은 캐릭터셋입니다. 문서의 캐릭터셋 설정도 이전보다 간단해졌습니다.
HTML 문서의 <head>에 다음과 같은 메타 태그를 삽입합니다.
<meta charset="utf-8">
Tip. utf-8을 사용해야 하는 이유가 뭘까요?
어느 나라에서나 한글을 문제없이 표현하고 싶고 미래지향적인 웹페이지를 만들고 싶다면 문서의 캐릭터셋은 UTF-8로 설정할 것을 권장합니다. EUC-KR은 한글, 한자, 영어를 제외한 다른 나라의 언어를 표현하지 못합니다. 반면, UTF-8은 한글은 물론이고 세계의 다양한 언어를 문제 없이 표현할 수 있습니다. 다만 UTF-8은 한글 한 자를 3바이트로 처리하여 문서 크기가 다소 커지지만, 공백이나 영문 한 자는 1바이트로 처리하는 유연함을 보여 줍니다. 캐릭터셋을 UTF-8로 사용한다면 HTML 파일을 저장할 때 파일 타입도 UTF-8로 저장해야 합니다.
(4) 다음은 <script> 태그의 type 속성에 흔히 쓰이는 ‘text/javascript’를 명시했던 이전버전과 달리 HTML5에서는 이런 속성이 필요하지 않습니다. 이렇게 명시하지 않아도 브라우저는 이 스크립트가 웹에서 가장 많이 사용하는 스크립트언어인 자바스크립트라고 생각할 것입니다. 그래서 이부분은 써도 되고, 안써도 됩니다.
<script src="sample.js"></script>
(5) 마찬가지로 CSS파일을 링크시킬 때에도 매번 ‘text/css’라는 type값을 명시하지 않아도 됩니다. 아래와 같이 단순히 이렇게만 써도 됩니다.
<link rel="stylesheet" href="style.css">
2. HTML5 템플릿
지금까지 문법과 규칙을 정리해서 기본적인 HTML5 기본 템플릿을 작성해보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="style.css">
<script src="sample.js"></script>
<style> </style>
</head>
<body>
</body>
</html>
3. 구형 익스플로러를 위한 대비책
우리나라처럼 익스플로러 사용율이 많은 나라는 없을 겁니다. 문제는 익스플로러만큼 버그도 많고, 웹표준을 많이 무시하는 브라우저때문에 골치가 많이 아픈 현실이죠. 그나마 익스9이후터는 어느정도 웹표준을 생각하고, html5를 지원하기 시작했습니다.
익스 8이전에서도 HTML5의 일부 태그를 인식할 수 있도록 하는 방법이 있습니다. 이는 HTML5의 일부 요소들로 모든 브라우저에서 사용할 수 있는 방법이 있어서 소개해드리겠습니다.
방법은 여러가지가 있긴하지만, 그중에서 가장 보편적인 방법으로 현재 유명한 UI개발자인 레미샤프 씨가 제작하여 구글코드를 통해서 배포하고 있는 자바스크립트가 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="style.css">
<script src="sample.js"></script>
<style></style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
이 코드는 <head>안에 위치하면 됩니다.
위의 URL 주소로 직접 다운로드해서 별도로 링크를 걸어주셔도 됩니다.
if lt IE 9은 조건 주석으로 IE9 이하 버전의 IE에 이 스크립트를 적용한다는 뜻입니다.
또 다른 조건주석으로 표현은 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="style.css">
<script src="sample.js"></script>
<style> </style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
if IE는 인터넷 익스폴로러에서만 이 스크립트를 적용한다는 뜻입니다.
이 스크립트에서 익스플로러를 위해 지원하는 HTML5 태그는 abbr, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, summary, time, video입니다.
마지막으로 익스6,7버전에서의 웹표준 향상을 위한 스크립트를 소개하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="style.css">
<script src="sample.js"></script>
<style> </style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--></code>
<!--[if lt IE 7]>
<http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
이 스크립트는 익스플로러 7이하의 브라우저를 위해서 사용하는 스크립트로, 안써도 크게 상관없지만 익스플로러6에서 투명처리가 되지 않는 문제 등 웹표준 향상을 위한 편리한 기능을 제공합니다.
4. HTML5 마크업 뼈대
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> </title>
<link rel="stylesheet" href="style.css">
<script src="sample.js"></script>
<style> </style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</code>
<!--[if lt IE 7]>
<http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
</head>
<body>
<header>…</header>
<nav>…</nav>
<article>
<section>…</section>
<section>…</section>
<section>…</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>
</html>
5. 결론
html5! 이제는 더이상 미지의 숲이 아닙니다. 일반 웹이든 모바일이든 상관없이 바로 사용할 수 있습니다.
제가 앞에서 설명한 것처럼 HTML5로 레이아웃을 잡고, 해당 컨텐츠는 article과 section 태그로 작업을 시작하면 됩니다.
의미 없는 영역에는 div와 span을 적절히 사용하시면 되구요.
앞으로 모든 웹이 html5로 전향을 해야하는 시점이기에 기존 문서에서 독타입부터 바꾸는 작업부터 시작해봅시다.
그러나, 단순히 독타입을 html5 로 변경한다고 해서 그 문서가 온전한 HTML 5 가 되지는 않습니다.
HTML4와 HTML5의 CSS의 표준 값 정의가 다르므로, 페이지의 레이아웃이 깨질수 있습니다.
'Web' 카테고리의 다른 글
| 일반 유니코드(Unicode)와 'UTF-8 유니코드'의 차이점 (0) | 2017.05.29 |
|---|---|
| 부트스트랩 – 폰트 아이콘을 모아놓은 폰트어썸(Font awesome) 사용하기 (0) | 2017.05.29 |
| [웹폰트] 구글 Noto 한국어 글꼴을 웹에서 마음껏 쓰자! (0) | 2017.05.28 |
| [CSS] 테두리 둥글게 만들기 Rounded Corners (0) | 2017.05.27 |
| [CSS] 배경 이미지 크기 조정하기 (0) | 2017.05.27 |