CSS - 문제 미리보기
문제 1125
easy
다음 코드에서 h1과 h2 사이의 실제 간격은?
```css
h1 {
margin: 0 0 40px 0;
}
h2 {
margin: 25px 0 0 0;
}
```
```css
h1 {
margin: 0 0 40px 0;
}
h2 {
margin: 25px 0 0 0;
}
```
정답: B
마진 병합에서는 더 큰 마진 값이 적용됩니다.
마진 병합의 핵심 원리:
• 두 마진이 만날 때 더하는 것이 아니라
• 더 큰 값 하나만 사용
코드 분석:
```css
h1 { margin-bottom: 40px; } /* 아래쪽 40px */
h2 { margin-top: 25px; } /* 위쪽 25px */
```
병합 과정:
1. h1의 아래쪽 마진: 40px
2. h2의 위쪽 마진: 25px
3. 둘 중 더 큰 값: 40px ✓
4. 실제 적용되는 간격: 40px
시각적 표현:
<h1>제목 1</h1>
↓ 40px (실제 간격)
<h2>제목 2</h2>
마진 병합의 핵심 원리:
• 두 마진이 만날 때 더하는 것이 아니라
• 더 큰 값 하나만 사용
코드 분석:
```css
h1 { margin-bottom: 40px; } /* 아래쪽 40px */
h2 { margin-top: 25px; } /* 위쪽 25px */
```
병합 과정:
1. h1의 아래쪽 마진: 40px
2. h2의 위쪽 마진: 25px
3. 둘 중 더 큰 값: 40px ✓
4. 실제 적용되는 간격: 40px
시각적 표현:
<h1>제목 1</h1>
↓ 40px (실제 간격)
<h2>제목 2</h2>
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.