CSS 초기화 가이드

CSS 초기화 가이드 타이틀

CSS 초기화는 브라우저의 사용자 에이전트 스타일 시트를 초기화해서 브라우저의 종류에 상관없이 일관된 기준으로 스타일을 재설정한다. 모든 브라우저는 스타일이 지정되지 않은 웹페이지를 쉽게 읽을 수 있도록 웹페이지를 로드할 때 브라우저에 내장된 기본 스타일 시트를 적용하는데, 브라우저마다 스타일 기본 값이 다르기 때문에 웹페이지가 조금씩 다르게 보일 수 있다. 주요 브라우저에서 스타일 차이를 없애고 일관된 디자인을 보여주기 위한 방법을 기록하고자 CSS Reset과 CSS Normalize를 기반으로 한 CSS 초기화 가이드를 작성했다.

주의사항
1. Reset과 Normalize 문서 중 가장 유명한 문서들만 정리했다.
2. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

  1. CSS 초기화 방법
  2. Reset 초기화 가이드
  3. Normalize 초기화 가이드
  4. Reset과 Normalize를 혼합한 초기화 가이드
  5. 토미집이 사용하는 CSS 초기화 가이드
  6. 전체 선택자(*)와 사이트 성능
Quick Menu
CSS 초기화 가이드 Reset 가이드 Normalize 가이드 혼합 가이드
토미집 초기화 전체 선택자

CSS3 초기화 방법

브라우저는 <a>, <em>, <font>, <h1> – <h6>, <ul>, <ol>, <li>, <input>, <blockquote>, <cite> 등에 대한 스타일을 제공하는데, 이 중 어느 요소를 초기화할지 정해야 하고, 요소를 정했다면 어느 속성을 초기화할지 정해야 하고, 속성을 정했다면 어느 정도 수준으로 초기화를 할지 정해야 한다. 예를 들어 <h1>의 font-size, line-height, font-weight, margin 속성 중 font-weight:blod;를 font-weight:inherit;로 변경할 것인지 정해야 하고, font-size의 경우 사이즈를 지정할지 inherit로 설정할지 정해야 한다. 하지만 CSS 비전문가가 각 브라우저 및 각 브라우저 버전에 내장된 스타일 값을 알 수 없고, 현재 트랜드를 반영할 수 없기 때문에 전문가들이 제작한 CSS 초기화 문서를 참고해야 한다. 전문가들이 제작한 CSS 초기화 문서는 각 문서가 지향하는 목적에 따라 내용이 천차만별인데, 브라우저가 관여하는 모든 스타일을 default 값으로 변경하는 문서도 있고, 자주 사용하는 요소들에 대한 스타일만 default 값으로 변경하는 문서도 있고, default 값이 아닌 정규화된 수치들을 적용하는 문서도 있고, 특정 브라우저에서 발생하는 버그를 해결하는 등 기능을 추가한 문서도 있다. 사용자는 이 문서들을 기반으로 자신만의 CSS 초기화 문서를 만들고 프로젝트마다 수정을 하면서 사용해야 한다.

Reset 초기화 가이드

○ Eric Meyer Reset.css v2.0

1. 소개

– 다운로드: https://meyerweb.com/eric/tools/css/reset/
– 마지막 업데이트: 2011년 1월
– 기본 줄 높이, 여백과 글꼴 크기 등에 대한 브라우저 불일치를 줄인다.
– <body>와 <a>의 색상을 지정하지 않는다.

2. 용량

파일명용량
reset-EricMeyer-Reset-v2.0.css1.20KB
reset-EricMeyer-Reset-v2.0.min.css773B

3. 압축

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

○ html5 Doctor Reset.css v1.6.1

1. 소개

– 다운로드: http://html5doctor.com/html-5-reset-stylesheet/
– 마지막 업데이트: 2010년 9월
– Eric Meyer Reset.css를 수정했다.

2. 용량

파일명용량
reset-html5-Doctor-Reset-v1.6.1.css1.86KB
reset-html5-Doctor-Reset-v1.6.1.min.css1.13KB

3. 압축

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

○ minireset.css v0.0.7

1. 소개

– 다운로드: https://github.com/jgthms/minireset.css
– 마지막 업데이트: 2021년 1월
– <h1> – <h6>의 글꼴 크기를 초기화한다.
– 블록 태그의 마진을 초기화한다.
– 인라인 태그의 패딩을 유지한다.
– ul, table 등 일부 요소들의 스타일을 초기화한다.
– box-sizing: border-box;를 적용한다.
– 이미지와 비디오가 브라우저 너비에 맞춰 확장한다.

2. 용량

파일명용량
reset-minireset-v0.0.7.css622B
reset-minireset-v0.0.7.min.css484B

3. 압축

html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

Normalize 초기화 가이드

○ necolas Normalize.css v8.0.1

1. 소개

– 다운로드: https://necolas.github.io/normalize.css/
– 지원: Chrome, Edge, Firefox ESR+, Internet Explorer 10+, Safari 8+, Opera
– 마지막 업데이트: 2018년 11월
– @necolas와 @jon_neal가 Reset.css를 대체하기 위해 100시간 동안 연구해서 개발했다.
– HTML5 요소, typography, lists, embedded content, forms, tables에 대한 스타일을 정규화 한다.
– 일부 브라우저에서 발생하는 버그를 수정한다.
– 유용한 브라우저 스타일 값을 보존한다.
– CSS 기본 사양을 준수한다.
– 모든 항목이 주석으로 설명되어 있다.

2. 용량

파일명용량
normalize-necolas-Normalize-v8.0.1.css6.34KB
normalize-necolas-Normalize-v8.0.1.min.css1.73KB

3. 압축

html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

Reset과 Normalize를 혼합한 초기화 가이드

○ Sanitize.css v13.0.0

1. 소개

– 다운로드: https://github.com/csstools/sanitize.css/
– 지원: Chrome, Edge, Firefox , Firefox ESR, Internet Explorer 9+, Safari, iOS Safari, Opera
– 마지막 업데이트: 2021년 9월
– Normalize.css 공동 개발자인 jonathantneal이 개발했다.
– 다양한 요소에 대한 스타일을 정규화 한다.
– 일부 브라우저에서 발생하는 버그를 수정한다.
– 유용한 브라우저 스타일 값을 보존한다.
– 일반적인 개발자의 선호 사항을 준수한다.
– 모든 항목이 주석으로 설명되어 있다.

2. 용량

파일명용량
normalize-jonathantneal-Sanitize-v13.0.0.css7.10KB
normalize-jonathantneal-Sanitize-v13.0.0.min.css2.14KB

3. 압축

*,::before,::after{box-sizing:border-box;background-repeat:no-repeat}::before,::after{text-decoration:inherit;vertical-align:inherit}:where(:root){cursor:default;line-height:1.5;overflow-wrap:break-word;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}:where(body){margin:0}:where(h1){font-size:2em;margin:.67em 0}:where(dl,ol,ul) :where(dl,ol,ul){margin:0}:where(hr){color:inherit;height:0}:where(nav) :where(ol,ul){list-style-type:none;padding:0}:where(nav li)::before{content:"\200B";float:left}:where(pre){font-family:monospace,monospace;font-size:1em;overflow:auto}:where(abbr[title]){text-decoration:underline;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(audio,canvas,iframe,img,svg,video){vertical-align:middle}:where(iframe){border-style:none}:where(svg:not([fill])){fill:currentColor}:where(table){border-collapse:collapse;border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button,[type="button" i],[type="reset" i],[type="submit" i]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){margin:0;resize:vertical}:where([type="search" i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(details>summary:first-of-type){display:list-item}:where([aria-busy="true" i]){cursor:progress}:where([aria-disabled="true" i],[disabled]){cursor:not-allowed}:where([aria-hidden="false" i][hidden]){display:initial}:where([aria-hidden="false" i][hidden]:not(:focus)){clip:rect(0,0,0,0);position:absolute}

○ Destyle.css v3.0.2

1. 소개

– 다운로드: https://github.com/nicolas-cusan/destyle.css/
– 지원: Chrome, Edge, Firefox ESR+, Internet Explorer 10+, Safari 8+, Opera
– 마지막 업데이트: 2021년 12월
– Eric Meyer Reset.css v2.0는 업데이트가 중단되었고 더 이상 사용하지 않는 요소들을 초기화하기 때문에 비효율적이다. necolas Normalize.css v8.0.1는 다양한 브라우저에서 일관된 디자인을 보여주지만 일부 요소를 초기화하지 않는다. destyle.css는 두 가지 CSS 초기화 문서의 장점만을 모아서 재구성했다.
– 브라우저의 스타일을 정규화한다.
– 글꼴 크기, 줄 높이, 패딩, 마진을 초기화한다.

2. 용량

파일명용량
normalize-reset-Destyle-3.0.2.css6.11KB
normalize-reset-Destyle-3.0.2.min.css2.25KB

3. 압축

/*! destyle.css v3.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
 *,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox}[type="radio"]{-webkit-appearance:radio;appearance:radio}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}

토미집이 사용하는 CSS 초기화 가이드

CSS 초기화 가이드는 정답이 없다. 개발자마다 선호하는 문법이 있고, 프로젝트마다 사용하는 문법이 달라질 수 있고, 브라우저가 업데이트 되거나 아예 새로 출시하거나 서비스가 종료될 수 있기 때문에 사용할 때마다 코드를 수정해야 한다. 2020년 6월 14일 기준 사용자들에게 인기가 많은 CSS 초기화 문서는 Sanitize.css이다. 지난 수 년간 Normalize.css의 인기가 압도적으로 많았지만, 2019년 11월부터 Sanitize.css의 인기가 높아지더니 12월부터 접전을 벌였고, 2020년 5월에 들어서는 Normalize.css의 인기를 추월했다. 아무래도 Normalize.css는 2018년 이후 업데이트가 없는데, Sanitize.css는 Normalize.css의 공동 개발자가 제작했고 최근까지 업데이트를 지원해서 인기가 높아진 것으로 추정된다. 토미집은 Sanitize.css를 기반으로 다른 CSS 초기화 문서를 참고하면서 평소 자주 사용하는 코드를 추가했고, 실제 사용할 때는 제작환경에 맞춰 수정해서 사용한다.

○ 토미집 CSS 초기화 문서

1. 용량

파일명용량
t-normalize.css5.21KB
t-normalize-min.css4.02KB

2. 압축 안 함

@charset "utf-8";
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  src: url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-400.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-400.woff")
      format("woff");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  src: url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-700.woff2")
      format("woff2"),
    url("https://cdn.jsdelivr.net/npm/@openfonts/noto-sans-kr_korean@1.44.1/files/noto-sans-kr-korean-700.woff")
      format("woff");
}
*,
::before,
::after {
  box-sizing: border-box;
}
::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}
.cf:after {
  display: block;
  content: "";
  clear: both;
}
html {
  width: 100%;
  height: 100%;
  cursor: default;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break: break-word;
}
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
legend,
li,
ol,
p,
select,
table,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}
body,
button,
input,
select,
table,
textarea {
  font-size: 13px;
  line-height: 1.5;
  color: #101010;
  font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Malgun Gothic", "맑은 고딕", helvetica, "Apple SD Gothic Neo", arial, dotum,
    돋움, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
}
hr {
  height: 0;
  overflow: visible;
}
main,
details {
  display: block;
}
dl,
ol,
ul,
menu {
  list-style: none;
}
pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
address,
em,
i {
  font-style: normal;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: none;
}
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
audio,
video {
  display: inline-block;
}
img {
  vertical-align: top;
}
iframe,
img,
fieldset {
  border-style: none;
}
img,
video {
  max-width: 100%;
}
svg:not([fill]) {
  fill: currentColor;
}
svg:not(:root) {
  overflow: hidden;
}
img[src$=".gif"],
img[src$=".png"] {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button {
  background-color: transparent;
}
button,
select {
  text-transform: none;
}
button,
input {
  border: 0;
  border-radius: 0;
  overflow: visible;
}
input:focus {
  outline: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #a0a0a0;
  padding: 0.35em 0.75em 0.625em;
}
input {
  overflow: visible;
}
legend {
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal;
}
progress {
  display: inline-block;
  vertical-align: baseline;
}
select {
  text-transform: none;
}
textarea {
  overflow: auto;
  resize: vertical;
}
[type="checkbox"],
[type="radio"] {
  padding: 0;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
  box-shadow: none;
}
dialog {
  background-color: #fff;
  border: solid;
  color: #000;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}
dialog:not([open]) {
  display: none;
}
summary {
  display: list-item;
}
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}
[hidden] {
  display: none;
}
[aria-busy="true"] {
  cursor: progress;
}
[aria-controls] {
  cursor: pointer;
}
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}
[aria-hidden="false"][hidden] {
  display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

3. 다운로드

전체 선택자(*)와 사이트 성능

일부 CSS 초기화 가이드에는 전체 선택자(유니버셜 셀렉터, Universal Selector)라고 불리는 *가 포함되어 있다. 전체 선택자를 사용하면 HTML 문서에 작성된 모든 태그에 전체 선택자의 속성이 적용되기 때문에 이론적으로 브라우저의 로딩 속도가 느려진다. 하지만 *{box-sizing: border-box;}처럼 간단한 속성을 적용하는 경우 실제 브라우저 로딩 속도에 아무런 영향을 미치지 않는다. 물론 서버와 사이트 접속자의 물리적 거리가 수천에서 수만 킬로미터 이상 떨어져 있고 전체 선택자에 과도한 속성을 적용할 경우 로딩 속도에 영향을 미칠 수도 있지만 일반적인 경우 속도의 변화를 느낄 수 없다.

출처

관련 글

최종 업데이트:

댓글쓰기