> For the complete documentation index, see [llms.txt](https://docs.sysout.co.kr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sysout.co.kr/web/develop-page/html/img.md).

# \<IMG>

## Image tag

`<img>` 태그를 이용하여 특정 이미지를 문서에 삽입할 수 있다.

### 사용 방법

```markup
<img>
```

### src

`src` 속성을 설정하여 표시할 다음 이미지를 지정할 수 있다.&#x20;

* 주소가 부여된 이미지
* base64 이미지

{% embed url="<https://codepen.io/hiphop5782/pen/zYdBemQ>" %}

{% hint style="info" %}
base64 이미지란 이미지를 base64 encoding 방식으로 변경하여 사용하는 것을 의미한다. 이미지의 용량이 크지 않을 경우 별도의 파일이 아닌 문서에 포함하여 사용할 수 있다는 장점이 있다.

```markup
<img src="data:image/png;base64,(데이터)">
<img src="data:image/jpeg;base64,(데이터)">
<img src="data:image/gif;base64,(데이터)">
```

위와 같은 형태로 사용하며, **(데이터)** 자리에 변환된 base64 이미지 데이터를 넣으면 된다. base64 encoding에 대해서 궁금할 경우 위키백과에 자세한 설명이 나와있다.

[https://ko.wikipedia.org/wiki/베이스64](https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%9D%B4%EC%8A%A464)

가지고 있는 이미지를 base64 형태로 바꾸어 사용할 수 있으며, 대표적으로 다음 사이트가 존재한다.

<https://www.base64-image.de/>
{% endhint %}

### alt

`ALT` 속성은 이미지가 표시되지 못할 경우 나타날 문자열 값을 의미한다. 하지만 다음과 같은 용도로도 사용한다.

* 검색엔진에서는 그림에 대한 정보를 ALT 속성값으로 읽는다.
* 시각장애인들이 이용할 수 있는 스크린 리더 소프트웨어는 ALT 속성값을 음성으로 변환한다.

따라서 `ALT` 속성은 이미지에 대한 정보를 정확하게 전달할 수 있도록 작성해야 한다. 시각장애인에 대한 체험학습은 네이버 온라인 접근성 센터에서 해볼 수 있다.

{% embed url="<https://nax.naver.com/blind/intro>" %}

### width

`width` 속성을 통해 표시될 이미지의 **폭**을 설정할 수 있다. 기본 설정 단위는 픽셀(px)이며, 비율로도 설정이 가능하다. `height` 속성과 같이 사용할 수 있으며, `width`만 설정한 경우 `height`는 비율에 맞게 자동 설정된다.&#x20;

{% embed url="<https://codepen.io/hiphop5782/pen/VwzjgNK>" %}

픽셀에 대한 정보는 다음을 참고한다.

{% content-ref url="/pages/H7sjGkGYQwWLHVTz2S9p" %}
[픽셀(px)](/web/develop-page/css/develop-guide/size/pixel.md)
{% endcontent-ref %}

### height

height 속성을 통해 표시될 이미지의 높이를 설정할 수 있다. width와 동일한 방식을 사용하며, 지정하지 않을 경우 이미지의 비율에 의해 자동 설정된다.

{% embed url="<https://codepen.io/hiphop5782/pen/WNExPWy>" %}

픽셀에 대한 정보는 다음을 참고한다.

{% content-ref url="/pages/H7sjGkGYQwWLHVTz2S9p" %}
[픽셀(px)](/web/develop-page/css/develop-guide/size/pixel.md)
{% endcontent-ref %}

{% hint style="info" %}
`height` 속성은 외부영역의 높이가이 정해져 있지 않은 경우 비율로 설정할 수 없다.
{% endhint %}