px, %, em, rem, vw, vh, ch 단위의 기준을 구분합니다.
px은 CSS 픽셀, %는 부모 기준, em은 현재 요소 글자 크기, rem은 루트 글자 크기 기준입니다. viewport 단위는 화면 크기에 비례하고 ch는 글자 폭을 기준으로 읽기 길이를 제한할 때 유용합니다.
이번 예제의 출발점은 font-size: 1rem; width: 80%; max-width: 60ch;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 padding의 em이 font-size 변화에 따라 어떻게 달라지는지 확인하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
모든 크기를 vw로 지정하면 큰 화면과 작은 화면에서 글자가 지나치게 변할 수 있습니다.
직접 바꿔보세요padding의 em이 font-size 변화에 따라 어떻게 달라지는지 확인하세요.