CSS - 문제 미리보기
문제 1344
medium
3개의 동일한 너비 컬럼을 만들기 위한 CSS 설정은?
```css
.column {
float: left;
width: _____;
}
.row:after {
content: "";
display: table;
clear: _____;
}
```
정답: B
• 3컬럼 레이아웃의 수학적 계산:
• 전체 너비 100% ÷ 3개 컬럼 = 33.33%
• 정확한 계산으로 레이아웃 깨짐 방지
• `clear: both`의 중요한 역할:
• 왼쪽과 오른쪽 모든 float 요소들을 정리
• 다음 요소가 float 영향을 받지 않도록 함
• 레이아웃의 깔끔한 마무리
• Clearfix 기법 이해:
```css
.row:after {
content: ""; /* 가상 요소 생성 */
display: table; /* 블록 레벨 요소화 */
clear: both; /* 모든 float 정리 */
}
```
• 다양한 컬럼 레이아웃:
• 2컬럼: `width: 50%`
• 3컬럼: `width: 33.33%`
• 4컬럼: `width: 25%`
• 5컬럼: `width: 20%`
• 반응형 고려사항:
```css
@media screen and (max-width: 600px) {
.column {
width: 100%; /* 모바일에서는 세로 배치 */
}
}
```
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.