picture태그 & source 태그 기분 문법

<picture>
	<source 
		media="[미디어쿼리]" 
		sizes="[너비값], [미디어쿼리]"
		type="[파일 유형]"
		srcset="파일위치, [픽셀 밀도], [너비값], {[파일위치], [픽셀 밀도], [너비값]}">
</picture>

 

srcset 속성

<picture>
	<source srcset="images/test.jpg, images/test2.jpg">
</picture>

• 파일위치, 픽셀 밀도, 너비값 지정 가능
• 콤마를 이용해 다중 지정 가능
• 해당 속성은 생략 불가능 (파일 위치 필수, 픽셀 밀도와 너빗값은 생략 가능)

파일위치 : 이미지 파일 위치

픽셀 밀도 : 해상도의 배수

너빗값: sizes 속성과 뷰포트 크기와 연계되어있음

 

media 속성 (생략가능)

미디어 쿼리를 뜻함 (모든 미디어 쿼리의 조건문을 사용할 수 있는 것은 아님, 너비값에 대해서만 지원)

<picture>
	<source media="(min-width: 768px)" srcset="">
</picture>

 

sizes 속성 (생략가능)

이미지가 표현될 영역의 크기 설정, 너빗값과 미디어 쿼리 지정 가능

<!-- 너비값 지정 -->
<picture>
	<source sizes="100px">
</picture>

<!-- 미디어쿼리 지정 -->
<picture>
	<source sizes="(max-width: 1000px)">
</picture>

 

type 속성 

불러올 파일의 유형 지정 가능

 

img 태그

<picture>
	<source srcset="images/test.jpg, images/test2.jpg">
    
    <!-- img태그도 넣을 수 있음 -->
    <img src="" />
</picture>

src 속성에 기본으로 출력될 이미지 경로 입력

picture, source 태그 지원하지 않는 브라우저를 위한 용도 (크로스 브라우징)

마지막에 img 태그를 넣어줌, 그럼 지원하지 않는 브라우저에서도 이미지가 정상적으로 보이게됨

 

예시>>

<picture>
	<source 
		sizes="100vw"
		srcset="source/venice-portrait-414.jpg 414w,
			source/venice-portrait-768.jpg 768w,
			source/venice-landscape-1920.jpg 1920w">
                
	<img src="source/venice-landscape-1920.jpg">
</picture>