픽쳐(Picture) 요소

<picture>

• 0개 이상의 <source> 요소와 1개 이상의 <img>를 포함하는 컨테이너 요소.

• 다양한 스크린 환경(스마트폰, 테블릿, 데스크탑 등)에 맞는 적합한 이미지를 제공하기 위한 목적으로 사용한다. → 반응형

• <source> 요소를 사용할 수 없을 경우, <img> 요소가 화면에 표시.

<source>

• <picture>, <audio>, <video> 요소의 다중 미디어 리소스를 지정하기 위해 사용.

• 중첩 가능한 요

• <srcset>속성을 가짐

  • <img>요소의 <src>속성과 다르다.

  • 해당 요소는 <source> 요소가 <picture> 요소의 자식요소일 때 만 사용가능 하다.

• <media>속성을 사용해서 media queries 구문을 사용할 수 있다

  • media queries 구문?

    스마트폰, 테블릿, 데스크탑을 구분해 줄 수 있는 코드 구문

media 속성:
<picture>
  <source srcset="bamboo-pen.png" media="(min-width: 600px)" />
  (좀 더 큰 이미지) <img src="bamboo-pen-narrow.png" alt="Bamboo Pen" /> (작은
  이미지)
</picture>

type 속성:
<picture>
  <source srcset="bamboo-pen.svg" type="image/svg+xml" />
  (1)
  <img src="bamboo-pen-narrow.png" alt="Bamboo Pen" />
</picture>

* type은 이미지 형식에 따라 변경 -
<source type="image/png" />
-
<source type="image/jpeg" />
-
<source type="image/svg+xml" />

• (1) <svg>, <png>, <jpeg> 등 여러 확장자를 사용할 때 브라우저가 올바르게 인식할 수 없다는 판단이 든다면 mime type을 지정해서 미디어 타입을 설정한다.

<!-- img + picture + source -->

<picture>
  <source
    srcset="media/image/kitten-large.png"
    type="image/png"
    media="(min-width: 900px)"
  />
  <source
    srcset="media/image/kitten-medium.png"
    type="image/png"
    media="(min-width: 600px)"
  />
  <img src="media/image/kitten-small.png" alt="작은 고양이"
</picture>

• <midea>속성을 사용해서 반응형 웹을 만들 수 있다

속성

• src - 이미지 파일 경로 설정

• alt - 이미지 대체 텍스트 설정

• width - 이미지 너비 설정

• height - 이미지 높이 설정

• usemap - 이미지 맵 연결 설정