CSS
브라우저 스타일 표준화

소개

비고

normalize.css

브라우저에는 요소 렌더링에 사용되는 기본 CSS 스타일 세트가 있습니다. 이러한 스타일 중 일부는 예를 들어 브라우저의 설정을 사용하여 기본 글꼴 및 크기 정의를 변경하여 사용자 정의 할 수도 있습니다. 스타일에는 어떤 요소가 블록 레벨 또는 인라인인지 등의 정의가 포함됩니다.

이러한 기본 스타일은 언어 사양에 따라 다소 여유가 있기 때문에 브라우저가 사양을 제대로 따르지 않을 수 있으므로 브라우저마다 다를 수 있습니다.

이것은 normalize.css 가 작동하는 곳입니다. 가장 일반적인 불일치를 무시하고 알려진 버그를 수정합니다.

그것은 무엇을 하는가?

• 많은 CSS 재설정과 달리 유용한 기본값을 보존합니다.
• 다양한 요소의 스타일을 표준화합니다.
• 버그 및 일반적인 브라우저 불일치를 수정합니다.
• 미묘한 수정으로 사용성을 향상시킵니다.
• 자세한 설명을 사용하여 코드가 수행하는 작업을 설명합니다.

따라서 프로젝트에 normalize.css를 포함 시키면 다양한 브라우저에서 디자인이 비슷하게 일관성있게 보입니다.

reset.css와 다른 점

reset.css 대해 들어 보셨을 것입니다. 둘의 차이점은 무엇입니까?

normalize.css는 다른 속성을 통합 된 기본값으로 설정하여 일관성을 제공하지만 reset.css는 브라우저에서 적용 할 수있는 모든 기본 스타일을 제거하여 일관성을 유지합니다. 이것이 처음에는 좋은 생각 인 것처럼 들릴 수도 있지만, 실제로 이것은 모든 규칙을 직접 작성해야한다는 것을 의미합니다. 이는 견고한 표준에 위배됩니다.

접근법과 예제

CSS 재설정은 브라우저 기본값에 대한 별도의 접근 방식을 취합니다. Eric Meyer의 Reset CSS는 한동안 사용되었습니다. 그의 접근 방식은 바로 뒤에서 문제를 일으키는 것으로 알려진 브라우저 요소를 무효화합니다. 다음은 그의 버전 (v2.0 | 20110126) CSS 재설정에서 가져온 것입니다.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Eric Meyer의 재설정 CSS

CSS를 다른 CSS에서 표준화하고 이들 중 많은 것을 개별적으로 처리합니다. 다음은 코드의 버전 (v4.2.0) 샘플입니다.

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */

/* Document
   ========================================================================== */

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

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

CSS 표준화