CSS - 문제 미리보기
문제 1326
medium
이미지 스프라이트로 내비게이션 리스트를 만들 때 필요한 위치 지정 방법은?
```css
#navlist {
position: _____;
}
#navlist li {
position: _____;
top: 0;
}
```
정답: B
• `position: relative`와 `position: absolute`의 부모-자식 관계가 핵심입니다
• 부모 컨테이너 (`#navlist`):
• `position: relative`: 자식 요소들의 기준점 역할
• 자신의 위치는 문서 흐름을 따름
• 자식 요소들 (`#navlist li`):
• `position: absolute`: 부모 기준으로 절대 위치
• `top: 0`: 모든 아이콘을 같은 높이에 배치
• 각각 다른 `left` 값으로 가로 위치 조정
• 이 방법의 장점:
• 아이콘들을 정확한 위치에 배치 가능
• 겹치지 않고 깔끔하게 정렬
• 반응형 레이아웃에도 유연하게 대응
• 실제 적용 예:
• `#home { left: 0px; }`
• `#prev { left: 63px; }`
• `#next { left: 129px; }`
• 다른 position 조합으로는 정확한 위치 제어가 어렵습니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.