CSS - 문제 미리보기
문제 1257
hard
다음 CSS가 적용된 요소의 실제 동작으로 올바른 것은?
```css
.content-box {
width: 200px;
height: 100px;
overflow: scroll;
border: 1px solid black;
}
```
가정: 내용이 150px × 80px 크기일 때
정답: C
overflow: scroll의 고정 동작 방식:
scroll 값의 특성:
• 콘텐츠 크기와 관계없이 항상 스크롤바 표시
• 필요 여부를 판단하지 않음
• 가로와 세로 스크롤바를 모두 강제로 생성
현재 상황 분석:
• 컨테이너: 200px × 100px
• 콘텐츠: 150px × 80px
• 실제 넘침: 없음 (콘텐츠가 더 작음)
그럼에도 스크롤바가 나타나는 이유:
• `overflow: scroll`은 "강제 표시" 모드
• 콘텐츠가 작아도 스크롤바 영역 확보
• 일관된 레이아웃 유지 (스크롤바 깜빡임 방지)
다른 값들과의 비교:
• auto: 이 경우 스크롤바 없음 (넘침 없으므로)
• hidden: 스크롤바 없음, 넘침 시 잘림
• visible: 스크롤바 없음, 넘침 시 그대로 표시
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.