<IMG>

Image tag

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

사용 방법

<img>

src

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

• 주소가 부여된 이미지

• base64 이미지

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

<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

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

https://www.base64-image.de/

alt

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

• 검색엔진에서는 그림에 대한 정보를 ALT 속성값으로 읽는다.

• 시각장애인들이 이용할 수 있는 스크린 리더 소프트웨어는 ALT 속성값을 음성으로 변환한다.

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

[네이버 온라인 장애 체험]

width

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

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

page픽셀(px)

height

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

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

page픽셀(px)

height 속성은 외부영역의 높이가이 정해져 있지 않은 경우 비율로 설정할 수 없다.