보일러 플레이트의 index.html의 구조를 살펴보고 이에 대한 해설을 덧붙였습니다. 이미 전에 거론했었던 부분들은 링크로 대체했습니다.
아래에서 설명되는 내용은 Download v5.2.0을 기준으로 설명되어 있습니다. 버전별로 내용이 다를 수 있으니 유념합시다.
<!doctype html> // #1
<html class="no-js" lang=""> // #2
<head>
<meta charset="utf-8"> // #3
<meta http-equiv="x-ua-compatible" content="ie=edge"> // #4
<title></title> // #5
<meta name="description" content=""> // #5
<meta name="viewport" content="width=device-width, initial-scale=1"> // #6
<link rel="apple-touch-icon" href="apple-touch-icon.png"> // #7
<!-- Place favicon.ico in the root directory --> // #7
<link rel="stylesheet" href="css/normalize.css"> // #8
<link rel="stylesheet" href="css/main.css"> // #8
<script src="js/vendor/modernizr-2.8.3.min.js"></script> // #9
</head>
<body>
<!--[if lt IE 8]> // #10
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> // #11
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script> // #11
<script src="js/plugins.js"></script> // #12
<script src="js/main.js"></script> // #12
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> // #13
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>
#1 문서형식 선언
<!doctype html>
브라우저에 의해 처리될 문서가 어떤 버전의 마크업 언어로 작성되었는지 알려준다. 문서형식은 HTML 문서가 표준모드(Standard mode)로 렌더링될지 비표준모드(Quirks mode)로 렌더링 될지를 결정하게 된다.
- DOCTYPE이 선언되지 않았다면 비표준모드로 렌더링된다.
- DOCTYPE은 HTML문서의 최상위에 위치해야 한다.
- DOCTYPE은 브라우저가 아니라 유효성 검증을 위해 고안된 것이다.
- 브라우저는 문서형식을 지원하는 것이 아니라 기능을 지원하는 것이기 때문에 구형브라우저에서도 최신의 문서형식이 허용된다. 이 DOCTYPE을 읽어들이면 HTML5가 제대로 구현돼 있지 않은 브라우저에서도 내용을 표준 모드로 전환한다. 따라서 아직 완성되지 않았지만 지금 당장 HTML5로 웹페이지를 작성하더라도 미래의 호환성 문제를 염려할 필요가 없다.
- 과거에 이 구문은 대문자로 작성되었는데 최근에는 소문자로 작성되고 있다. 그것이 어떤 것에 영향을 미치거나 하진 않지만 대소문자를 구별하지 않는 환경으로 통일하려는 움직임 같다.
더욱 자세한 내용은 아래 링크 참조 :
#2 휴먼랭귀지와 모더나이저
<html class="no-js" lang="">
HTML 문서의 시작을 알림과 동시에 휴먼랭귀지와 모더나이저 클래스인 no-js 를 추가하고 있다.
- 브라우저에서 자바스크립트의 사용이 허용되어 있다면 클래스값이
js로 변경된다. 이는 모더나이저(Modernizr)의 기능이다. Modernizr를 사용하지 않는다면<noscript>를 이용해서 자바스크립트를 지원하지 않는 사용자들에게 이를 활성화하도록 권고하는 메세지를 띄우거나 다른파일들을 링크할 수 있다. - 휴먼랭귀지는 작성된 콘텐츠의 언어를 의미하며, 값이 비어있지만 이를
ko나en처럼 추가하면 된다. 더욱 자세한 내용은 아래 링크 참조 :
#3 문자 세트 지정
<meta charset="utf-8">
문서에 사용한 문자 인코딩이 무엇인지 선언한다.
- 웹문서의 추천 인코딩은 utf-8이다.
- 문자세트는 해당 페이지의 최초 1024 바이트 이내에 위치해야 한다. 왜냐하면 몇몇 브라우저는 웹페이지의 문자 세트를 찾을 때에 최초 1024바이트 내에서 탐색하기 때문이다.
- 문자세트는
<title>요소 이전에 선언되야 한다. - 문자세트를 지정하지 않았을 경우, IE의 경우 잘못된 인코딩 UTF-7을 사용하게 되는 경우가 있어 문제를 일으키게 된다.
더욱 자세한 내용은 아래 링크 참조 :
#4 IE 렌더링 모드 지정
<meta http-equiv="x-ua-compatible" content="ie=edge">
IE 브라우저로 문서에 접근했을때 IE가 작동해야될 렌더링엔진을 선택한다.
ie=edge는 항상 최신의 표준엔진을 사용해 렌더링하게 한다.- 과거에는
content="ie=edge,chrome=1"처럼 대체 방법으로 크롬 프레임이라는 ActiveX를 설치하라는 것을 추천했는데 크롬 프레임의 개발종료로 이제 더이상 추천하지 않는다. 더욱 자세한 내용은 아래 링크 참조 :
#5 문서의 제목과 콘텐츠 소개
<title></title>
<meta name="description" content="">
문서의 제목은 검색엔진최적화(SEO)와 밀접한 연관이 있다.
- title은 IE 브라우저의 인코딩과 연관된 보안 문제를 예방하기 위해 가능한한 빨리 선언되어야 한다.
- title 태그안에 알맞은 문서의 제목을 작성한다.
- description 메타 태그는 문서가 포함하는 콘텐츠의 내용을 간략하게 작성한다.
- 검색엔진은 문서의 제목(title)과 Meta 태그의 내용, 본문의 첫 100~150자등을 토대로 검색어와 비교하여 검색결과를 출력한다.
더욱 자세한 내용은 아래 링크 참조 :
#6 모바일 뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1">
모바일, 탭과 같은 다양한 기기들의 화면의 크기를 제어한다.
width=device-width는 화면사이즈가 기기의 너비에 맞춰진다. 웹 문서가 유동적인 데스크탑 디자인이라면 모바일기기에서 이 속성과 속성값을 사용하는 것이 더 보기 좋다. 또한 고정된 데스크탑 디자인이라도 문제될 것이 없으며, 모바일용 디자인이라면 더할 것이 없다.intial-scale=1는 기본 크기 배율을 설정한다. 모바일 브라우저에서는 zoom을 많이 사용하게 되는데, 최적의 사용환경을 위해 이를 방지해야 할 경우 속성 값을 1로 고정한다.- content의 속성 값으로 사용할 수 있는 것은 아래와 같다.
user-scalable=no: 사용자의 확대보기 허용 여부(yes/no)intial-scale=1.0: 페이지 로딩시 확대비율maximum-scale=1.0: 최대확대비율minimum-scale=1.0: 최소축소비율width=device-width: 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그수치에 맞게 맞춰짐.target-densitydpi=medium-dpi: dpi([dots per inch])
#7 애플 터치 아이콘과 파비콘 등록
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
iOS 2.0 이상과 Android 2.1 이상에서는 터치(Touch) 아이콘 지정이 가능하다.
- 터치 아이콘은 고해상도 아이콘(152x152) 하나만 준비하면 저해상도에서는 알아서 아이콘의 크기가 변경된다. 다만, 기기의 홈스크린에 아이콘이 추가되면 성능에 부정적일 수는 있다.
- 파비콘은 루트 디렉토리에 넣어두면 된다.
더욱 자세한 내용은 아래 링크 참조 :
#8 스타일시트 삽입
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
CSS 초기화를 위한 Normalize.css와 페이지의 스타일을 담당하는 main.css 파일을 삽입한다.
- Normalize.css는 브라우저마다 다른 스타일을 가진 요소들을 하나로 통일하도록 도와주는 CSS 초기화 파일이다.
- main.css는 보일러 플레이트가 제공하는 헬퍼 클래스들과 함께 문서의 스타일을 작성하는 파일이다.
더욱 자세한 내용은 아래 링크 참조 :
#9 모더나이저 스크립트 삽입
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
모더나이저는 HTML5와 CSS3 기능확인을 위한 자바스크립트 라이브러리이다.
- 보일러 플레이트에서 제공하는 모더나이저에는
html5shiv가 포함되어 있다. html5shiv는 스타일시트 이후에 삽입되어야 하기에 다른 자바스크립트와는 다르게<head>에 위치하게 된다. 더욱 자세한 내용은 아래 링크 참조 :
#10 브라우저 업그레이드 알림
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
IE8 미만의 구형 IE 브라우저에 브라우저를 업그레이드하라는 알림창을 띄운다.
- 조건부 주석은 IE9까지만 작동한다.
- 적당한 한국어로 수정하여 사용하면 되고 링크로 접속해보면 다양한 브라우저를 선택할 수 있다.
더욱 자세한 내용은 아래 링크 참조 :
#11 구글 CDN과 jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script>
jQuery 사용자를 위해 구글 CDN을 이용해 이를 추가하고 CDN 사용이 불가능할 때를 대비해 로컬파일을 준비한다.
- jQuery같은 공통 자바스크립트 라이브러리를 CDN을 사용해야 하는 이유:
- 지연 감소 - CDN은 정적파일을 여러 물리적 서버로 분산하여 요청이 들어왔을때 가장 가까운 네트워크에서 다운로드 할 수 있도록 해준다.
- 병렬 증가 - 쓸데없는 서버부하를 피하려고 웹브라우져들은 동시에 연결할 수 있는 커넥션의 수를 제한하고 있다. 브라우저에 따라 다르지만 호스트명당 2개정도 이다. CDN을 사용하면 사이트에 대한 요청이 하나 줄어 병렬로 다운로드 받을 수 있게 된다.
- 향상된 캐싱 - 잠재적으로 가장 좋은 이익은 사용자가 다운로드를 받지 않을 수도 있다는 것이다. 다른 사이트에서 받아왔으면 받지 않아도 된다.
- 구글 CDN을 불러오지 못할 경우 로컬파일을 불러온다. 귀찮은 부분은 로컬에서 테스트 할때(로컬 서버가 아닌 그냥 HTML 파일) 브라우저에서 로컬의 HTML 파일을 열면 file:///C:/Users/lainfox/... 처럼 URL의 프로토콜이 파일이 되기 때문에 file://ajax.googleapis.com/... 형태로 불러오려고 하기 때문에 jQuery를 로드하지 못한다.
#12 추가 스크립트 삽입
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
plugins.js에는 jQuery 플러그인들과 다른 3rd party 스크립트를 포함시킨다.
- plugins.js는 사이트의 플러그인 코드의 유지보수를 위한 것이다. 여러개의 파일 링크를 사용하는 것보다 이 파일 하나에 포함하는 것이 성능향상에 도움이 된다. 예외적으로 지주 방문되지 않는 매우 큰 플러그인 파일을 포함해야 하는 문서의 경우라면 플러그인을 분리하여 대상페이지에 접속했을때만 사용하도록 하는 것을 추천한다. 그러나 대부분의 경우, 단지 플러그인의 압축된(minified) 버전을 붙여넣는 것으로 쉽게 사용가능하다.
- plugins.js에는 콘솔 출력 기능이 없는 웹브라우저(IE6/7)에서 콘솔 로그를 피하는 방법이 최상단에 포함되어 있다.
- main.js에 메인 자바스크립트를 작성한다.
#13 구글 애널리틱스 트래킹 코드
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
구글 유니버셜 애널리틱스 트래킹 도구의 최적화된 버전을사용한다.
- UA-XXXXX-X 부분에 자신의 Google Analytics에서 발급받은 ID를 입력한다.
- 구글측에선 정확한 집계를 위해 이 코드를 <head>와 </head> 사이에 위치시킬 것을 권장한다. 그것은 접속자의 정확한 집계를 위해 필요하지만 콘텐츠의 로딩보다 앞서있기에 접속자들이 체감하게 되는 로딩시간이 늘어난다. 그런연유로 </body> 바로 앞에 코드가 위치하고 있다.
- 가장 범용적으로 사용되는 도구라 포함되어 있지만 목적에 따라 대안책을 강구하여 다른 것을 사용해도 된다.
더욱 자세한 내용은 아래 링크 참조 :
'프레임워크 > 보일러플레이트' 카테고리의 다른 글
| HTML5 Boilerplate(보일러 플레이트) - 변경이력 #6 (0) | 2015.09.01 |
|---|---|
| HTML5 Boilerplate(보일러 플레이트) - 자주묻는질문 #5 (1) | 2015.08.31 |
| HTML5 Boilerplate(보일러 플레이트) -그 밖의 파일 설명 #4 (0) | 2015.08.28 |
| HTML5 Boilerplate(보일러 플레이트) - main.css 파일 분석 #3 (2) | 2015.08.27 |
| HTML5 Boilerplate(보일러 플레이트) 소개 (6) | 2015.08.25 |
