[HTML] img 태그

728x90

목 차

• 1. <img> 태그란?
• 2. 속성
  • 2-1. src (source)
  • 2-2. alt (alternative text)
  • 2-3. width, height
  • 2-4. loading
  • 2-5. title
  • 2-6. srcset, sizes
  • 2-7. usemap, ismap
• 3. 마무리

 

1. <img> 태그란?

• HTML의 <img> 태그는 웹 페이지에 이미지를 삽입할 때 사용됩니다. 이 태그는 단일 태그로 닫기 태그가 없습니다. <img> 태그는 웹 페이지에 이미지 파일을 포함시킬 수 있는 가장 기본적인 방법입니다.

 

2. 속성

2-1. src (source)

• 이미지를 표시할 경로를 지정하는 필수 속성입니다.
• 상대 경로 또는 절대 경로를 사용할 수 있습니다.

<img src="image.jpg" alt="Description of image">

 

 

2-2. alt (alternative text)

• 이미지가 로드되지 않거나 시각장애인이 화면 리더기를 사용할 경우 대체 텍스트로 제공됩니다.
• 이미지의 의미나 목적을 설명해주는 짧은 텍스트로 설정하는 것이 좋습니다.
• 검색엔진 최적화 (SEO)에 큰 도움이 됩니다.

<img src="image.jpg" alt="This is a description of the image.">

 

 

2-3. width, height  

• 이미지의 너비와 높이를 지정합니다.
• 픽셀(px) 또는 퍼센트(%)로 값을 설정할 수 있습니다.
• 설정하지 않으면 이미지의 원래 크기가 사용됩니다. (기본값: 원래 크기)

<img src="image.jpg" alt="Description of image" width="300" height="200">

 

 

2-4. loading

• 이미지 로드 방식을 제어합니다.
• lazy: 이미지가 화면에 보일 때까지 로드하지 않음.
• eager: 페이지 로드 시 즉시 이미지를 로드.

<img src="image.jpg" alt="Description of image" loading="lazy">

 

 

2-5. title

• 이미지에 마우스를 올리면 표시되는 툴팁 텍스트를 설정합니다.

<img src="image.jpg" alt="Description of image" title="This is a tooltip text">

 

 

2-6. srcset, sizes

• 반응형 이미지를 제공할 때 사용됩니다. 다양한 해상도나 화면 크기에 맞는 이미지를 미리 제공하여 최적화된 이미지를 로드할 수 있게 합니다.
• srcset: 다양한 크기의 이미지를 지정합니다.
• sizes: 브라우저가 이미지를 선택할 기준을 제공하는 속성입니다.

<img src="image.jpg"
     srcset="image-400.jpg 400w, image-800.jpg 800w"
     sizes="(max-width: 600px) 400px, 800px"
     alt="Description of image"
>

 

 

2-7. usemap, ismap

• usemap: 이미지에 클릭할 수 있는 영역(핫스팟)을 정의하는 이미지 맵을 연결할 때 사용합니다.
• ismap: 서버에서 이미지를 클릭한 좌표를 처리할 때 사용됩니다.

<img src="image.jpg" alt="Clickable map" usemap="#mapname">

 

3. 마무리

• 이미지 파일의 경로가 올바른지 확인해야 합니다.
• alt 속성은 필수적으로 설정하여 시각적 정보가 부족한 사용자를 배려하는 것이 좋습니다. 또한 검색엔진 최적화 (SEO)에 큰 도움이 됩니다.

 

---

 

관련글 목록

[HTML] a 태그

[HTML] ol 태그

[HTML] ul 태그