CSS - 문제 미리보기
문제 1250
medium
다음 CSS 코드의 빈칸에 들어갈 올바른 값은?
```css
.background-image {
position: absolute;
z-index: _____;
}
.text-content {
position: relative;
z-index: 1;
}
```
이미지를 텍스트 뒤에 배치하고 싶을 때
정답: C
상대적인 z-index 값 설정:
값 비교 원리:
• z-index는 상대적인 값으로 작동
• 낮은 값이 뒤쪽, 높은 값이 앞쪽에 배치
• text-content의 z-index: 1보다 낮아야 함
각 선택지 분석:
• 2: 텍스트(1)보다 앞쪽 → 텍스트가 가려짐
• 0: 텍스트(1)보다 뒤쪽이지만 -1보다 명확하지 않음
• -1: 명확히 텍스트(1)보다 뒤쪽 ✓
• 999: 훨씬 앞쪽 → 의도와 반대
실무에서의 패턴:
• 배경 요소: z-index: -1 (가장 뒤)
• 일반 콘텐츠: z-index: 0~10
• 네비게이션: z-index: 100
• 모달/팝업: z-index: 1000+
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.