CSS - 문제 미리보기
문제 1346
hard
반응형 레이아웃을 위한 미디어 쿼리에서 컬럼을 세로로 스택하는 완전한 CSS 코드는?
```css
.column {
float: left;
width: 33.33%;
}
@media screen and (max-width: _____) {
.column {
width: _____;
}
}
```
정답: B
• 반응형 웹 디자인의 핵심 브레이크포인트와 원리:
• `max-width: 600px` 브레이크포인트:
• 타블릿과 모바일 기기를 위한 일반적인 기준점
• 600px 이하에서는 3컬럼이 읽기 어려워짐
• 사용자 경험을 위한 최적화된 값
• `width: 100%`의 효과:
• 각 컬럼이 전체 너비를 차지
• 3개 컬럼이 세로로 스택되어 배치
• 모바일에서 읽기 편한 레이아웃 구성
• 일반적인 브레이크포인트들:
• 모바일: 480px 이하
• 타블릿: 600px ~ 768px
• 데스크톱: 1024px 이상
• 현대적 대안 기술:
• CSS Grid: `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))`
• Flexbox: `flex-wrap: wrap`과 `flex-basis` 조합
• 하지만 float + 미디어 쿼리는 여전히 안정적이고 호환성이 좋음
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.