Img tag and property

이미지 태그는 텍스트 위주의 문서에 활력을 불어넣으며, 정보를 직관적으로 전달하는 핵심적인 역할을 합니다.

---

1. <img> 태그의 기본 정의

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

이 태그는 닫는 태그가 없는 **빈 태그(Empty Tag)**이며, 속성을 통해 이미지의 경로와 정보를 설정합니다.

 

이미지 출처 - https://www.learntosap.com/htmltutorial13.html

---

2. 반드시 알아야 할 핵심 속성 (Required Attributes)

이미지를 제대로 표시하기 위해 꼭 필요한 두 가지 속성입니다.

• src (Source): 이미지 파일의 **경로(URL)**를 지정합니다. 내 컴퓨터의 상대 경로이거나 웹상의 절대 경로일 수 있습니다.
• alt (Alternative Text): 이미지를 표시할 수 없을 때 대신 나타날 대체 텍스트입니다. 시각 장애인을 위한 스크린 리더가 이 내용을 읽어주므로 접근성 측면에서 매우 중요합니다.

---

3. 크기 및 제목 관련 속성

이미지의 외형과 부가 정보를 제어하는 속성들입니다.

• width / height: 이미지의 너비와 높이를 픽셀(px) 단위로 지정합니다. 둘 중 하나만 지정하면 원본 비율에 맞춰 나머지가 자동으로 조절됩니다.
• title: 이미지 위에 마우스를 올렸을 때 나타나는 **설명(툴팁)**을 추가합니다.
• loading: 브라우저가 이미지를 언제 불러올지 결정합니다. lazy를 사용하면 화면에 보일 때쯤 이미지를 로드하여 페이지 속도를 높일 수 있습니다.

---

4. 실전 예제 코드: "고양이 사진 넣기"

다양한 속성을 조합하여 이미지를 최적화하는 방법입니다.

HTML

 

<img src="https://example.com/cat.jpg" 
     alt="잠자고 있는 귀여운 치즈 고양이" 
     width="500" 
     title="이 고양이는 제 친구입니다"
     loading="lazy">

<img src="./images/logo.png" alt="회사 로고">

---

📋 이미지 태그 속성 요약표

속성명	의미	필수 여부	비고
src	이미지 파일 경로	필수	로컬 파일 혹은 웹 URL
alt	대체 텍스트	필수	웹 접근성 및 SEO에 필수
width	이미지 너비	선택	숫자만 입력 (단위 생략)
height	이미지 높이	선택	비율 유지를 위해 하나만 권장
title	툴팁 메시지	선택	마우스 호버 시 노출

---

학습 정리

• **src**는 이미지의 주소, **alt**는 이미지의 설명이다.
• 이미지 크기는 HTML 속성보다는 **CSS(width, height)**로 조절하는 것이 더 유연하고 현대적인 방식이다.
• alt 속성을 비워두지 않는 습관은 좋은 개발자의 기본 덕목이다.

---

웹의 시각 요소인 이미지 태그를 마스터하셨습니다!

---