Normalize.css - CSS 초기화

해당 글은 Normalize.css - CSS 초기화로 이동되어 새로 작성되었습니다. 이동 해주세요.

웹 브라우저의 기본 속성값들을 초기화 시키는 CSS 코드 모음중에 하나로 가장 유명한 노멀라이즈입니다. 버전에 따라 조금씩 상이하니 유념하세요.

홈페이지 : http://necolas.github.io/normalize.css/

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
* HTML5에 새로 추가된 요소들을 블럭으로 지정.
* IE 6/7/8/9, 파폭 3 적용
*/

article, aside, details, figcaption, figure, footer, 
header, hgroup, main, nav, section, summary {
    display: block;
}


/**
* audio와 canvas 그리고 video 요소를 inline-block값을 지정하고
* 지원하지 않는 브라우저는 핵을 이용함
* IE 6/7/8/9, 파폭 3 적용
*/

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}


/**
* audio요소에 contorls 속성이 정의 되지 않은 경우 이를 감춤 , 모든 웹브라우저 및 iOS 5 이상 기기 적용
*/

audio:not([controls]) {
    display: none;
    height: 0;
}


/**
* visibility 속성의 hidden값과 display 속성의 none 값을 통일함으로 레이아웃 구현에 차이를 줄임, IE 7/8/9. 파폭 3, 사파리 4, IE 6은 지원않함
*/

[hidden] {
    display: none;
}


/* ==========================================================================
   Base
   ========================================================================== */

/**
* 1. IE 6/7 에서 body에  em 단위의 정확한 글자크기를 구현하기 위한 설정으로 100%=16px, 75%=12px 
* 2. iOS에서 가로,세로 모드로 화면을 전환할때 사용자가 직접 줌하지 않는 한 글자크기를 조정하지 않음  
*/

html {
    font-size: 100%; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}


/**
* textarea 와 다른 폼요소들 사이의 폰트글꼴이 다른 것을 일치시킴
*/

html, button, input, select, textarea {
    font-family: sans-serif;
}


/**
 * IE 6/7에 기본적으로 적용되어 있는 body의 margin 속성값을 초기화
 */

body {
    margin: 0;
}


/* ==========================================================================
   Links
   ========================================================================== */

/**
 * 크롬과 다른 브라우저들 사이의 outline 속성값을 일치시킴
 */

a:focus {
    outline: thin dotted;
}


/**
 * 모든 브라우저에서 포커스되거나 마우스 오버되었을때 가독성 향상
 */

a:active,
a:hover {
    outline: 0;
}


/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * IE 6/7에서 폰트 크기와 마진값이 다른 것을 일치시킴
 * 파폭 4+, 사파리 5, 크롬에서 section 과 article 요소안에 폰트 크기가 다른 것을 일치시킴
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}


/**
 * abbr 요소의 title 속성 디자인 통일, IE 7/8/9,사파리 5, 크롬 적용
 */

abbr[title] {
    border-bottom: 1px dotted;
}


/**
 *강조를 위한 b와 strong 요소에 폰트굵기 굵게 적용하고 인용을 위한 blockquote 요소의 마진값 설정, 파폭 3+, 사파리 4/5, 크롬 적용
 */

b,
strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}


/**
 * dfn 요소의 기본 폰트 스타일을 이탤릭으로 설정, 사파리 5, 크롬 적용
 */

dfn {
    font-style: italic;
}


/**
 * 파폭과 다른 브라우저들의 차이점 통일
 * IE 6/7 적용되지 않음
 */

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}


/**
 * HTML5에 새로 추가된 mark 요소의 속성값 통일, IE 6/7/8/9 적용
 */

mark {
    background: #ff0;
    color: #000;
}


/**
 * IE 6/7과 다른 브라우저들 사이의 p, pre 요소의 마진값을 통일
 */

p, pre {
    margin: 1em 0;
}


/**
 * 폰트 글꼴을 통일, IE 6, 사파리 4/5, 크롬 적용
 */

code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}


/**
 * 모든 브라우저에서 pre 요소의 가독성을 향상
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}


/**
 * IE 6/7에서 따옴표를 표시하는 q 요소를 지원하지 않기에 이를 노출되지 않게함
 */

q {
    quotes: none;
}


/**
 * 사파리 4에서 q 요소의 :before와 :after가 지원되지 않으므로 노출되지 않게함
 */

q:before, q:after {
    content: '';
    content: none;
}


/**
 * 모든 브라우저에서 small 요소의 폰트크기 통일
 */

small {
    font-size: 80%;
}


/**
 * 모든 브라우저에서 sub 와 sup 요소에 영향을 미치는 line-height 를 초기화
 */

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * IE 6/7에서 마진 값이 다른 것을 통일
 */

dl, menu, ol, ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}


/**
 * IE 6/7에서 패딩 값이 다른 것을 통일
 */

menu, ol, ul {
    padding: 0 0 0 40px;
}


/**
 * IE 7에서 블릿에 이미지를 사용할 경우 다른 브라우저들과 위치가 다르기에 사용자가 직접 설정하게 도와줌
* 크로스 브라우징엔 background-image 속성을 이용하는 것이 좋음
 */

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}


/* ==========================================================================
   Embedded content
   ========================================================================== */

/**
 * 1. a 요소안에 이미지가 위치할 경우 생기는 테두리 값 제거, IE 6/7/8/9 , 파폭 3 적용
 * 2. IE 7에서 이미지를 축소/확대시 계단현상이 생기는 것을 방지
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}


/**
 * IE 9에서 svg 요소가 영역의 크기를 벗어나지 않도록 설정
 */

svg:not(:root) {
    overflow: hidden;
}


/* ==========================================================================
   Figures
   ========================================================================== */

/**
 * figure 요소의 마진 값 설정, IE 6/7/8/9, 사파리 5, 오페라 11.
 */

figure {
    margin: 0;
}


/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * IE 6/7에 설정되어 있는 마진 값을 초기화
 */

form {
    margin: 0;
}


/**
 * fieldset 요소의 보더, 마진, 패딩값 통일
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. IE 6/7/8/9에서 상속된 컬러가 정확하지 않는 것을 방지
 * 2. 파폭 3에서 캡션 내용의 공백 문자가 다르게 처리되는 현상 방지 
 * 3. IE 6/7의 정확한 정렬을 위해 핵사용
 */

legend {
    border: 0; /* 1 */
    padding: 0;
    white-space: normal; /* 2 */
    *margin-left: -7px; /* 3 */
}


/**
 * 1. 모든 브라우저에서 정확한 폰트 크기를 상속받게 함
 * 2. 마진값 재 설정, IE 6/7, 파폭 3+, 사파리 5, 크롬 적용
 * 3. 모든 브라우저에서 세로 정렬 위치가 동일하게 보이도록 함
 */

button, input, select, textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}


/**
 * 파폭 3+ 에서 button 과 input 요소의 기본 line-height 값이 달라 통일시킴
 */

button, input {
    line-height: normal;
}


/**
 * button과 select 요소의 value 값을 브라우저마다 대소문자를 표시를 다르게 하는 경우를 방지하기 위해 초기화
 * button 요소의 스타일은 크롬, 사파리 5+, IE 6+ 적용
 * select 요소의 스타일은 파폭 4+ 와 오페라 적용
 */

button, select {
    text-transform: none;
}


/**
 * 1. 안드로이드 4.0 이상의 웹킷 브라우저에서 audio와 video 요소에 발생하는 버그 방지
 * 2. iOS에서 input 요소의 type 속성값을 인식하지 못하는 버그 방지
 * 3. input 요소의 type 속성값에 적용될 마우스 커서의 스타일을 포인터로 설정
  * 4. IE 7에서 텍스트 입력에 영향을 주지 않고 내부 간격을 제거하는 핵
 *  IE 6에서는 내부 간격이 남아있음
 */

button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
    *overflow: visible;  /* 4 */
}


/**
 * disabled 된 button과 input 요소들의 마우스 커서모양을 기본값으로 설정
 */

button[disabled], html input[disabled] {
    cursor: default;
}


/**
 * 1. IE 8/9에서 box sizing 속성값을 content-box에서 border-box로 변경
 * 2. IE 8/9에서 패딩 제거
 * 3. IE 7에서 핵을 이용해 패딩 제거
 * IE 6에서는 패딩이 남아있음
 */

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}


/**
 * 1. 사파리 5와 크롬에서 텍스트 입력이 가능하게 설정
 * 2. 해당 영역의 크기를 지정하는데 콘텐츠 영역만큼의 크기만 설정하도록 content-box 설정
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}


/**
 * 맥의 OS X기반의 사파리 5와 크롬의 내부 패딩과 검색 취소 버튼을 제거
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


/**
 * 파폭 3+ 에서 button과 input에 지정되어 있는 패딩과 보더값을 0으로 설정
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


/**
 * 1. IE 6/7/8/9의 textarea 요소에 기본 지정된 세로 스크롤 제거
 * 2. 모든 브라우저에서 가독성 향상과 정렬을 위함
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * 테이블 요소 사이의 간격을 제거
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}