728x90
반응형
배경
별도 HTML 스타일을 적용하지 않아도 스타일이 적용된것을 본적이 있다.
이는 브라우저가 기본적으로 HTML태그에 대해 적용하는 margin, padding, font-size 등이 있기 때문이다.
하지만 여기서 각 브라우저마다 기본적으로 적용되는 스타일이 다르다는 문제가 발생한다.
동일한 코드여도 브라우저마자 스타일이 다르게 표출되어 사용자로 하여금 좋은 경험을 쌓기 어렵다.
이러한 점을 해결하기 위해 등장한 것이 Reset CSS 와 Normalize CSS 이다.
반응형
Reset CSS, Normalize CSS 사용하는 이유
스타일 일관성 유지라는 목표를 가진다.
Reset CSS
브라우저가 HTML 태그에 적용하는 모든 스타일을 '초기화'하는 역할
브라우저간에 스타일을 최소화하고, 개발자가 직접 세부적인 스타일을 지정할 수 있다는 것이 장점이다.
Normalize CSS
브라우저가 HTML 태그에 적용하는 모든 스타일을 '보정'하여 일관된 스타일을 유지하는 역할
브라우저간에 스타일을 최소화하고, Normalize CSS 적용 후에도 스타일 변화가 크지 않다.
어떤 상황에 사용하는 것이 좋은가?
Reset CSS
Reset CSS 는 원하지 않는 스타일을 제거할 수 있고, 개발자가 적용한 스타일이 입힌다.
하지만 모든 스타일을 제거하기 때문에 시간이 오래 소요되고, CSS 지식이 부족하다면 초기에 개발이 어려울 수 있다.
또한 디버깅 시 Reset CSS 내용이 표시되어 디버깅이 어려워질 수 있다.
Normalize CSS
기본적인 HTML 스타일을 가지고 있기에 초기 설정에 대한 부담감이 줄어든다.
또한 디버깅시 정확한 태그를 잡기 때문에 디버깅에 방해를 주지 않는다.
하지만 완전한 커스텀을 위해서는 보다 많은 스타일 오버라이드가 필요하다.
728x90
Reset CSS, Normalize CSS 설정하기
1. 파일로 지정
// index.html
...
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reset</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/normalize.css">
</head
...
Reset.css – https://meyerweb.com/eric/tools/css/reset/
Normalize.css – https://necolas.github.io/normalize.css/
// reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}// Normalize.css
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
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;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
2. CDN 설정하기
// index.html
...
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
https://cdnjs.com/libraries/meyer-reset
meyer-reset - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Eric Meyer CSS reset - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster and eas
cdnjs.com
https://cdnjs.com/libraries/normalize
normalize - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
Normalize.css as a node packaged module - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We mak
cdnjs.com
3. 라이브러리로 설정하기
1. styled-component , styled-reset
styled-component 이란 ES6와 CSS의 가장 좋은 부분을 사용하여 스트레스 없이 앱을 스타일링 하는 도구이다.
styled-reset 은 styled-components를 위한 CSS 재설정하는 역할을 한다.
import * as React from 'react'
import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'
const GlobalStyle = createGlobalStyle`
${reset}
/* other styles */
`
const App = () => (
<React.Fragment>
<GlobalStyle />
<div>Hi, I'm an app!</div>
</React.Fragment>
)
export default App
2. normalize.css
https://www.npmjs.com/package/normalize.css?activeTab=versions
npm install --save normalize.css
출처
728x90
반응형
'frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] px, em vs rem 이해하기 (0) | 2024.05.30 |
|---|---|
| [CSS] CSS, SCSS, SASS (0) | 2024.01.23 |
| [HTML] HTML5기반 동영상 플레이어 (0) | 2024.01.23 |
| [CSS] hover style 효과 삭제하기 (0) | 2024.01.02 |
| [CSS] 레이아웃을 배치 (lex, grid, gap) (1) | 2023.12.18 |
