[HTML 이미지 & 미디어 삽입] #01 <img> 태그 완벽 정리

 

 

안녕하세요 토스트데브입니다.
이번 시간에는 웹 페이지에 이미지를 삽입할 수 있는 HTML 태그인 <img>에 대해 알아보겠습니다.
웹 디자인, 콘텐츠 구성, 시각적 커뮤니케이션에서 빠질 수 없는 이미지 삽입!
실습과 함께 기초부터 속성까지 확실하게 익혀보세요 💡

 

 

📌 <img> 태그란?

<img> 태그는 HTML에서 이미지를 삽입할 때 사용하는 태그입니다.
닫는 태그가 없는 빈 요소(self-closing)이며, 반드시 src 속성이 필요합니다.

<img src="image.jpg" alt="예시 이미지" />

 

 

🔧 주요 속성 설명

속성명	설명	필수 여부
src	이미지 파일의 경로(URL 또는 상대경로)	✅ 필수
alt	이미지 설명(스크린 리더, 대체 텍스트)	✅ 접근성 필수
width	이미지 가로 크기 (px 또는 %)	선택
height	이미지 세로 크기 (px 또는 %)	선택
title	마우스를 올렸을 때 툴팁 표시	선택
loading	이미지 로딩 방식 (lazy, eager)	선택

 

 

🖼️ 기본 예제

<img src="/images/dog.jpg" alt="강아지가 웃고 있는 사진" width="300" height="200" />

 

• src: 이미지 파일 위치
• alt: 이미지가 보이지 않을 경우 대체 텍스트
• width, height: 픽셀(px) 또는 % 단위로 크기 조절

 

 

✅ 왜 alt 속성이 중요할까?

 

• 웹 접근성(Accessibility)을 위해 반드시 사용해야 합니다.
• 이미지가 깨지거나 시각장애인을 위한 스크린 리더가 내용을 인식할 수 있도록 도와줍니다.
• SEO(검색엔진 최적화) 측면에서도 alt 텍스트는 검색엔진이 이미지를 해석하는 데 도움을 줍니다.

 

 

💡 비율 유지 팁

width 또는 height 중 하나만 설정하면 원본 비율을 유지하며 자동으로 조정됩니다.

<img src="cat.jpg" width="400" alt="고양이 사진" />

 

 

 

 

⏱️ loading="lazy" 속성

페이지 진입 시 모든 이미지를 한 번에 로딩하지 않고, 사용자가 스크롤해서 화면에 도달할 때 로드되게 하는 속성입니다.

<img src="large-image.jpg" alt="풍경 사진" loading="lazy" />

📌 페이지 속도 개선과 사용자 경험 향상에 도움이 됩니다!

 

 

🚫 절대 하지 말아야 할 실수

• alt="" 속성을 아예 빼는 경우 → 접근성 낮음
• 이미지로만 중요한 정보 전달 → 텍스트 대안이 없어지므로 SEO에 불리
• 너무 큰 이미지 사용 시 로딩 속도 저하 → 사이즈 최적화 필수!

 

 

🧩 <img> 태그와 함께 쓰는 예시

<figure>
  <img src="sunset.jpg" alt="해질 무렵의 바다 풍경" width="600" />
  <figcaption>서해안의 멋진 일몰</figcaption>
</figure>

<figure>와 <figcaption>을 함께 사용하면 이미지에 설명을 추가할 수 있어 의미 있는 구조를 만들 수 있습니다.

 

 

📝 마무리

<img> 태그는 가장 기본적이면서도 가장 많이 사용되는 HTML 태그 중 하나입니다.
접근성과 SEO를 고려한 alt 속성 사용, 불필요한 대용량 이미지 로딩 방지, 반응형 웹을 위한 유연한 이미지 크기 조정 등을 함께 고려하여 효율적이고 의미 있는 이미지 삽입을 실습해보세요!

 

#HTML #img태그 #이미지삽입 #웹디자인기초 #웹개발입문 #프론트엔드기초 #웹접근성 #SEO기초 #코딩입문 #HTML기초 #toastdev #웹퍼블리싱 #웹강의 #html이미지 #html태그정리