HTML5 Boilerplate(보일러 플레이트) - main.css 파일 분석 #3

보일러 플레이트의 main.css의 구성을 살펴보고 이에 대한 해설을 덧붙였습니다.

보일러 플레이트 main.css

버전에 따라 아래의 내용은 상이할 수 있음에 유의하자.

/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * 가독성을 위해 선택 영역(마우스 드래그등)의 하이라이트 부분에서 `text-shadow` 효과를 제거:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * 선택 영역에 대한 규칙은 분리되어 있다.
 * 본인의 디자인에 맞는 배경 색상을 설정하자.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * 좀 더 세련된 수평선을 위해
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * audio, canvas, iframe, image와 video의 컨테이너 하단의 간격을 제거.  
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * fieldset 요소의 여백과 테두리 제거
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * `textarea`의 세로 방향으로만 크기조정 가능
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* 사용자 스타일을 이 곳에 기입 */ 







/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * 시각적으로 숨기고 스크린리더에서도 감춤.
 */

.hidden {
    display: none !important;
}

/*
 * 시각적으로 숨기고, 스크린리더에서는 이용가능:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * .visuallyhidden 클래스가 지정된 요소에 키보드로 포커스시 화면에 표시:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * 시각적으로 숨기고, 스크린리더에서 숨기지만 레이아웃은 유지(너비,높이등을 유지).
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. `content` 속성값으로 간격을 벌린 값이 들어갔는데 
 *     이는 `contenteditable` 속성이 문서 어딘가에 포함되면 발생하는 오페라 버그를 회피하는 방법중에 하나이다.
 *     그렇지않으면, `clearfix` 클래스를 받을 요소의 상단과 하단에 표시할 공간이 발생한다.
 * 2. `block` 보다 `table`을 사용하는 것이 자식 요소의 `top-margin` 을 포함하는 `:before`를 사용할때 유용하다.
 *      (The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.)
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* 조건을 만족하는 뷰포트에 대한 스타일을 조정 */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* 고해상도 기기를 위한 스타일 조정 */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* 검정색의 글씨가 더 빠른 프린트가 가능:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

Helper Classes 자세히

기본 스타일과 함께 자주 사용되는 도움이 될 만한 클래스를 제공한다.

.hidden

hidden 클래스는 시각적으로 숨겨지길 원하고, 스크린리더 기기에서도 숨겨지길 원하는 모든 요소에 추가할 수 있다. 자바스크립트로 숨기는 기능을 제공할때 이용하거나 추후에 표시되길 원하는 것에 이용된다.

.visuallyhidden

visuallyhidden 클래스는 스크린리더에서는 접근 가능하고 시각적으로만 숨기길 원하는 요소에 추가할 수 있다.

아래를 참조하자

• CSS in Action: Invisible Content Just for Screen Reader Users
• Hiding content for accessibility
• HTML5 Boilerplate - Issue #194.

.invisible

invisible 클래스는 시각적으로 숨겨지길 원하고, 스크린리더에서도 숨겨지지만 레이아웃에는 영향을 미치지 않고 싶은 모든 요소에 추가할 수 있다.

hidden 클래스는 레이아웃에서 제거하기에 알맞지만 invisible 클래스는 주변 콘텐츠의 위치 결정에 영향을 주지 않으면서 단순히 요소가 보이지 않길 원할때 알맞다.

.clearfix

clearfix 클래스는 플로트된 자식을 포함하도록 클래스를 지정해야 한다.

<div class="clearfix">
  <div style="float: left">
</div>

수 년에 걸쳐 clearfix의 많은 변종이 있었지만 현재는 micro clearfix.가 애용되고 있다.

Print Styles

인쇄 처리를 최적화하고 읽기 쉽게 된 페이지를 구성하기에 유용한 스타일을 제공한다.

• 모든 배경 색상을 제거하고 검은 색상의 글꼴로 변경하고 텍스트 그림자를 제거 - 프린터, 잉크를 절약하고 인쇄 처리를 가속화하기 위해 수행
• 밑줄 및 URL을 포함하는 링크를 확장 - 사용자가 어디를 참조하는지 알 수 있도록하기 위해서 수행(제외되는 것 : 링크들이 fragment identifiers이거나 javascript: pseudo protocol 사용하는 것)
• 자세한 설명을 포함하는 약어를 확장 - 사용자가 약어가 무엇의 약자인지 알 수 있도록 하기 위해 수행
• 브라우저가 페이지에 콘텐츠를 중단하는 방법에 대한 orphans/widows 지침을 제공한다. 즉, <지원되는 브라우저들이 해야할 것을 지시한다.
• 테이블 헤더(<thead>)를 테이블의 각 페이지에 프린트한다.
• 두개의 서로 다른 페이지로 분할되는 block quotations, preformatted text, 이미지들과 테이블의 행을 분리되지 않도록 방지한다.
• 제목들(headings)이 관련된 텍스트가 아닌 다른 페이지에 표시되지 않도록 한다.
• orphans와 widows가 인쇄된 페이지들에 보이지 않도록 한다.

프린트 스타일은 추가적인 HTTP 요청을 피하기 위해 main.css에 함께 포함되어 있다. 또한, 다른 스타일을 덮어 쓸 수 있도록(overwrite) 항상 마지막에 포함되어야 한다.

보일러 플레이트의 Normailze.css 파일에 대한 설명은 Normalize.css - CSS 초기화로 대체한다.