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

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="해질 무렵의 바다 경치" />

widthheight

이미지의 너비(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 속성은 이미지의 설명이나, 이미지가 표시되지 않을 때 사용자에게 보여줄 텍스트를 제공합니다.

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

다음 내용이 궁금하다면?

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