CSS - 문제 미리보기
문제 1310
medium
가로형 내비게이션 바에서 `overflow: hidden;`을 `
- `에 적용하는 이유는?
```css
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
```
정답: B
• `float` 속성을 사용하면 자식 요소들이 부모의 높이에 영향을 주지 않습니다
• 문제 상황:
`` 요소들이 `float: left;`로 떠있음
부모인 `
- `의 높이가 0이 되어 배경색이 보이지 않음
레이아웃이 깨져 보임
• `overflow: hidden;`의 효과:
새로운 Block Formatting Context(BFC) 생성
떠있는 자식 요소들을 포함하도록 부모 높이 확장
배경색과 테두리가 제대로 표시됨
• 이를 "clearfix" 기법이라고 부르며, float 레이아웃의 필수 기술입니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.