CSS - 문제 미리보기
문제 1351
hard
완벽하게 확장 가능한(scalable) 레이아웃을 만들기 위해 권장되는 단위 조합은?
```css
html {
font-size: 16px;
}
.card {
width: 20_____; /* 고정 너비 */
padding: 1.5_____; /* 폰트 기준 내부 여백 */
margin: 1_____; /* 루트 폰트 기준 외부 여백 */
font-size: 1.125_____; /* 루트 폰트 기준 크기 */
}
```
정답: C
• 확장 가능한 레이아웃을 위한 최적의 단위 전략:
• `width: 20rem`:
• 루트 폰트 크기에 비례한 고정 너비
• 사용자가 브라우저 폰트 크기 변경 시 함께 확장
• 컴포넌트 독립성 보장
• `padding: 1.5em`:
• 현재 요소의 폰트 크기에 비례한 내부 여백
• 폰트가 커지면 패딩도 함께 증가하여 비율 유지
• 텍스트와 경계선 간의 조화로운 간격
• `margin: 1rem`:
• 루트 폰트 기준의 일관된 외부 여백
• 전체 페이지에서 통일된 간격 체계
• 중첩으로 인한 예상치 못한 여백 증가 방지
• `font-size: 1.125rem`:
• 루트 폰트의 1.125배 (18px if root is 16px)
• 전역 폰트 스케일링에 반응
• 타이포그래피 체계의 일관성
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.