유연한 폭에 상한을 두어 큰 화면에서도 읽기 좋은 영역을 만듭니다.
width:100%와 max-width를 함께 쓰면 작은 화면에서는 줄고 큰 화면에서는 지정한 상한을 넘지 않습니다. 긴 본문은 ch 단위로 줄 길이를 제한할 수도 있습니다.
이번 예제의 출발점은 width: 100%; max-width: 42rem;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 demo의 max-width를 320px과 700px로 비교하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
width만 고정하면 작은 화면에서 넘치고, max-width만 두면 원래 콘텐츠 폭에 따라 예상보다 작을 수 있습니다.
직접 바꿔보세요demo의 max-width를 320px과 700px로 비교하세요.