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

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 태그 사용법​

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"
/>

다음 내용이 궁금하다면?

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