CSS - 문제 미리보기
문제 1349
medium
루트 요소의 폰트 크기를 기준으로 하여 중첩된 요소에서도 일관된 크기를 유지하는 단위는?
```css
html {
font-size: 16px;
}
.parent {
font-size: 1.2em; /* 19.2px */
}
.child {
font-size: 1.5_____; /* 항상 24px가 되어야 함 */
}
```
```css
html {
font-size: 16px;
}
.parent {
font-size: 1.2em; /* 19.2px */
}
.child {
font-size: 1.5_____; /* 항상 24px가 되어야 함 */
}
```
정답: B
• `rem` (root em) 단위는 항상 루트 요소(html)의 폰트 크기를 기준으로 합니다
• rem과 em의 중요한 차이점:
• em: 부모 요소의 폰트 크기에 영향받음 (중첩 시 복합적 계산)
• rem: 항상 html 요소의 폰트 크기만 기준 (일관성 유지)
• 중첩 문제 해결:
```css
/* em 사용 시 (문제 발생) */
.parent { font-size: 1.2em; } /* 19.2px */
.child { font-size: 1.5em; } /* 1.5 × 19.2px = 28.8px */
/* rem 사용 시 (일관성 유지) */
.parent { font-size: 1.2rem; } /* 19.2px */
.child { font-size: 1.5rem; } /* 1.5 × 16px = 24px */
```
• rem과 em의 중요한 차이점:
• em: 부모 요소의 폰트 크기에 영향받음 (중첩 시 복합적 계산)
• rem: 항상 html 요소의 폰트 크기만 기준 (일관성 유지)
• 중첩 문제 해결:
```css
/* em 사용 시 (문제 발생) */
.parent { font-size: 1.2em; } /* 19.2px */
.child { font-size: 1.5em; } /* 1.5 × 19.2px = 28.8px */
/* rem 사용 시 (일관성 유지) */
.parent { font-size: 1.2rem; } /* 19.2px */
.child { font-size: 1.5rem; } /* 1.5 × 16px = 24px */
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.