[HTML] 개념 정리 5 :: 이미지 <img> 태그와 속성

HTML 이미지 태그: <img> 태그와 속성 사용법

HTML에서 <img> 태그는 웹페이지에 이미지를 삽입하는 데 사용됨. <img>는 독립 태그(Self-closing Tag)로, 닫는 태그가 필요 없음.

---

1. <img> 태그 기본 구조

<img> 태그는 이미지를 삽입하기 위해 src와 alt 속성이 필수적으로 사용됨.

기본 구조

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

---

2. 주요 속성

(1) src (Source)

이미지의 경로를 지정함.

• 로컬 파일: src="images/example.jpg"
• 외부 URL: src="https://example.com/image.jpg"

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

(2) alt (Alternative Text)

이미지가 표시되지 않을 때 대신 표시되는 텍스트. 접근성 향상과 SEO 최적화에 중요함.

<img src="images/example.jpg" alt="산 풍경 이미지">

(3) width와 height

이미지의 가로(width)와 세로(height) 크기를 픽셀(px) 또는 퍼센트(%) 단위로 설정.

<img src="images/example.jpg" alt="이미지" width="300" height="200">

• 비율을 유지하려면 하나의 속성만 설정하거나 CSS를 사용하는 것이 좋음.

  <img src="images/example.jpg" alt="이미지" style="width:300px; height:auto;">

(4) border

이미지에 테두리를 추가. HTML5에서는 CSS로 대체 권장.

<img src="images/example.jpg" alt="이미지" border="2">

CSS를 사용하는 예:

<img src="images/example.jpg" alt="이미지" style="border:2px solid black;">

(5) align

이미지의 정렬을 설정. HTML5에서는 CSS로 대체 권장.

• left: 왼쪽 정렬
• right: 오른쪽 정렬
• middle: 텍스트 중간 정렬
• top: 텍스트 위에 정렬
• bottom: 텍스트 아래 정렬

<img src="images/example.jpg" alt="이미지" align="left">

CSS를 사용하는 예:

<img src="images/example.jpg" alt="이미지" style="float:left; margin-right:10px;">

---

3. 이미지 위치 및 크기 설정

(1) 중앙 정렬

CSS를 사용하여 이미지 중앙 정렬.

<div style="text-align:center;">
  <img src="images/example.jpg" alt="중앙 이미지">
</div>

(2) 반응형 이미지

이미지가 화면 크기에 따라 조정되도록 설정.

<img src="images/example.jpg" alt="반응형 이미지" style="max-width:100%; height:auto;">

(3) 특정 크기로 설정

<img src="images/example.jpg" alt="이미지" style="width:200px; height:150px;">

(4) 이미지 배치

CSS를 활용하여 이미지와 텍스트를 배치.

<p>
  <img src="images/example.jpg" alt="왼쪽 이미지" style="float:left; margin-right:10px;">
  이미지 설명 텍스트가 왼쪽 이미지 옆에 표시됩니다.
</p>

---

4. 종합 예제

<div style="text-align:center;">
  <img src="images/example.jpg" alt="풍경 이미지" 
       style="width:300px; height:auto; border:3px solid gray; margin:20px;">
</div>

---

결론

<img> 태그는 웹페이지에 이미지를 삽입하는 핵심 요소로, src와 alt 속성이 필수임. CSS를 활용하면 크기, 위치, 테두리 등을 보다 유연하게 조정할 수 있음. 이러한 설정을 활용해 더 깔끔하고 사용성 높은 이미지를 구현할 수 있음.