CSS - 문제 미리보기

문제 1128

hard
다음 상황에서 가장 좋은 해결 방법은? 상황: 카드 컴포넌트들을 세로로 나열했는데, 각 카드의 margin-bottom이 20px, 다음 카드의 margin-top이 15px로 설정되어 있습니다. 디자인에서는 카드 간격이 정확히 25px여야 하는데, 마진 병합 때문에 20px로 나타나고 있습니다.
A. ```css .card { margin-bottom: 25px; margin-top: 0; } ```
B. ```css .card { margin-bottom: 25px; margin-top: 25px; } ```
C. ```css .card { margin-bottom: 12.5px; margin-top: 12.5px; } ```
D. ```css .card:not(:last-child) { margin-bottom: 25px; } .card { margin-top: 0; } ```

정답: D

마진 병합 문제를 해결할 때는 한 방향으로만 마진을 설정하는 것이 가장 예측 가능하고 유지보수하기 좋습니다. 각 선택지 분석: 4번 (정답) - 단방향 마진: ```css .card:not(:last-child) { margin-bottom: 25px; /* 마지막 카드 제외하고 아래쪽만 */ } .card { margin-top: 0; /* 위쪽 마진 제거 */ } ``` 장점: • 예측 가능: 마진 병합 걱정 없음 ✓ • 정확한 간격: 정확히 25px 간격 보장 ✓ • 깔끔한 코드: 마지막 요소에 불필요한 마진 없음 ✓ • 유지보수성: 간격 변경 시 한 곳만 수정 ✓ 다른 선택지들의 문제점: 1번: 일관성 문제 • margin-top이 다른 곳에서 설정될 가능성 2번: 비효율성 • 모든 카드에 불필요한 상하 마진 3번: 복잡성과 오차 가능성 • 소수점 계산으로 브라우저별 차이 발생 가능

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.