Picture태그 사용하기

이미지를 집어넣기 위한 방법에는 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"