CSS - 문제 미리보기

문제 1307

hard
전체 높이를 차지하는 고정형 세로 내비게이션 바를 만들기 위한 핵심 CSS 속성 조합은? ```css ul { width: 25%; background-color: #f1f1f1; height: _____; position: _____; overflow: _____; } ```
A. `auto`, `relative`, `hidden`
B. `100vh`, `absolute`, `visible`
C. `100%`, `fixed`, `auto`
D. `inherit`, `static`, `scroll`

정답: 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 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.