본문으로 바로가기

Normalize.css - CSS 초기화

category 웹코딩/CSS 2015. 8. 24. 11:00

브라우저마다 다르게 보이는 스타일들을 하나로 통일시키기 위해 자주 사용되는 것 중에 하나입니다. 계속적으로 보완되고 있는 프로젝트라 기준으로 잡고 스타일링을 하는데 도움이 될 것입니다.

Normalize.css 소개

Normalize.css는 HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS 파일이다. 이것은 Boilerplate(보일러플레이트) 및 Bootstrap(부트스트랩) 등과 같은 크고 작은 프로젝트에서도 두루두루 사용되고 있다.

HOME
Normalize.css Project Site
REPO
Normalize.css source on GitHub

Normalize.css 특징

브라우저(모바일 브라우저를 포함하여)를 광범위하게 지원하며, HTML5 요소, 타이포그래피, 목록(lists), embeded 콘텐츠, 폼과 테이블을 일관성있게 통일시키는 CSS를 포함한다.

  • 다른 CSS reset 과는 달리 사용하기 좋은 기본값들은 유지한다.
  • HTML 요소의 다양한 스타일을 정규화한다.
  • 버그 및 브라우저 간 차이점을 수정한다.
  • 부분적인 개선과 가용성을 향상시킨다.
  • 코드에 대한 자세한 주석이 달려 이해를 돕는다.
  • normalize는 버전 1은 구형 IE(IE6)를 지원하지만 더이상 개발이나 수정이 이루어지지 않는다. 버전 3대가 현재 개발되고 애용되는 버전이다.

Normalize.css v3.0.3

버전별로 내용이 상이할 수 있으니 유념하도록 하자.

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. 기본 글꼴을 sans-serif로 설정.
 * 2. iOS와 IE에서 기기 회전시에 사용자가 확대하지 않아도 글씨 크기가 재조정되는 것을 예방.
 */

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

/**
 * 기본 마진값을 제거.
 */

body {
  margin: 0;
}

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

/**
 * IE8/9에서 정의되지 않은 HTML5 요소를 'block'으로 지정.
 * IE10/11, Firefox에서 정의되지 않은 `detail` 혹은 `summary` 를 `block`으로 지정.
 * IE11에서 정의되지 않은 `main`을 `block`으로 지정
 */

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

/**
 * 1. IE8/9에서 `inline-block`으로 정의되지 않은 것을 올바르게 지정.
 * 2. Chrome, Firefox, Opera에서 `progress`의 세로 정렬을 표준화.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * 모던 브라우저들에서 controls 속성없이 audio 요소가 렌더링 되는 것을 예방
 * iOS 5 기기에서 높이를 초과하는 것을 제거
 */

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

/**
 * `[hidden]` 속성의 스타일이 IE 8/9/10에서 존재하지 않는 것을 해결. 
 * IE 8/9/10/11, Safari, Firefox < 22 에서 `template` 요소를 숨김.
 */

[hidden],
template {
  display: none;
}

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

/**
 * IE10에서 활성화(active)된 링크의 회색 배경을 제거.
 */

a {
  background-color: transparent;
}

/**
 * active/hover 상태일때에도 포커스된 요소의 가독성을 향상.
 */

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

/* Text-level semantics
   ========================================================================== */

/**
 * IE 8/9/10/11, Safari, Chrome에서 존재하지 않는 스타일을 부여.
 */

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

/**
 * Firefox 4+, Safari, Chrome에서 `bolder`로 설정되어 있는 것을 `bold`로 수정.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Safari,Chrome에서 존재하지 않는 스타일을 부여.
 */

dfn {
  font-style: italic;
}

/**
 * Firefox 4+, Safari, Chrome에서 `section`과 `article` 내부의 `h1` 요소의 글꼴 크기와 마진값이 서로 다른 것을 통일시킴.
 */

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

/**
 * IE 8/9에서 존재하지 않는 스타일을 부여.
 */

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

/**
 * 브라우저마다 다른 글꼴 크기를 통일시킴.
 */

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;
}

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

/**
 * IE 8/9/10에서 `a` 요소안에 이미지가 위치할 경우 생기는 테두리 제거.
 */

img {
  border: 0;
}

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

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

/* Grouping content
   ========================================================================== */

/**
 * IE 8/9, Safari에서 존재하지 않는 `margin` 값을 부여.
 */

figure {
  margin: 1em 40px;
}

/**
 * Firefox와 다른 브라우저들 사이의 차이점 해결.
 */

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

/**
 * 모든 브라우저에서 `pre` 요소의 `overfolow` 값을 통일.
 */

pre {
  overflow: auto;
}

/**
 * 모든 브라우저에서 글꼴과 글꼴 크기가 다른 것을 해결. 
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

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

/**
 * 알려진 한계: 기본적으로 OS X의  Chrome과 Safari는 `border` 속성을 지정하지 않는 한 
 * `select` 요소의 스타일링에 매우 제한적이다.
 */

/**
 * 1. color 속성이 상속되지 않는 것을 수정.
 *    알려진 문제: disabled 된 요소의 color 속성에도 영향을 미친다.
 * 2. font 속성이 상속되지 않는 것을 수정.
 * 3. Firefox 4+, Safari, Chrome에서 마진이 서로 다른 것을 해결.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * IE 8/9/10/11에서 `overflow` 속성값이 `hidden`으로 설정되어 있는 것을 수정
 */

button {
  overflow: visible;
}

/**
 * `button`과 `select` 요소에 `text-transform` 상속이 일치하지 않는 것을 해결
 * 모든 다른 폼 컨트롤 요소는 `text-transform` 값을 상속하지 않는다.
 * IE 8/9/10/11, Firefox, Opera에서 `button` 요소의 스타일 상속 수정.
 * Firefox에서 `select` 요소의 스타일 상속 수정.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Android 4.0.*에서 `audio`와 `video` 컨트롤을 파괴하는 웹킷 버그를 방지.
 * 2. iOS에서 클릭가능한 `input` 유형에 스타일링을 할 수 없는 것을 수정.
 * 3. `input` 요소와 다른 요소들의 image-type의 커서 모양을 일치시켜 가용성을 향상.  
 *    `input` and others.
 */

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

/**
 * disabled된 요소의 기본 커서를 재설정
 */

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

/**
 * Firefox 4+에서 내부 `padding`과 `border`를 제거 
 */

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

/**
 * Firefox 4+에서 UA(User Agent) 스타일시트에 `!important`를 사용한 `input` 요소의
 * `line-height` 설정값을 해결.
 */

input {
  line-height: normal;
}

/**
 * 이러한 요소의 스타일을 설정하려고하지 않는 것이 좋다.
 * Firefox에서 아래의 요소에서 box-sizing, padding, width가 구현될꺼라 기대하지 말자.
 * 
 * 1. IE 8/9/10에서 box sizing 속성값을 `content-box`에서 `border-box`로 변경
 * 2. IE 8/9/10에서 영역을 벗어나지 않도록 `padding`을 제거 
 */

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

/**
 * Chrome의 증가/감소 버튼의 커서 모양을 수정.
 * `input` 요소의 특정 `font-size` 값에 대해 감소 버튼의 커서 모양이 `default`에서 `text`로 변한다.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * OS X의 Safari, Chrome에서 내부(inner) `padding`과 검색 취소 버튼을 제거. 
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

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

/**
 * `border`, `margin`, `padding`을 일치.
 */

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

/**
 * 1. IE 8/9/10/11에서 `color`는 상속되지 않는다.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * IE 8/9/10/11에서 기본 세로 스크롤바를 제거
 */

textarea {
  overflow: auto;
}

/**
 * `font-weight`는 상속되지 않는다.(applied by a rule above).
 * 주의: OS X의 Chrome과 Safari에서 기본값을 변경하는 것은 안전하지 않다.
 */

optgroup {
  font-weight: bold;
}

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

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

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

td,
th {
  padding: 0;
}

'웹코딩 > CSS' 카테고리의 다른 글

아이콘 폰트(IconFont)의 모든 것  (8) 2015.10.05
트위터의 fave 애니메이션 - 즐겨찾기 버튼  (3) 2015.09.03
Noto Sans(본고딕) 웹폰트  (10) 2015.08.14
CSS3 이면가시성(backface-visibility) 속성  (2) 2015.07.29
CSS3 외형(Appearance) 속성  (0) 2015.07.28
댓글 , 엮인글
WEBDIR
블로그 이미지 흉내쟁이 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바