여러 브라우저들은 각자의 default css를 가지고 있습니다.
우리가 작성한 웹페이지가 모든 브라우저에서 같게 보이려면
각 브라우저의 default css를 reset 시켜주어야 합니다.
ex) 브라우저 별로 css가 다르게 적용되는 예시
reset을 하는 방법은 두가지 입니다.
1. reset.css를 작성하는 방법
2. styled-components, styled-reset 패키지를 이용하는 방법
1. reset.css를 작성하는 방법
reset을 적용하기 전입니다.
1-1 reset.css를 작성
1-2 head 태그내에서 해당 css를 import
// 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;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="./reset.css">
</head>
<body>
<div style="width: 100px; height: 100px; background-color: black; color: white;">test</div>
<h1>h1 tag test</h1>
<h2>h2 tag test</h2>
<h3>h3 tag test</h3>
<h4>h4 tag test</h4>
<a href="#">test</a>
<br>
<select>
<option>1</option>
<option>2</option>
</select>
<label><input type="checkbox" name="test" value="test">test</label>
<p>p tag test</p>
<span>span tag test</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
2. styled-components, styled-reset 패키지를 이용하는 방법
react에서 패키지를 이용하여 css reset을 하는법을 알아보겠습니다
yarn add styled-components styled-reset저는 초기화후 font만 추가하였습니다.
전체에 적용되길 원하는 css 항목들을 이곳에 작성해주면 됩니다.
import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
const GlobalStyle = createGlobalStyle`
${reset}
font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', Sans-serif;
`
export default GlobalStyle;import React from 'react';
import GlobalStyle from './styles/GlobalStyle';
function App() {
return (
<>
<GlobalStyle />
hihi
</>
);
}으로 실행하시면 css가 초기화된 것을 확인할 수 있습니다.
css reset을 하는 것은 모든 브라우저에서 의도한대로 웹 페이지를 보여줄수 있다는 장점이 있지만 단점도 있습니다.
1. css파일 사이즈의 증대를 가져옵니다 -> 모든 요소를 초기화 해버리므로 해당 요소들의 재정의를 해주어야 합니다.
2. 수많은 요소중 일부를 빼먹을 수도 있습니다.
제가 가져온 css reset코드는 styled-reset에서 참고하고 있는 사이트입니다.
구글링 하시다 보면 각자 선호하는 방식으로 reset.css 가 작성되어 있음을 확인할 수 있습니다.
이중 원하는 것을 개인의 프로젝트에 적용하시면 브라우저마다 달리 보이는 이슈를 해결할 수 있지 않을까 싶습니다.
css reset과 비슷한 맥락으로 css normalize라는 것이 있습니다.
css normalize는 일관성 없는 특정 요소들만 초기화 해주는 것입니다.
일관성 있는 친구들은 그대로 css를 가져가는 것입니다.
각자 기호에 맞게 선택을 하면 되지 않을까 싶습니다.
출처 : http://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
https://elijahmanor.com/blog/css-resets
Visualizing CSS Resets
elijahmanor.com
'markup > css' 카테고리의 다른 글
| css float (0) | 2022.03.02 |
|---|---|
| css display: flex, flex: 1 (0) | 2022.03.02 |
| display: block, inline, inline-block, none (0) | 2022.03.01 |
| box-sizing 속성 (0) | 2022.03.01 |
| css로 삼각형 만들기 (0) | 2022.02.07 |