HTML 이미지 태그(img) 사용 방법

안녕하세요. 지오입니다. 오늘은 HTML에서 이미지 태그를 사용해 화면에 이미지를 출력하는 방법에 대해 알아보도록 하겠습니다. 웹 페이지에 이미지를 추가하기 위해 img 태그를 사용할 때는 src 와 alt 속성을 함께 부여해줘야 합니다. 사용 방법은 다음과 같습니다.

<img src="img.jpg" alt="landscape">

참고로, 이미지를 사용할 때 이는 실제로 HTML 페이지에 삽입되는 것이라기 보다는 웹페이지에 이를 연결해 표현해 준다고 보는 것이 정확합니다.

img 태그와 함께 사용되는 속성들

img 태그와 가장 먼저 사용하는 속성은 이미지 파일의 위치를 지정해 주는 src 속성인데요. 이뿐만 아니라, width, height 등을 통해 이미지의 폭과 높이를 조절할 수 있습니다.

 

이미지에 부여되는 alt 속성은 Alternative Text라는 의미로 이미지가 깨지거나 할 때, 대신 출력되는 텍스트라 할 수 있습니다. 마지막으로 title이라는 속성을 추가하면, 마우스를 이미지 위로 올리면 해당 텍스트가 표시되는 효과를 낼 수 있습니다.

<img src="img.jpg" width="400" height="300" alt="landscape" title="Mountain">

img 태그에 링크 걸기

이미지에 링크를 걸 수도 있습니다. 이때는 간단히 이미지 태그를 a 태그로 감싸주면 됩니다.

<a href="https://developerjio.tistory.com"> 
    <img src="smile.jpg" alt="smiling Jio">
</a>

이미지 왼쪽 또는 오른쪽에 띄우기

이미지를 문단의 왼쪽 혹은 오른쪽에 넣고 싶을 때도 있죠. 그럴때는 float 속성을 사용하면 됩니다.

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>