content-box
보통 element의 width와 height를 지정하면 내가 원하는 사이즈보다 크게 나오는데, 이유는 내가 지정한 width height 값에 border 두께와 내부의 padding까지 합쳐지기 때문.
border-box
이를 방지하기 위해 box-sizing : border-box를 쓴다.
이를 지정해주면 내가 지정한 width height 값에 딱 맞는 박스가 생성됨.
html 선택자를 쓰는 이유
HTML문서에서 html부분은 웹페이지에 시각적으로 나타나는 것이 아니라, head와 body를 담은 하나의 큰 그릇이다. 따라서 html 선택자로 스타일 속성을 지정해도 달라지는 것은 없다.
그럼 왜 쓰냐?
모든 자식들이 그 속성을 inherit해야할 때 사용한다. 쉽게 말해 스타일 기본값의 역할을 한다고 생각할 수도?
body 선택자를 쓰는 이유
모든 요소들에 공통적으로 적용되는 스타일(background color, font color, link color 등)을 한 번만 쓰기 위해
html/body 와 * 선택자 차이
👀 stack overflow에서 발견한 어느 사람의 설명
body is an element selector (selects an element body) while * is a universal selector (selects all elements).
The body selector has higher priority, but the * selector applies more broadly, so in <body>foo<p>bar</p></body> the bodyselector will determine the background of the text foo, but the * selector will determine the background of the <p>element.
