px, %, em, rem, vw, vh, ch 단위의 기준을 구분합니다.
px은 CSS 픽셀, %는 부모 기준, em은 현재 요소 글자 크기, rem은 루트 글자 크기 기준입니다. viewport 단위는 화면 크기에 비례하고 ch는 글자 폭을 기준으로 읽기 길이를 제한할 때 유용합니다.
.target의 font-size 1.1rem은 .demo에 준 16px가 아니라 루트 글자 크기를 기준으로 하므로 기본 설정에서 17.6px가 됩니다. padding: 1.5em은 그 요소 자신의 글자 크기를 쓰기 때문에 1.5 × 17.6, 즉 26.4px이고, width: 80%는 부모 .stage 너비의 80%입니다. 두 번째 상자는 width가 20ch로 바뀌는데, border-box라서 이 폭에 padding까지 들어가 실제 글줄은 그보다 좁습니다.
font-size에 em을 쓰면 부모 글자 크기의 배수라서, 1.2em을 준 요소를 세 겹 중첩하면 글자가 1.2의 세제곱인 약 1.73배까지 커집니다. rem은 항상 루트를 기준으로 하므로 중첩 깊이와 상관없이 같은 크기를 유지합니다.
모든 크기를 vw로 지정하면 큰 화면과 작은 화면에서 글자가 지나치게 변할 수 있습니다.
직접 바꿔보세요padding의 em이 font-size 변화에 따라 어떻게 달라지는지 확인하세요.