> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-12/html-picture.md).

# 픽쳐(Picture) 요소

## **\<picture>**

* **0개 이상의 `<source>` 요소**와 **1개 이상의 `<img>`**&#xB97C; 포함하는 컨테이너 요소.
* 다양한 스크린 환경(스마트폰, 테블릿, 데스크탑 등)에 맞는 적합한 이미지를 제공하기 위한 목적으로 사용한다. → 반응형&#x20;
* `<source>` 요소를 사용할 수 없을 경우, `<img>` 요소가 화면에 표시.

## \<source>

* `<picture>`, `<audio>`, `<video>` 요소의 **다중 미디어 리소스를 지정**하기 위해 사용.
* 중첩 가능한 요
* [`<srcset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#Attributes)속성을 가짐
  * `<img>`요소의 `<src>`속성과 다르다.&#x20;
  * 해당 요소는 `<source>` 요소가 `<picture>` 요소의 자식요소일 때 만 사용가능 하다.&#x20;
* `<media>`속성을 사용해서 media queries 구문을 사용할 수 있다
  * media queries 구문? &#x20;

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

```markup
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을 지정해서 미디어 타입을 설정한다.

```markup
<!-- 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` - 이미지 파일 경로 설정&#x20;
* `alt` - 이미지 대체 텍스트 설정&#x20;
* `width` - 이미지 너비 설정&#x20;
* `height` - 이미지 높이 설정&#x20;
* `usemap` - 이미지 맵 연결 설정

##