🧀👩🏻‍💻 01. Reset CSS

최다인·2022년 4월 15일

체다의 웹공부

목록 보기

1/2

Reset CSS란❓

웹 브라우저마다 각기 다른 default 스타일이 지정되어 있기 때문에 이를 초기화함으로써 다양한 웹 브라우저 환경에서 동일한 스타일이 적용되도록 하는 설정!

W3C에서 공식적으로 권장하는 기법이기 보단 실무에서 편의에 의해 임의로 지정하는 설정!

Normalize (정규화) 방법

Reset CSS은 여러 방법이 있으나, 최근에는 normalize.css를 주로 사용함
CDN 기법을 통해 링크로 적용시킬 수 있음 : https://cdnjs.com/libraries/normalize

CDN 기법❓ CDN은 원본 콘텐츠가 저장된 서버 대신 사용자와 물리적으로 가까운 네트워크 위치에서 캐싱된 버전으로 웹 콘텐츠 요청에 응답함으로써 콘텐츠 서버의 트래픽을 분산하고 웹 경험을 향상함!

적용 방법 : <head></head> 안에 아래 스크립트 추가하여 적용!

RESET CSS에 추가할 CSS효과가 있다면 normalize.css를 다운받아 추가로 작성해도 되고, 압축된 RESET CSS가 필요하면 min.css를 CDN 또는 다운받아 사용
Normalize RESET CSS의 특징은 기본 스타일은 남겨두고, 브라우저 별로 다른 스타일만 초기화하는 방식으로 적용됨 (즉, 모든 효과를 RESET 시키는 것이 아님)

💻 html code

<!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>

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

최다인

단단은 단단

다음 포스트

🧀👩🏻‍💻 01. Reset CSS

체다의 웹공부

Reset CSS란❓

Normalize (정규화) 방법

RESET CSS 파일

픽셀 값을 변환하자!

0개의 댓글