본문으로 바로가기

보일러 플레이트의 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> 를 이용해서 자바스크립트를 지원하지 않는 사용자들에게 이를 활성화하도록 권고하는 메세지를 띄우거나 다른파일들을 링크할 수 있다.
  • 휴먼랭귀지는 작성된 콘텐츠의 언어를 의미하며, 값이 비어있지만 이를 koen 처럼 추가하면 된다.
  • 더욱 자세한 내용은 아래 링크 참조 :

#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> 바로 앞에 코드가 위치하고 있다.
  • 가장 범용적으로 사용되는 도구라 포함되어 있지만 목적에 따라 대안책을 강구하여 다른 것을 사용해도 된다.
  • 더욱 자세한 내용은 아래 링크 참조 :


신고

댓글을 달아 주세요

  1. 나그네 2015.09.24 15:38 신고

    사이트 디자인도 간결하고 군더더기가 없는데, 글 또한 의미 있고 쉽게 설명되어 있어서 너무나 훌륭한 것 같습니다. 멋집니다!

    좋은 정보 감사합니다. 크게 공부가 되네요.

  2. 나그네2 2015.10.15 18:28 신고

    최고입니다.. 간결한 설명 정말 감사합니다.

  3. 하이 2016.11.01 09:45 신고

    정리를 너무 잘해주셨네요 공부 잘하고갑니다 ^^

티스토리 툴바