테크 시그널

부모 요소 기준: %, em 브라우저 기준: v*, rem(root elem) 요소의 width, height을 따름: %, v* font를 따름: em, rem em: 중첩될 수록 직관적인 계산이 어려워짐. e.g. 기본 폰트 사이즈를 12px로 하고, nested로 2em, 2em하면 12->24->48 되므로 헷갈림.

원문(영어): https://web.dev/learn/css/box-model/ 공부 내용을 우리말로 기록하되, 원어일 때 이해가 쉬운 부분은 번역하지 않음. border-radius를 적용해 원형처럼 보이거나 평범한 텍스트마저도 CSS로 표현되는 모든 것은 box이다. CSS 요소는 display 값이나 그 안 내용물 등에 따라 다른 성질을 가진다. 내부 요소(contents)가 박스의 사이즈에 영향을 끼치는 경우p { width: 100px; height: 50px; padding: 20px; border: 1px solid; } 이 코드를 작성하면 해당 태그는 width로 입력해준 100px가 아니라 142px의 너비를 가지게 된다. extrinsic sizing 사이즈(width)를 직접 정해주는..