CSS - 문제 미리보기
문제 1327
hard
이미지 스프라이트에 호버 효과를 추가할 때, 호버용 이미지의 배경 위치는 어떻게 설정해야 하나요?
```css
/* 일반 상태 */
#home {
background: url(img_navsprites.gif) 0 0;
}
/* 호버 상태 */
#home a:hover {
background: url(img_navsprites_hover.gif) 0 _____;
}
```
여기서 일반 이미지와 호버 이미지가 세로로 배치되어 있고, 각 아이콘의 높이가 45px입니다.
정답: C
• 호버 효과를 위해서는 y축 좌표를 음수로 이동시켜야 합니다
• 스프라이트 이미지 구조:
• 위쪽: 일반 상태 아이콘들 (0px 위치)
• 아래쪽: 호버 상태 아이콘들 (45px 아래 위치)
• 배경 위치 계산:
• 일반 상태: `0 0` (맨 위)
• 호버 상태: `0 -45px` (45px만큼 위로 이동하여 아래쪽 이미지가 보임)
• 음수를 사용하는 이유:
• 배경 이미지를 위로 이동시켜 아래쪽에 있는 호버 이미지가 보이게 함
• 마치 큰 그림을 위로 밀어 올려 다른 부분을 보는 것과 같음
• 호버 효과의 장점:
• 하나의 이미지 파일로 일반/호버 상태 모두 처리
• 마우스 오버 시 이미지 로딩 지연 없음
• 더 빠른 사용자 경험 제공
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.