CSS - 문제 미리보기
문제 1265
medium
다음 CSS 코드의 빈칸에 들어갈 올바른 값은?
```css
.sidebar {
float: left;
width: 200px;
}
.footer {
clear: _____;
}
```
사이드바 옆이 아닌 아래쪽에 푸터를 배치하고 싶을 때
정답: B
clear 값과 float 방향의 매칭:
매칭 원칙:
• float된 방향과 같은 방향으로 clear 설정
• `.sidebar`가 `float: left` → `.footer`는 `clear: left`
• 왼쪽 float 요소의 영향을 차단
시각적 결과:
[사이드바] 메인 콘텐츠
[200px] 텍스트 내용
─────────── clear: left ───────────
푸터 (전체 너비 사용)
다른 값들의 문제점:
• right: 오른쪽 float만 차단 (왼쪽 사이드바 영향 계속)
• none: clear 효과 없음 (푸터가 사이드바 옆에 붙음)
• center: clear 속성에 없는 값
실무 패턴:
• 왼쪽 사이드바: `clear: left` 사용
• 오른쪽 사이드바: `clear: right` 사용
• 양쪽 사이드바: `clear: both` 사용
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.