[HTML] HTML에서 이미지를 사용하는 방법

HTML에서 이미지를 사용하는 방법

HTML에서 이미지를 사용하는 방법은 여러 가지가 있으며, 각각의 방법은 웹 페이지 내에서 이미지를 다르게 표현할 수 있게 합니다. 기본적인 이미지 삽입부터 시작하여, 좀 더 복잡한 이미지 처리 방법까지 자세히 알아보겠습니다.

1. 기본 이미지 삽입

HTML에서 <img> 태그를 사용하여 이미지를 삽입합니다. <img> 태그는 닫는 태그가 필요 없는 빈 태그(empty tag)입니다.

<img src="image.jpg" alt="설명 텍스트">

• src 속성: 이미지 파일의 경로를 지정합니다.
• alt 속성: 이미지의 대체 텍스트를 제공합니다. 이미지가 로드되지 않을 때나 스크린 리더가 사용될 때 표시됩니다.

2. 이미지 사이즈 조절

이미지의 크기를 조정하려면 width와 height 속성을 사용합니다.

<img src="image.jpg" alt="설명 텍스트" width="1024" height="1024">

<img src="image.jpg" alt="설명 텍스트" width="500" height="500">

달리 그림

사이즈를 변경한 달리 그림

 

3. 이미지 링크 만들기

이미지를 클릭하면 다른 페이지나 사이트로 이동하게 하려면 <a> 태그 안에 <img> 태그를 넣습니다.

<a href="http://example.com">
  <img src="image.jpg" alt="설명 텍스트">
</a>

4. 이미지 배경으로 사용하기

CSS를 이용해서 HTML 요소의 배경으로 이미지를 삽입할 수 있습니다.

<div style="background-image: url('image.jpg');">
  <!-- 콘텐츠 -->
</div>

5. 반응형 이미지

<picture> 태그와 <source> 태그를 사용하여 다양한 화면 크기에 따라 다른 이미지를 표시할 수 있습니다.

<picture>
  <source media="(min-width: 800px)" srcset="large-image.jpg">
  <source media="(min-width: 400px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="설명 텍스트">
</picture>

6. 이미지 최적화

웹 페이지 로드 시간을 개선하기 위해 이미지 크기를 최적화하고, 필요에 따라 이미지를 지연 로드할 수 있습니다.

<img src="image.jpg" alt="설명 텍스트" loading="lazy">

7. 이미지 맵(Image Maps)

하나의 이미지에 여러 링크를 설정할 수 있는 이미지 맵을 만들 수 있습니다.

<img src="image.jpg" alt="설명 텍스트" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="http://example.com/1" alt="1번 링크">
  <area shape="circle" coords="45,58,60" href="http://example.com/2" alt="2번 링크">
</map>

8. SVG 이미지 사용하기

SVG는 벡터 기반의 이미지 포맷으로, <svg> 태그를 사용하여 직접 HTML 내에 코드를 삽입할 수 있습니다.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

정리

HTML에서 `<img>` 태그로 이미지를 삽입하고 `src`, `alt` 속성으로 경로와 대체 텍스트를 정의합니다. 이미지 크기는 `width`, `height`로 조정하며, `<a>` 태그로 링크를 만듭니다. CSS의 `background-image`로 배경 설정, `<picture>`와 `<source>`로 반응형 이미지를 구현하고, `loading="lazy"`로 로딩 최적화를 할 수 있습니다.