width, height와 min/max 제약으로 요소 크기를 정합니다.
width와 height의 백분율은 containing block을 기준으로 합니다. 콘텐츠가 늘어나는 UI에는 고정 height보다 min-height를, 넓은 화면 제한에는 width:100%와 max-width를 함께 쓰는 방식이 안전합니다.
이번 예제의 출발점은 width: 100%; max-width: 420px; min-height: 80px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 max-width를 240px과 500px로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
내용 양을 모른 채 height를 고정하면 텍스트가 넘치거나 잘릴 수 있습니다.
직접 바꿔보세요max-width를 240px과 500px로 바꿔보세요.