고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
1. 브라우저에 로드되는 페이지의 랜더링 시에, 해당 브라우저의 최신 엔진을 이용하여 랜더링 하라는 코드이다.
지정된 doctype에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링
최신의 브라우저에서 웹표준을 지키지 않던 브라우저(IE5,6,7 등)를 기준으로 제작된 웹페이지를 방문하게 되면 레이아웃이 깨지거나 작동하지 않을 때가 있습니다. 그래서 meta태그를 사용해서 렌더링 엔진을 선택하게 하거나, 최신 렌더링 모드로 강제로 작동하게 만들어야 합니다. 그 때 사용하는 태그가 <meta http-equiv="X-UA-Compatible" content=" ~~ "> 태그 입니다.
[출처] X-UA-Compatible, IE=edge|작성자 하얀향기
[출처] X-UA-Compatible, IE=edge|작성자 하얀향기
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
* content 값에 지정할 수 있는 값
IE=5 | 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용 |
IE=7 | IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용 |
IE=EmulateIE7 | IE7 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링 |
IE=8 | IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링 |
IE=EmulateIE8 | IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링 |
IE=edge | 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링 |
(출처 : http://blog.naver.com/jenycrous/220068246840 )
2. 구글에 의해 자동번역되는 것을 방지하라는 코드
<meta name="google" value="notranslate" />
3. 구형 브라우저를 사용하는 경우라도, HTML5 로 코딩된 컨텐츠를 다룰 수 있도록 하는 코드.
Windows XP 2001 의 IE6 까지도, 아래 코드를 사용하면 HTML5 를 사용할 수 있다.
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
4. 아래코드는, 딘 에드워드의 자바스크립트 라이브러리로서, 구 버전의 IE에서 HTML5 태그는 물론 일부 CSS3 선택자까지도
인식하게 해주는 라이브러리다. 또한 IE6 이하에서 PNG의 투명효과를 지원하지 않는 문제를 해결한다.
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=1010, user-scalable=yes" />
<meta name="google" value="notranslate" />
<title>제목</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style type="text/css">
@font-face {
font-family: 'Nanum Barun Gothic';
font-style: normal;
font-weight: 400;
src: local(‘Nanum Barun Gothic Regular’), local(‘Nanum Barun Gothic-Regular’), local(‘NanumBarunGothic Regular’);
src: url(font/NanumBarunGothic.eot);
src: url(font/NanumBarunGothic.eot?#iefix) format('embedded-opentype'),
url(font/NanumBarunGothic.woff) format('woff'),
url(font/NanumBarunGothic.ttf) format('truetype');
}
body
{
font-family: 'NanumBarunGothic', 'Nanum Barun Gothic', sans-serif; !important ;
}
</style>
</head>
<body>
<font size = 4>나눔고딕 ... 가나다라마바사아자차카타파하</font><br><br>
<font size = 5>나눔고딕 ... 가나다라마바사아자차카타파하</font><br><br>
<font size = 6>나눔고딕 ... 가나다라마바사아자차카타파하</font><br><br>
</body>
</html>
반응형
'IT공부방 > HTML5, CSS' 카테고리의 다른 글
| position , z-index 사용법 정리 (0) | 2016.07.21 |
|---|---|
| CSS 의 overflow 속성 비교 (0) | 2016.07.20 |
| CSS Selector (선택자) 작성규칙 정리 (0) | 2016.07.20 |
| w3schools.com 에서 코드테스트 및 브라우저 객체/함수/속성등 표준확인 (0) | 2016.07.19 |
| 웹에서 나눔고딕 폰트 사용하기.... 나눔고딕 웹폰트 (0) | 2016.07.13 |
댓글 영역