HTML 이미지
HTML 이미지는 <img> 태그를 사용합니다. <img> 태그는 empty tag이기 때문에 닫는 태그 없이 단독으로 사용합니다.
이미지 주소
이미지 주소는 src 속성 뒤에 입력합니다.
<img src="http://43.200.228.225/wp-content/uploads/2018/09/img-src-ufo-1.png">이미지 대체 속성
대체 속성이란 이미지를 설명하는 문구를 말합니다. alt 속성 뒤에 삽입합니다. 검색 로봇은 이미지가 아닌 alt 에 적힌 문구를 통해 이미지를 해석합니다.
alt 속성에 적힌 값은 사람 눈에는 보이지 않지만, 컴퓨터는 인지할 수 있습니다. SEO를 올리고 싶다면, alt 속성을 적는 것이 좋습니다.
<img src="http://43.200.228.225/wp-content/uploads/2018/09/img-src-ufo-2.png" alt="UFO에 납치되는 동물">이미지 크기 조절
이미지 크기 조절은 가로는 width 속성, 세로는 height 속성을 사용합니다. 가로나 세로 한 값만 적을 경우 다른 쪽의 비중은 원본 이미지 비율에 맞춰집니다.
<img src="http://43.200.228.225/wp-content/uploads/2018/09/img-src-width-height.png" width="300px;" height="200px;">이미지에 링크 삽입
이미지에 링크 삽입은 이미지 주소와 이동할 웹페이지 주소 두 가지가 필요합니다.
먼저 <img> 태그의 src 속성에 정상적인 이미지 주소 값을 입력합니다. <a>태그의 href 속성 뒤에 이미지 클릭시 이동할 웹페이지 주소를 입력합니다. <img> 태그는 <a> 태그 사이에 위치하면 됩니다.
<a href="http://43.200.228.225/html-tutorials/" target="_blank">
<img src="http://43.200.228.225/wp-content/uploads/2018/09/img-link.png">
</a>이미지 Float
float 속성은 이미지를 태그와 좌우 나란히 배치할 때 사용합니다. 나란히 배치를 원하는 태그에 이미지 태그와 src 주소를 먼저 삽입합니다. 삽입된 이미지 속성에 style과 float값을 입력합니다.
<p><img src="http://43.200.228.225/wp-content/uploads/2018/09/img-float-3.png" style="float:left;">left를 입력하면 태그의 왼쪽에 이미지가 구현됩니다. style 속성에 float 속성과 left 값을 추가합니다.</p>
<br>
<p><img src="http://43.200.228.225/wp-content/uploads/2018/09/img-float-3.png" style="float:right;">right를 입력하면 태그의 오른쪽으로 이미지가 정렬됩니다.</p>