211012 TIL picture 태그 이해하기(학습 82일차)

Must Remember

• picture 요소는 0개 이상의 source요소와 하나의 img요소로 구성된다.
• 브라우저는 source 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 source요소를 사용하고, 나머지는 무시한다. 이 때 브라우저를 위한 하위 호환성을 위해 img는 가장 마지막에 위치해야 한다. 아래의 예제를 참고하자.

  <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>

• IE에서는 지원하지 않으니 주의할 것.