CSS - 문제 미리보기
문제 1295
easy
다음 CSS 코드의 빈칸에 들어갈 올바른 값은?
```css
img {
opacity: 0.3;
}
img:hover {
opacity: _____;
}
```
이미지에 마우스를 올렸을 때 완전히 선명하게 보이게 하고 싶을 때
```css
img {
opacity: 0.3;
}
img:hover {
opacity: _____;
}
```
이미지에 마우스를 올렸을 때 완전히 선명하게 보이게 하고 싶을 때
정답: C
호버 효과에서의 opacity 활용:
기본 상태 (opacity: 0.3):
• 이미지가 70% 투명한 상태
• 흐릿하고 연한 모습으로 표시
• 사용자의 주의를 덜 끌도록 설정
호버 상태 (opacity: 1.0):
• 이미지가 완전히 선명하게 변화
• 100% 불투명한 원래 모습
• 마우스 오버 시 강조 효과 생성
인터랙션 흐름:
1. 초기: 연한 이미지 (0.3)
2. 호버: 선명한 이미지 (1.0)
3. 호버 해제: 다시 연한 이미지 (0.3)
기본 상태 (opacity: 0.3):
• 이미지가 70% 투명한 상태
• 흐릿하고 연한 모습으로 표시
• 사용자의 주의를 덜 끌도록 설정
호버 상태 (opacity: 1.0):
• 이미지가 완전히 선명하게 변화
• 100% 불투명한 원래 모습
• 마우스 오버 시 강조 효과 생성
인터랙션 흐름:
1. 초기: 연한 이미지 (0.3)
2. 호버: 선명한 이미지 (1.0)
3. 호버 해제: 다시 연한 이미지 (0.3)
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.