이미지 태그란, 말 그대로 이미지 파일을 웹 상에서 보여주기 위해 사용하는 HTML 태그이다.

이미지를 보여주는 용도로 사용하는 img 태그는 보여줄 이미지에 대한 속성을 작성할 수 있다.

속성 src alt loading width height
용도 이미지 경로 대체 텍스트 및 이미지 설명 지연로딩 여부 가로 길이 세로 길이

<aside> 💡 alt 속성에 대해서 해당 이미지를 제공하는 서버쪽에서 문제가 생겨서 제공받지 못하는 경우 보여준다. 그리고 검색엔진이나 시각 장애인이 인식할 수 없는 이미지에 대해 설명해주는 역할이기에 필수로 지정해주는 것이 좋다.

Untitled

</aside>

<html>
	<body>
    <h1>예쁜 가을 사진</h1>

    <img
      src="<https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_640.jpg>"
      alt="가을 사진"
    />
  </body>
</html>

위의 코드를 실행하면, 아래처럼 웹에 출력된다.

Untitled

그리고 이미지의 가로 혹은 세로 길이를 조정하려면 width, height 속성을 사용하여 크기를 조정할 수 있다. 아래 코드는 이미지를 가로 300픽셀, 세로 200픽셀로 지정한 코드이다.

<aside> 💡 픽셀(Pixel) 이란?

웹 페이지에서 요소의 크기를 지정하는 데 사용됩니다. 하나의 픽셀은 디스플레이 화면에서 작은 점으로 표시되는 화소(pixel)의 단위이다.

px 단위는 고정된 크기를 가지며, 브라우저에서는 화면 해상도에 따라 픽셀 수가 달라질 수 있다.

</aside>

<html>
	<body>
    <h1>예쁜 가을 사진</h1>

    <img
      src="<https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072821_640.jpg>"
      alt="가을 사진"
			width="300px"
			height="200px"
    />
  </body>
</html>

Untitled