CSS - 문제 미리보기
문제 1312
hard
스크롤해도 항상 화면 상단에 고정되는 내비게이션 바를 만들기 위한 CSS는?
```css
ul {
position: _____;
top: _____;
width: _____;
z-index: 1000;
}
```
정답: C
• 고정형 내비게이션 바의 핵심 속성들:
`position: fixed;`: 뷰포트를 기준으로 절대 위치 고정
`top: 0;`: 화면 맨 위에 고정
`width: 100%;`: 화면 전체 너비를 차지
• 각 속성의 역할:
`position: fixed`: 스크롤과 관계없이 항상 같은 위치에 고정
`top: 0`: 브라우저 창의 맨 위쪽에 배치
`width: 100%`: 화면 전체 너비를 덮도록 설정
`z-index: 1000`: 다른 요소들보다 위에 표시
• 다른 position 값과의 차이:
`relative`: 원래 위치 기준으로 상대적 이동 (스크롤 시 함께 움직임)
`absolute`: 부모 요소 기준 절대 위치 (스크롤 시 함께 움직임)
`sticky`: 스크롤 위치에 따라 relative와 fixed 사이를 전환
• 주의사항: 모바일 기기에서는 제대로 작동하지 않을 수 있어 추가 고려사항이 필요합니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.