..

Search

srcset

srcset

<source> 태그의 srcset 속성


HTML <source> 태그 ⇒


정의 및 특징

<source> 태그의 srcset 속성은 각각 다른 환경에서 사용될 이미지의 URL을 명시합니다.

 

<source> 요소가 <picture> 요소 내부에 사용될 때는 반드시 srcset 속성이 명시되어야 합니다.


문법

<source srcset="URL">

속성값

속성값   설명

URL

 

이미지 파일의 URL

 

1. 절대 주소(absolute URL)

ex) href=“http://www.tcpschool.com/sample.jpg”

2. 상대 주소(relative URL)

ex) href=“/meida/sample.jpg”


예제
<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

srcset 지원함 지원함 지원함 38.0 9.0 25.0

HTML5에서 변경된 사항

<source> 태그는 HTML5에서 새롭게 추가된 요소입니다.


연습문제