CSS - 문제 미리보기
문제 1348
easy
현재 요소의 폰트 크기를 기준으로 하는 상대 단위는?
```css
.container {
font-size: 16px;
}
.container p {
font-size: 1.5_____; /* 24px가 됨 */
margin: 2_____; /* 32px가 됨 */
}
```
```css
.container {
font-size: 16px;
}
.container p {
font-size: 1.5_____; /* 24px가 됨 */
margin: 2_____; /* 32px가 됨 */
}
```
정답: C
• `em` 단위는 현재 요소의 폰트 크기를 기준으로 계산됩니다
• em 계산 방법:
• 부모의 font-size가 16px일 때
• 1.5em = 1.5 × 16px = 24px
• 2em = 2 × 16px = 32px
• em의 장점:
• 폰트 크기에 비례하여 일관된 비율 유지
• 접근성 향상 (사용자가 폰트 크기 변경 시 함께 조정)
• 모듈화된 컴포넌트 디자인에 유용
• 실제 사용 예시:
```css
h1 { font-size: 2em; } /* 본문의 2배 크기 */
p { margin-bottom: 1em; } /* 폰트 크기만큼 여백 */
```
• 다른 단위들과의 차이:
• `rem`: 루트 요소(html) 폰트 크기 기준
• `%`: 부모 요소의 해당 속성값 기준
• `vw`: 뷰포트 너비 기준
• em 계산 방법:
• 부모의 font-size가 16px일 때
• 1.5em = 1.5 × 16px = 24px
• 2em = 2 × 16px = 32px
• em의 장점:
• 폰트 크기에 비례하여 일관된 비율 유지
• 접근성 향상 (사용자가 폰트 크기 변경 시 함께 조정)
• 모듈화된 컴포넌트 디자인에 유용
• 실제 사용 예시:
```css
h1 { font-size: 2em; } /* 본문의 2배 크기 */
p { margin-bottom: 1em; } /* 폰트 크기만큼 여백 */
```
• 다른 단위들과의 차이:
• `rem`: 루트 요소(html) 폰트 크기 기준
• `%`: 부모 요소의 해당 속성값 기준
• `vw`: 뷰포트 너비 기준
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.