`*` 선택자의 font 속성이 적용되지 않는다.

reset css사용시 주의해야할 점

1.문제점

💡

* 전역 선택자의 폰트속성이 적용되지 않음

현재 토이프로젝트(가제: 타임투밋) 작업에 있다.

전체 디자인이 Roboto로 되어있기에 전역 스타일에 Rotobo를 적용했다.

const global = css`
  @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
  * {
    box-sizing: border-box;
    color: black;
    font-family: "Roboto", sans-serif;
  }

그렇지만 적용되지 않았다.

무엇이 문제 였을까?

2.원인

💡

reset css의 font 속성 우선수위가 전역으로 지정한 스타일보다 우선순위가 높았다.

reset css의 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;
}

css 선택자 우선순위를 보면 다음과 같다.

Selector	Specificity Value	Calculation
html, body,,..tag	1	1
*	0	0

* (universal selector)로 준것보다 reset css에서준 type selector가 더 우선순위가 높기에

font-family: "Roboto", sans-serif; 가 무시된 것이다.

3.해결 방안

해결방안은 reset css부분에 1. font:inherit 대신 font를 직접 주입하는 방법

video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: "Roboto", sans-serif;
    vertical-align: baseline;
}

reset css밑에 html 태그에 폰트 지정

html {
    font-family: "Roboto", sans-serif;
}

해주는 방법이 있다.

잘 적용이 된 것을 확인할 수 있다.

4.이를 통해 배운점

CSS 우선순위 * universal selector 의 경우 0으로 제일 낮다.

CSS 우선순위를 수치적으로 계산할 수 있는 방법을 알았다.

reset css의 경우 type selector가 부여 되어 universal selector가 무시될 수 있음을 기억하자.

references

https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors

https://www.w3schools.com/css/css_specificity.asp

https://drafts.csswg.org/selectors/#specificity-rules

Uploaded by N2T