CSS - 문제 미리보기
문제 1260
medium
`float: left`가 적용된 여러 div 요소들의 배치 결과는?
```css
div {
float: left;
width: 100px;
height: 100px;
}
```
정답: B
multiple float 요소들의 동작:
float: left의 연속 효과:
• 첫 번째 div가 왼쪽으로 이동
• 두 번째 div가 첫 번째 옆으로 배치
• 세 번째 div가 두 번째 옆으로 배치
• 가로 공간이 있는 한 계속 나란히 배치
배치 순서:
[div1] [div2] [div3] [div4]
공간 부족 시 동작:
• 컨테이너 너비가 부족하면 다음 줄로 넘어감
• 마치 단어가 줄바꿈되는 것처럼 동작
• 자동으로 "wrap" 효과 발생
실무 활용 패턴:
• 이미지 갤러리: 사진들을 가로로 나열
• 카드 레이아웃: 여러 카드를 가로 배치
• 메뉴 버튼: 내비게이션 버튼들을 가로 정렬
• 상품 목록: 제품들을 그리드 형태로 배치
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.