본문으로 건너뛰기
실습하기

img 태그

<img> 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그입니다.

img 태그의 주요 속성으로 src, alt, width, height가 있습니다.


src​

이미지의 주소(URL)를 지정하는 필수 속성입니다. URL은 동일한 웹 사이트 내 다른 이미지를 가리키거나, 외부 웹 사이트에서 제공하는 이미지를 가리킬 수 있습니다. src 속성 없이 <img> 태그를 사용하면 이미지가 표시되지 않습니다.

img 태그 src 속성
<img src="https://example.com/myimage.jpg" />

alt​

이미지의 대체 텍스트를 나타내는 속성입니다. 이미지 로딩에 실패하거나, 시각 장애인을 위한 음성 서비스를 제공하기 위한 "대체 텍스트(alternative text)"로 사용합니다. 필수적인 속성은 아니지만 SEO(검색 엔진 최적화)에 필수적인 속성입니다.

대체 텍스트 설정
<img src="https://picsum.photos/300" alt="해질 무렵의 바다 경치" />

width와 height​

이미지의 너비(Width)와 높이(Height)를 지정하는 속성으로, 기본 단위는 픽셀(px)입니다. 픽셀은 화면의 해상도에 따른 하나의 점을 의미합니다. width와 height를 지정하지 않으면 이미지 원본 크기로 표시됩니다.

이미지 크기 설정
<img src="https://picsum.photos/300" width="300" height="200" />

img 태그 사용법​

  1. src, alt 속성 지정
이미지 태그 기본 사용
<img src="https://picsum.photos/300" alt="프로필 사진" />

  1. width, height로 이미지 크기 지정
이미지 크기 설정
<img
  src="https://picsum.photos/300"
  alt="랜덤 이미지"
  width="200"
  height="150"
/>

img 태그 정리​

  • src 속성을 통해 이미지의 주소(URL)를 지정합니다.

  • alt 속성은 이미지의 설명이나, 이미지가 표시되지 않을 때 사용자에게 보여줄 텍스트를 제공합니다.

  • 이미지의 크기를 조절하려면 width와 height 속성을 활용합니다.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!