티스토리 뷰

DTD 선언

웹 페이지를 제작하기 위해서는 문서 형식 유형(Document Type Declaration)을 설정하여야 합니다.


//HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

//HTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

//HTML 5
<!DOCTYPE html>

웹 문서 구조

웹 페이지htmlheadbody로 나누어집니다.


<html>
    <head>
        //헤드 영역
    </head>
    <body>
        //바디 영역
    </body>
</html> 

언어 속성 설정

컨텐츠의 언어를 식별은 프로그램이 컨텐츠 언어를 인식하고 언어 정보를 추출하는데, 미리 언어를 설정하면 효율성이 더 좋아집니다.


	//xml이 설정된 html 1.0
	<html lang="ko" xml:lang="ko" xmlns= "http://www.w3.org/1999/xhtml">
	
	//html5
	<html lang="ko">
	
	//meta에 설정하는 경우
	<meta http-equiv="Content-Language" content="ko" >
	

문서 정보 설정

웹 문서의 정보를 표시해줍니다.


	//html4 언어설정
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	//html5 언어설정
	<meta charset="UTF-8">
	
	//모바일 웹을 위한 설정
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	//웹 문서에 대한 제작자 설정
	<meta name="author" content="webstoryboy">
	
	//웹 문서에 대한 설명 설정
	<meta name="description" content="웹 퍼블리셔를 위한 정보 공유 사이트입니다.">
	
	//웹 문서에 대한 키워드 설정
	<meta name="keywords" content="웹스토리보이,웹퍼블리셔,웹표준,웹접근성">  
	
	//웹 문서 재로딩 설정
	<meta http-equiv="refresh" content="10 ,url=http://www.naver.com">  
	
	//검색엔진 허가 설정
	<meta name="robots" content="all" >  
	

뷰 포트 설정

웹 페이지의 초기 비율과 최대/최소 비율을 설정하여 모바일에 표현할 수 있습니다.


	//모바일 웹을 위한 설정
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	

브라우저 호환성 설정

IE와 Chrome에서 제공하는 호환성 보기는 CSS의 마진 태그에 대한 겹침현상 기본 규칙을 무너뜨려 크로스 브라우징 처리에 방해요소가 되기 때문에 호환성 보기 모드를 사용하지 못하도록 설정하고, 해당 브라우저에서 지원하는 가장 최신 버전의 방식으로 웹 페이지를 보여줍니다.


	//호환성 설정
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> 
	

타이틀 설정

웹 페이지의 제목을 설정합니다.


	<title>타이틀 설정</title>

HTML5 Shiv

html5 태그는 구 익스버젼(IE6, IE7, IE8)에서는 인식하지 못하기 때문에 자바스크립트 사용하여 HTML5 태그를 인식할 수 있도록 HTML5Shiv를 설정합니다.


	//다운 받은 경우
	<!--[if lt IE 9]>
	    <script src="assets/js/html5shiv.js"></script>
	<![endif]-->
	
	//CND 이용하는 경우
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<![endif]-->

파비콘 등록하기

파비콘(favicon)이란 인터넷 웹 브라우저의 주소창에 표시되는 웹사이트나 웹페이지를 대표하는 아이콘이며, 'favorites + icon'의 줄임말입니다.


	<link rel="shortcut icon" href="assets/ico/favicon.ico">
	

파비콘의 크기는 16x16, 32x32, 48x48, 64x64픽셀이 될 수 있고, 8비트, 24비트, 32비트 색상이 가능합니다.


	<link rel="shortcut icon" href="assets/ico/favicon.ico" sizes="32x32">
	

파비콘은 ico 파일로 제작되어야 하며, PNG, GIF, JPEG 사용은 가능하지만, 익스플로러에서는 지원되지 않습니다.


	<link rel="shortcut icon" href="assets/ico/favicon.png">
	

아이콘 등록하기

모바일에서 아이콘을 표현하기 위한 방법입니다. iOS 개발 가이드에 의하면 size가 지정되지 않은 아이콘은 자동으로 구형기기에만 인식되고, 사이즈는 60x60입니다. 아이패드는 76x76, 아이폰 레티나는 120x120, 아이패드 레티나는 152x152를 설정합니다.


	// ios 아이콘 등록
	<link rel="apple-touch-icon" href="assets/ico/icon_60.png">
	<link rel="apple-touch-icon" sizes="76x76" href="assets/ico/icon_76.png"> //ipad
	<link rel="apple-touch-icon" sizes="120x120" href="assets/ico/icon_120.png"> //iphone retina
	<link rel="apple-touch-icon" sizes="152x152" href="assets/ico/icon_152.png"> //ipad retina
	

rel속성 중에 -precomposed가 붙어있으며, iOS7 이전 버젼에는 아이콘에 광택이 추가되었습니다. 광택을 방지하기 위해서 쓰였던 속성입니다.


	// 구형 iOS 및 안드로이드
	<link rel="apple-touch-icon-precomposed.png" href="../assets/ico/icon_60.png">
	

웹 폰트 설정하기

웹 폰트는 사용자의 컴퓨터에 폰트가 없어도, 폰트를 사용할 수 있거나 볼 수 있게 설정해줍니다.


	//나눔 고딕 Nanum Gothic
	<link href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css' rel='stylesheet' type='text/css'>
	
	//나눔브러쉬 Nanum Brush Script
	<link href='http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css' rel='stylesheet' type='text/css'>
	
	//나눔고딕코딩 Nanum Gothic Coding
	<link href='http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css' rel='stylesheet' type='text/css'>
	
	//나눔명조 Nanum Myeongjo
	<link href='http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css' rel='stylesheet' type='text/css'>
	
	//나눔펜브러쉬 Nanum Pen Script
	<link href='http://fonts.googleapis.com/earlyaccess/nanumpenscript.css' rel='stylesheet' type='text/css'>
	

IE 조건부 주석처리

인터넷 익스플로러 버젼(ie6,ie7,ie8,ie9)의 종류를 확인하고, 종류별로 조건을 설정 할 수 있는 조건문입니다. 단 익스플로러 10버젼부터는 지원하지 않습니다.

인터넷 익스플로러 버젼별로 CSS를 외부파일로 설정을 할 수 있습니다.


	<!-- [if IE 6] ><link rel="stylesheet" type="text/css" href="ie6.css"><![endif]-->
	<!-- [if IE 7] ><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
	<!-- [if IE 8] ><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
	<!-- [if IE 9] ><link rel="stylesheet" type="text/css" href="ie9.css"><![endif]-->	

해당 클래스를 버젼별로 사용 할 수 있습니다.


	<!-- [if IE 6] ><html lang="ko" class="no-js old ie6><![endif]-->
	<!-- [if IE 7] ><html lang="ko" class="no-js old ie7><![endif]-->
	<!-- [if IE 8] ><html lang="ko" class="no-js old ie8><![endif]-->
	<!-- [if IE 9] ><html lang="ko" class="no-js old ie9><![endif]-->

조건부 주석 사용 예


	<!--[If IE 6]>
	    <script type="text/javascript">
	        alert("Please Upgrade Your BROWSER !");
	    </script>
	<![endif]-->

조건부 속성

Name Item Name Item Price
! [if !IE] 인터넷 익스플로러 버젼이 아닐 경우
lt [if lt IE 8] 인터넷 익스플로러 8미만 버젼 해당
lte [if lte IE 8] 인터넷 익스플로러 8이하 버젼 해당(IE8 포함)
gt [if gt IE 8] 인터넷 익스플로러 8초과 버젼 해당
gte [if gte IE 8] 인터넷 익스플로러 8이상 버젼 해당(IE8 포함)

js 조건부 주석처리

IE 조건부 주석처리는 IE10버전 이상부터 지원하지 않기 때문에 js 조건부를 사용할 수 있습니다. IE11 사용자가 구지 IE7로 확인하지 않기 때문에 상관은 없지만, js를 사용하여도 조건부를 설정 할 수 있습니다.


	var ua = navigator.userAgent.toLowerCase();
	if( ua.indexOf( 'msie' ) != -1 || ua.indexOf( 'trident' ) != -1 ) {
		var version = 11;
		ua = /msie ([0-9]{1,}[\.0-9]{0,})/.exec( ua );
		if( ua )
		{
			version = parseInt( ua[ 1 ] );
		}
		var classNames = '';
		classNames += ' is-ie';
		classNames += ' ie' + version;
		for( var i = version + 1; i <= 11; i++ ) {
			classNames +=  ' lt-ie' + i;
		}
		document.getElementsByTagName( 'html' )[ 0 ].className += classNames;
	}
	
댓글
댓글쓰기 폼