CSS - 문제 미리보기
문제 1307
hard
전체 높이를 차지하는 고정형 세로 내비게이션 바를 만들기 위한 핵심 CSS 속성 조합은?
```css
ul {
width: 25%;
background-color: #f1f1f1;
height: _____;
position: _____;
overflow: _____;
}
```
정답: C
전체 높이 고정형 사이드바의 핵심 속성들:
• `height: 100%;`: 뷰포트 전체 높이를 차지
• `position: fixed;`: 스크롤해도 위치가 고정됨 (sticky 효과)
• `overflow: auto;`: 내용이 많을 경우 내비게이션 바 내에서 스크롤 가능
각 속성의 역할:
• `height: 100%`: 브라우저 창의 전체 높이만큼 내비게이션 바 확장
• `position: fixed`: 페이지를 스크롤해도 내비게이션 바가 화면에 고정
• `overflow: auto`: 메뉴 항목이 많아서 넘칠 경우 자동으로 스크롤바 생성
잘못된 선택지 분석:
• 1번: `position: relative`는 고정 효과 없음
• 2번: `100vh`도 가능하지만 `position: absolute`는 스크롤 시 같이 움직임
• 4번: `position: static`은 기본값으로 고정 효과 없음
모바일에서는 제대로 작동하지 않을 수 있어 반응형 디자인 고려 필요
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.