07. HTML-Typing the contents(Image)

[toc]

4. 웹 문서에 내용 입력하기

4-4. 이미지 삽입하기

이번 학습에서는 웹 문서에 이미지를 삽입하는 방법을 중심으로 <img> 태그의 구조와 필수 속성, 그리고 이미지 크기 조절 방식에 대해 정리하였다.

---

1. <img> 태그

이미지를 웹 문서에 삽입하려면 반드시 <img> 태그를 사용해야 한다.

<img src="이미지 주소" alt="대체 텍스트">

• <img> 태그는 단일 태그로, 닫는 태그가 필요 없다.

---

2. src 속성 — 이미지 경로 지정

• src는 이미지 파일의 경로를 지정하는 속성으로 반드시 포함되어야 한다.
• 경로는 웹 문서 기준으로 상대적으로 설정한다.

✅ 같은 폴더에 이미지가 있을 경우

<img src="파일이름.jpg">

✅ 다른 폴더에 이미지가 있을 경우

<img src="이미지폴더/파일이름.jpg">

---

3. alt 속성 — 대체 텍스트

• 이미지를 불러올 수 없을 때 사용자에게 이미지를 설명하는 텍스트를 제공한다.
• 웹 접근성을 높이는 데 중요하며, 스크린 리더 사용자에게도 유익하다.

<img src="dog.jpg" alt="강아지 사진">

• 단, alt 텍스트는 단순 부연 설명이 아닌 이미지 안에 포함된 텍스트 정보를 전달하는 데에 중점을 둔다.
• 배경 장식용 이미지에는 alt 속성을 비워두거나 생략 가능하다.

---

4. width, height 속성 — 크기 조절

• 이미지는 기본적으로 원본 크기로 출력되지만, width와 height 속성을 사용해 크기를 조절할 수 있다.
• 두 속성 중 하나만 지정하면 자동 비율로 나머지가 계산된다.

✅ 퍼센트(%) 단위

• 브라우저 창 크기 기준으로 비율 설정

  <img src="example.jpg" width="50%">
  

✅ 픽셀(px) 단위

• 정확한 크기를 지정할 때 사용

  <img src="example.jpg" width="300" height="200">
  

---

📌 정리
이미지를 적절히 활용하면 웹 페이지의 전달력을 높일 수 있다. <img> 태그와 src, alt, width, height 속성에 대한 이해는 시각 콘텐츠 중심의 문서 작성에 필수적이다.

---

End