다크모드나 해상도에 따라 이미지를 다르게 보여줄때 유용하게 사용됩니다.
<picture>
<source media="(prefers-color-scheme: light)" srcset="./images/logo.svg"> <!-- 라이트모드 일때 보여질 이미지 -->
<source media="(prefers-color-scheme: dark)" srcset="./images/logo_dark.svg"> <!-- 다크모드 일때 보여질 이미지 -->
<img src="./images/logo.svg" alt="웹미니" class="top_logo"> <!-- 기본이미지 -->
</picture>
간단히 설명을 드리자면 source media는 css에 미디어쿼리와 동일하다고 생각하시면 됩니다.
아래 내용을 참고하셔서, 라이트/다크 모드일때 보여지는 이미지와, source 아래 기본 이미지를 넣으시면 됩니다.
반응형(해상도별) 예시
@media screen and (max-width:921px) {
}
(해상도 예시)
반응형
디바이스(운영체제별) 라이트, 다크모드
@media (prefers-color-scheme: dark) {
}
(디바이스 다크모드 예시)
728x90
