HTML, CSS 2개의 파일로 구성되는 HTML5 기본 페이지를 만들어 보겠다.
(Index.html, css/Nagarry.css)
Index.html
Nagarry.css
Index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Nagarry's HTML5</title>
<link type="text/css" rel="stylesheet" href="./css/Nagarry.css">
<script src="./script/Nagarry.js"></script>
</head>
<body>
<canvas id="CANVAS_1" width="800" height="480">
Sorry, Your browser doesn't support HTML5 Canvas.
</canvas>
</body>
</html>
HTML5는 이전 HTML과 차이가 있는데, 윗부분에 파랗게 마크한 부분이다.
첫째. <!DOCTYPE html>
HTML5 표준을 따르는 문서라는 뜻이다. HTML5문서를 작성할때 항상 첫줄에 두어야한다.
둘째. <html lang="ko">
<html>해더에 사용언어 명시
셋째. <meta charset="UTF-8">
문자가 깨지는 것을 방지하기 위해 "euc-kr", "utf-8"등 캐릭터셋을 명시해야한다.
넷째. <script src="./script/Nagarry.js"></script>
더이상 <script> 태그내에 type="text/javascript"라는 구문은 필요없다.
Javascript가 표준이기 때문에 생략이 되었다.
다섯째. <canvas id="CANVAS_1" width="800" height="480"></canvas>
HTML5에는 새로운 태그들이 추가되었고, 그 중 대표적인 태그인 <Canvas>이다.
<canvas ...> </canvas> 사이에 "Sorry, ..."라는 부분이 있는데, 이것은 <canvas>태그를 표현하지 못하는 브라우저를 위한것이다.
구형 브라우저는 <canvas ...>태그를 인식하지 못하므로 <canvas ...></canvas>사이에 있는 문장을 브라우저에 그대로 노출시킨다.
하지만, <canvas>를 인식하는 브라우저는 <canvas>만을 표현하고, <canvas ...>와 </canvas>사이의 문장은 그냥 무시하게 된다.
Nagarry.css는 아래와 같고...
Nagarry.css
@CHARSET "UTF-8";
body
{
background:#555555;
margin:20px;
}
#CANVAS_1
{
background:#ffffff;
border:1px solid #000000;
}
지금까지의 결과를 브라우저에서 보면 이렇게 보일꺼다.
만약 Canvas영역(흰색 사각영역)이 나타나지 않고,
"Sorry, Your browser doesn't support HTML5 Canvas."라는 구문만 보인다면, 브라우저를 바꾸어야 한다.
크롬, 사파리, 파이어폭스, 오페라 브라우저를 사용한다면 별 탈없이 잘 보이지만,
(꽤 오래된 버젼이 아니라면 말이다)
인터넷익스플로어는 최소 9버젼 이상을 사용해야한다.
참고로, 브라우저의 HTML5지원 정도를 알아보고 싶으면
http://html5test.com/ 를 방문하면 된다. 보편적으로 어느 OS에서나 크롬이 젤 괜찮은 지원을 보여준다.
<550점이 만점의 html5 지원정도 -출처 : html5test.com)
다음포스팅에서는 Canvas를 javascript로 기초적으로 제어하는 포스팅을 할 예정이다.
'끄적끄적 > HTML5' 카테고리의 다른 글
| Event 처리를 통한 Canvas 캡슐화 (0) | 2014.03.04 |
|---|---|
| HTML5 개발툴 끝판왕(?) - Liveweave (2) | 2014.03.02 |
| [HTML5] Javascript로 canvas제어하기 (0) | 2014.03.01 |
| HTML5 코딩을 위한 준비 (윈도/맥 공통) (0) | 2014.02.27 |
| HTML5 지원 브라우저 현황 (0) | 2013.05.02 |