CSS - 문제 미리보기
문제 1128
hard
다음 상황에서 가장 좋은 해결 방법은?
상황: 카드 컴포넌트들을 세로로 나열했는데, 각 카드의 margin-bottom이 20px, 다음 카드의 margin-top이 15px로 설정되어 있습니다. 디자인에서는 카드 간격이 정확히 25px여야 하는데, 마진 병합 때문에 20px로 나타나고 있습니다.
정답: D
마진 병합 문제를 해결할 때는 한 방향으로만 마진을 설정하는 것이 가장 예측 가능하고 유지보수하기 좋습니다.
각 선택지 분석:
4번 (정답) - 단방향 마진:
```css
.card:not(:last-child) {
margin-bottom: 25px; /* 마지막 카드 제외하고 아래쪽만 */
}
.card {
margin-top: 0; /* 위쪽 마진 제거 */
}
```
장점:
• 예측 가능: 마진 병합 걱정 없음 ✓
• 정확한 간격: 정확히 25px 간격 보장 ✓
• 깔끔한 코드: 마지막 요소에 불필요한 마진 없음 ✓
• 유지보수성: 간격 변경 시 한 곳만 수정 ✓
다른 선택지들의 문제점:
1번: 일관성 문제
• margin-top이 다른 곳에서 설정될 가능성
2번: 비효율성
• 모든 카드에 불필요한 상하 마진
3번: 복잡성과 오차 가능성
• 소수점 계산으로 브라우저별 차이 발생 가능
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.