01.CSS 기초 - Reset CSS

ID짱재·2021년 3월 15일

CSS

목록 보기

2/15

🌈 Reset CSS

🔥 Reset CSS 란?

🔥 Normalize 방법

🔥 RESET CSS 파일

1. Reset CSS 란?

웹 브라우저마다 각기 다른 default 스타일이 지정되어 있어, 이를 초기화함으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정
W3C에서 공식적으로 권장하는 기법이라기 보다는 실무에서 편의에 의해 임의로 지정하는 설정임

2. Normalize 방법

Reset CSS은 여러 방법이 있으나, 최근에는 normalize.css를 주로 사용함
CDN 기법을 통해 링크로 적용시킬 수 있음 : https://cdnjs.com/libraries/normalize
적용 방법 : <head></head> 안에 아래 스크립트 추가하여 적용
RESET CSS에 추가할 CSS효과가 있다면 normalize.css를 다운 받아 추가로 작성해도 되고, 압축된 RESET CSS가 필요하면 min.css를 CDN 또는 다운 받아 사용
Normalize RESET CSS의 특징은 기본 스타일은 남겨두고, 브라우저별로 다른 스타일만 초기화하는 방식으로 적용(즉, 모든 효과를 RESET시키는 것이 아님)

✍🏻 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
  </head>
  <body></body>
</html>

3. RESET CSS 파일

RESET css파일을 import 시키는 방법으로도 사용할 수 있음
파일로 된 RESET css를 이용하는 방법은 main인 css파일에 import시켜 적용
import 방법 : @import "reset.css";

✍🏻 RESET 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;
}
/* 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;
}
input:focus {
  outline: none;
}
a {
  color: inherit;
  text-decoration: none;
}

ID짱재

Keep Going, Keep Coding!

이전 포스트

01.CSS 기초 - CSS Selector

다음 포스트

01.CSS 기초 - 박스 모델 이해

1개의 댓글

송형선

2021년 8월 5일

좋은 글 감사합니다.

답글 달기