이미지를 집어넣기 위한 방법에는 3가지가 있다.
1. img 태그
2. 태그의 background 속성에 이미지를 추가해주기
3. picture태그
미디어 쿼리 이용 시, background 속성을 바꿀 수 있지만 이미지 태그의 이미지 소스는 바꿀 수 없었다.
그러나 html5에서 지원하는 picture태그는 css의 미디어쿼리로 이미지 변경이 가능하다.
(기존에는 호환성 문제가 되었으나, 브라우저가 업데이트 되면서 사용성이 높아졌다.)
<picture class="picture">
<!--source 태그는미디어쿼리 추가 가능-->
<source media="(min-width:640px)"
srcset="images/lecture/spring-di.png"/>
<!--default 이미지-->
<img class="img" src="images/lecture/img-oracle-sm.png" />
</picture>
<source> 태그에는 media 쿼리에 한하여 이미지를 설정할 수 있고,
<img> 태그에는 default이미지를 설정할 수 있다.
srcset 속성에는 밀도(dp)에 따른 밀도를 결정할 수 있는 기능이 있다.
ex ) srcset="url-xdpi x1"
'공부 > css' 카테고리의 다른 글
| Padding 줄 때, 지정한 높이가 깨지는 것 해결하기 (2) | 2017.05.29 |
|---|---|
| Transition, setTimeout 이용하여 메뉴 바 확대시키기 (1) | 2017.05.22 |
| 배너 옆으로 넘기기 (0) | 2017.05.17 |
| Background 이미지 크기 설정하기 / 2중 큰 따옴표 처리하기 (0) | 2017.05.15 |
| 태그의 기본 속성 지우기(ul태그) (0) | 2017.05.15 |