CSS - 문제 미리보기
문제 1431
medium
썸네일 이미지에 호버 효과를 주는 CSS 코드에서 빈칸에 들어갈 올바른 속성은?
```css
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
img:hover {
_______: 0 0 2px 1px rgba(0, 0, 0, 0.5);
}
```
정답: B
box-shadow 속성의 역할:
• 요소 주변에 그림자 효과를 생성
• 호버 시 시각적 피드백 제공
• 썸네일이 "떠오르는" 느낌 연출
box-shadow 문법:
```css
box-shadow: x축 y축 블러 확산 색상;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.5);
↓ ↓ ↓ ↓ ↓
x y 블러 확산 색상
```
각 값의 의미:
• `0 0`: 그림자 위치 (x, y 오프셋)
• `2px`: 블러 정도 (흐림 효과)
• `1px`: 확산 거리 (그림자 크기)
• `rgba(0, 0, 0, 0.5)`: 반투명 검은색
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.