이전 글에서 이론을 끝냈고 이제 본론?? 인 css관련 이론을 서술하겠다. 이론의 주제는 초기화이다.
시작하기 앞서 기본 지식이 필요한데 CSS spec과 User Agent Stylesheet(UA)를 구분해야 한다. CSS spec은 말 그대로 CSS 사양이고 User Agent Stylesheet는 여러 종류 브라우저에서 CSS spec에 위배되지 않는 선에서 기본적으로 지원해주는 css이다. 밑에 더보기는 브라우저별 UA spec 문서다.
UA를 확인하는 방법은 문서를 직접 확인하거나 개발자 도구(chrome 기준 f12 버튼)에서 확인하는 방법이 있다.
UA가 있기 때문에 브라우저마다 css가 조금씩 다른 것이다. 개인적으로 충격적인 사실을 알게 됐는데 흔히 Block Element와 Inline Element는 UA가 결정한 것이다. 사실 이걸 증명하기 위한 공식 문언은 못 찾았지만 공식 문서의 HTML 의미론을 보면 "HTML 은 표현이 아닌 의미를 전달"이라 하는 걸 봐선 UA가 display property을 어떻게 주냐에 따라 Block이나 Inline으로 결정하는 것인가 싶기도 하고... 공식 문서의 콘텐츠 모델에 의해 UA가 결정하는 건진 아직 잘 모르겠다.
다시 주제로 돌아와 강의에서 css properties의 초기값(initial value)은 CSS spec기준인지? UA 기준인지?라는 질문으로 시작한다. 정답은 그럴 수도 있고 아닐 수도 있는데 쉽게 생각하면 언어별 문자 시작 기준은 국가마다 다른데 이건 UA가 판단해서 설정해야 하지 않을까? 생각이 든다. 그렇기 때문에 강사님께선 MDN에서 사용하려는 css property을 검색 후 initial value와 inherited을 확인하는 습관이 필요하다고 강조하셨다. (뒷 통수를 안 맞기 위해.. ㅎ) 예시는 font-size property로 확인해볼 수 있다.
<!doctype html>
<html>
<head>
<title>
initial or inherit or unset
</title>
<style>
body {
font-size: 100px;
}
h1 {
font-size: initial;
}
</style>
</head>
<body>
<h1>
Hello
</h1>
<p>
World
</p>
</body>
</html>이러한 markup이 있을 때 h1 element에게 font-size property의 값을 initial로 할당하고 body element의 font-size를 100px로 변경해보면 h1 element의 font-size는 어떻게 될까?
위 이미지와 같이 h1 element는 body element의 font-size property의 값을 상속받지 못했다. 반면 p element는 body의 font-size property의 값을 상속받았는데 h1 element는 font-size: initial;이라 명시했기 때문에 font-size의 initail value는 medium이고 브라우저 설정에 따라 다르지만 보통 16px을 지원한다. 그럼 h1 element의 font-size의 값을 없애면 어떻게 될까?
이미지처럼 body element의 font-size property의 값도 상속받고 UA도 적용돼 font-size property는 200px라는 값으로 계산된다. 여기서 알 수 있는 것은 h1 element를 대상으로 font-size propery의 값을 명시하지 않으면 상속과 UA가 같이 적용된다는 것과 상속이 가능한 property라 하더라도 selector에 따라 우선순위가 밀린다는 것을 알 수 있다.
그렇다면 개발자는 UA Stylesheet css property를 초기화할 때 항상 css property의 initial value와 inherited를 알아야 할까? 답은 아니다 만능 unset이 존재하기 때문에 UA Stylesheet를 초기화하기 위해 수많은 css property의 정보를 외울 필요는 없다. 예를 들어 h1 element에 font-size: unset;을 명시하면 어떻게 될까?
이미지처럼 UA의 font-size property는 무시하고 unset을 적용한다. unset의 적용 우선순위는 다음과 같다.
별도(본인은 font-size property로 설명했지만 all: unset;도 가능하다.)의 property를 명시하지 않은 경우 해당 property가 상속이 가능한 property면 값을 inherit으로 하고 상속이 허용되지 않은 property면 inital로 한다.
반면 font-size property를 UA로 되돌리고 싶을 땐 font-size: revert; 이렇게 revert를 이용하면 된다.
다음 글에선 containing block에 대해 알아보겠다.
혹시 글을 읽는 사람들 중 잘 못된 정보나 피드백을 주고 싶으면 댓글로 남겨줬으면 좋겠다. (의미 있는 내용이라면 커피 정돈...? ㅋㅋ)
'web publishing > CSS-veamcamp' 카테고리의 다른 글
| CSS 첫걸음 - 첫 번째 강의(2) (0) | 2022.10.09 |
|---|---|
| CSS 첫걸음 - 첫 번째 강의(1) (0) | 2022.10.09 |
