HTML - 문제 미리보기
문제 980
hard
다음 미디어 쿼리 코드에서 빈칸에 들어갈 올바른 내용을 순서대로 나열한 것은?
```css
.left, .right {
float: left;
width: ______; /* 기본 너비 */
}
.main {
float: left;
width: ______; /* 기본 너비 */
}
@media screen and (______: 800px) {
.left, .main, .right {
width: ______; /* 작은 화면에서의 너비 */
}
}
```
정답: C
이 코드는 반응형 3단 레이아웃을 구현하는 전형적인 패턴입니다:
• `.left, .right { width: 20%; }`: 좌우 사이드바가 각각 20%씩 차지
• `.main { width: 60%; }`: 메인 콘텐츠가 60% 차지 (20% + 60% + 20% = 100%)
• `@media screen and (max-width: 800px)`: 화면 너비가 800px 이하일 때 적용
• `width: 100%`: 작은 화면에서는 모든 요소가 100% 너비를 가져 세로로 쌓임
이렇게 하면 큰 화면에서는 가로 3단 레이아웃이, 작은 화면에서는 세로 스택 레이아웃이 됩니다.
💡 학습 팁
이 문제를 포함한 HTML 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.