🧀👩🏻‍💻 01. Reset CSS

4111 단어 CSS CSS

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

Author And Source

이 문제에 관하여(🧀👩🏻‍💻 01. Reset CSS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chedda/체다의-웹공부-01.-Reset-CSS

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다