CSS - 문제 미리보기
문제 1325
medium
스프라이트 이미지에서 두 번째 아이콘을 표시하려면 배경 위치를 어떻게 설정해야 하나요?
```css
/* 첫 번째 아이콘 (홈): 너비 46px */
#home {
background: url(img_navsprites.gif) 0 0;
}
/* 두 번째 아이콘 (이전): 너비 43px */
#prev {
background: url(img_navsprites.gif) _____ 0;
}
```
정답: C
• **음수 값(`-47px`)**을 사용하여 배경 이미지를 왼쪽으로 이동시킵니다
• 배경 위치 계산 방법:
• 첫 번째 아이콘 너비: 46px
• 아이콘 사이 구분선: 1px
• 총 이동 거리: 46px + 1px = 47px
• 음수 사용 이유:
• 배경 이미지를 왼쪽으로 이동시켜 두 번째 아이콘이 보이게 함
• 마치 큰 그림을 왼쪽으로 밀어서 다른 부분을 창으로 보는 것과 같음
• 스프라이트 위치 이동 원리:
• `0 0`: 첫 번째 아이콘 (맨 왼쪽)
• `-47px 0`: 두 번째 아이콘 (47px만큼 왼쪽으로 이동)
• `-91px 0`: 세 번째 아이콘 (91px만큼 왼쪽으로 이동)
• 양수를 사용하면 이미지가 오른쪽으로 이동하여 빈 공간만 보입니다
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.