이미지 삽입의 모든 것! img 태그 완전정복
The Complete Guide to HTML &Tag – Inserting and Styling Images

날짜:

HTML img 태그의 src, alt, title, width 속성 설명 인포그래픽

이미지 삽입의 모든 것! img 태그 완전정복
The Complete Guide to HTML <img> Tag – Inserting and Styling Images

🖼️ img 태그란? (What is the <img> tag?)

HTML에서 <img>는 이미지를 삽입할 때 사용하는 태그입니다.
The <img> tag is used to embed images in an HTML page.

이미지는 텍스트처럼 입력되는 것이 아니라, 외부에서 불러오는 형식이에요.

📄 기본 문법 구조

<img src="이미지경로.jpg" alt="대체 텍스트">
<img src="image.jpg" alt="Description of the image">

🔍 주요 속성 설명

  • src: 이미지 경로 (URL 또는 파일명)
    The source of the image (URL or filename)
  • alt: 이미지가 안 뜰 때 보여주는 글 / 접근성 향상
    Alternative text shown if image fails to load
  • title: 마우스를 올렸을 때 툴팁처럼 뜨는 설명
    Tooltip shown when hovering over the image
  • width / height: 크기 조절 (px 또는 %)
    Controls the size of the image

📸 예시 코드 모음

<img src="logo.png" alt="로고 이미지" width="200">

<img src="profile.jpg" alt="프로필 사진" title="나의 프로필">

🧑‍🦯 웹접근성을 위한 alt 속성 꿀팁

✔️ alt는 시각장애인을 위한 스크린리더가 읽어주는 텍스트예요.
✔️ 정보성 이미지엔 설명을, 단순 디자인 이미지엔 빈 값 `alt=`을 추천합니다.
Use alt text for meaningful images, leave empty if decorative.

💬 Q&A – 자주 묻는 질문

  • Q. 이미지가 안 보여요!
    A. 경로(src)가 잘못됐거나, 파일명이 틀렸을 가능성이 높아요.
    Check if the image file path is correct and case-sensitive.

  • Q. 이미지에 링크 걸 수 있나요?
    A. 당연하죠! <a> 태그 안에 <img> 태그를 넣으면 됩니다.
    Wrap <img> inside <a> to make it clickable.

✅  요약 포인트!

✔️ <img>는 닫는 태그가 없는 단일 태그예요
✔️ alt는 꼭 쓰는 습관, 특히 정보 전달 이미지에 필수!
 ✔️ 크기 지정할 땐 CSS로 제어하면 더 유연하게 관리 가능

🔗 참고 링크

👉 다음 편 예고: HTML 전체 구조 완성하기 - head vs body

HTML 문서의 큰 틀인 head와 body의 역할과 구조! 지니가 뼈대부터 확실히 잡아드릴게요 🏗️

✨ 오늘의 일상에 작은 플러스가 되셨길 바랍니다 ✨
플러스지기 | Plus Keeper🍀