HTML 이미지 삽입시 주소, 대체 속성, 크기 조절법


HTML 이미지

HTML 이미지는 <img> 태그를 사용합니다. <img> 태그는 empty tag이기 때문에 닫는 태그 없이 단독으로 사용합니다.

이미지 주소

이미지 주소는 src 속성 뒤에 입력합니다.

<img src="https://dasima.xyz/wp-content/uploads/2018/09/img-src-ufo-1.png">

이미지 대체 속성

대체 속성이란 이미지를 설명하는 문구를 말합니다. alt 속성 뒤에 삽입합니다. 검색 로봇은 이미지가 아닌 alt 에 적힌 문구를 통해 이미지를 해석합니다.

alt 속성에 적힌 값은 사람 눈에는 보이지 않지만, 컴퓨터는 인지할 수 있습니다. SEO를 올리고 싶다면, alt 속성을 적는 것이 좋습니다.

<img src="https://dasima.xyz/wp-content/uploads/2018/09/img-src-ufo-2.png" alt="UFO에 납치되는 동물">

이미지 크기 조절

이미지 크기 조절은 가로는 width 속성, 세로는 height 속성을 사용합니다. 가로나 세로 한 값만 적을 경우 다른 쪽의 비중은 원본 이미지 비율에 맞춰집니다.


<img src="https://dasima.xyz/wp-content/uploads/2018/09/img-src-width-height.png" width="300px;" height="200px;">

이미지에 링크 삽입

이미지에 링크 삽입은 이미지 주소와 이동할 웹페이지 주소 두 가지가 필요합니다.

먼저 <img> 태그의 src 속성에 정상적인 이미지 주소 값을 입력합니다. <a>태그의 href 속성 뒤에 이미지 클릭시 이동할 웹페이지 주소를 입력합니다. <img> 태그는 <a> 태그 사이에 위치하면 됩니다.

<a href="https://dasima.xyz/html-tutorials/" target="_blank">
<img src="https://dasima.xyz/wp-content/uploads/2018/09/img-link.png">
</a>

이미지 Float

float 속성은 이미지를 태그와 좌우 나란히 배치할 때 사용합니다. 나란히 배치를 원하는 태그에 이미지 태그와 src 주소를 먼저 삽입합니다. 삽입된 이미지 속성에 stylefloat값을 입력합니다.

<p><img src="https://dasima.xyz/wp-content/uploads/2018/09/img-float-3.png" style="float:left;">left를 입력하면 태그의 왼쪽에 이미지가 구현됩니다. style 속성에 float 속성과 left 값을 추가합니다.</p>
<br>
<p><img src="https://dasima.xyz/wp-content/uploads/2018/09/img-float-3.png" style="float:right;">right를 입력하면 태그의 오른쪽으로 이미지가 정렬됩니다.</p>