html5shiv.zip

 

HTML5 를 지원하지 않는 구 버전의 브라우저에서는 새로 추가 된 HTML5 Element 를 사용할 때 문제가 발생한다.

 

CSS 에서는 기본적으로 Element 의 display 속성 값을 block 이 아닌 inline 으로 인식을 하고,

IE 의 경우에는 document.createElement() 메소드 실행이 필요하기 때문이다.

 

이를 간단하게 해결 할 수 있는 방법이 레미가 만든 작은 크기의 HTML5Shiv Script 를 페이지에 추가하는 것이다.

 

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

 

이제, 위와 같이 Script 를 적용만 한다면 쉽게 HTML5 Elemets 를 사용 할 수 있다.

 

첨부 파일의 html5shiv-printshiv Script 는 IE 에서 프린터 출력 시 스타일이 제대로 적용되지 않는 문제도 해결 한 Script 이다.

 

저작자 표시 비영리 변경 금지
신고

'HTML5' 카테고리의 다른 글

HTML5 를 지원하는 브라우저로 만들어 주는 HTML5Shiv 스크립트  (0) 2013.02.21
HTML5 기본 구조  (0) 2013.02.20
HTML5 기본 구조 HTML5 2013.02.20 09:58

HTML5 페이지를 구성함에 있어, 옵션 이기는 하지만 추가하는 것이 좋은 최소한의 구조는 다음과 같다.

 

 

<!doctype html>                     -> 기존 URL형식이 아닌 가장 짧은 형식의 doctype 정의

<html lang=ko>                      -> 스크린 리더를 고려하여 언어 정의

<head>

<meta charset=utf-8>              -> 문서의 첫 512byte 안에 문자 인코딩을 정의

<title>Sean 86 블로그</title>

</head>

<body>

<p>티스토리 블로그 입니다.</p>

</body>

</html>

 

 

HTML5 는 다소 느슨한 문법 체계를 사용하기 때문에 선언 방식이 이전과 비해 짧아졌다.

또한 태그 속성 부분의 따옴표, 태그를 스스로 닫는 코드 형식도 사용하지 않았다.

 

이와 관련하여, 원한다면 다음에 나오는 형식 모두 사용 가능하다.

 

<MET CHARSET=UTF-8>

<MET CHARSET=UTF-8/>

<MET CHARSET="UTF-8">

<MET CHARSET="UTF-8"/>

<meta charset=utf-8>

<meta charset=utf-8/>

<meta charset="utf-8">

<meta charset="utf-8"/>

<MeTa ChArSeT=uTf-8>

 

앞에 나온 어떤 형식을 사용해도 되지만 여러가지 형식을 섞어서 사용할 경우 코드 분석 및 유지 보수가 어렵기 때문에 이 중 하나를 선택한 이후에는 계속 동일한 형식을 사용하는 것이 좋다.

 

저작자 표시 비영리 변경 금지
신고

'HTML5' 카테고리의 다른 글

HTML5 를 지원하는 브라우저로 만들어 주는 HTML5Shiv 스크립트  (0) 2013.02.21
HTML5 기본 구조  (0) 2013.02.20
font-size: 62.5% CSS 2013.02.18 17:39

 

body { font-size: 62.5%; } 는 글자 비례형 레이아웃을 만들 때 많이 사용된다.

 

대부분 웹 브라우저의 기본 글씨 크기인 16px 을 기준으로 10px 은 62.5% 에 해당 하므로 위와 같은 선언이 필요한 것이다. (10 / 16 * 100 = 62.5)

 

이와 같이 Style 을 선언하면 px, pt 단위를 쉽게 em 단위로 변환 할 수 있다.

 

720px 을 사용하고 싶다면 width: 72em;

16pt 를 사용하고 싶다면 font-size: 1.2em;

 

 

 

저작자 표시 비영리 변경 금지
신고

'CSS' 카테고리의 다른 글

font-size: 62.5%  (0) 2013.02.18
Footer(하단바) 영역 고정  (1) 2013.02.18
불필요한 마크업을 줄이자  (0) 2013.02.15
DOCTYPE 선언: Quirks Mode(관용 모드)  (0) 2013.02.15
Vendor Prefix : -webkit-, -moz-, -o-, -ms-  (0) 2013.02.13
CSS 를 이용한 가운데 정렬  (0) 2013.02.08


티스토리 툴바