HTML <img> 태그 사용법, 웹 페이지에 이미지 추가하기

HTML <img> 태그 사용법, 웹 페이지에 이미지 추가하기

이미지는 웹 페이지에서 중요한 시각적 요소로, 콘텐츠를 더욱 풍부하게 만들고 사용자 경험을 개선합니다. HTML에서는 <img> 태그를 사용하여 웹 페이지에 이미지를 손쉽게 추가할 수 있습니다. 이 글에서는 <img> 태그의 기본 사용법부터 고급 속성까지 상세히 설명하고, 웹 페이지에 이미지를 효율적으로 추가하는 방법을 알아보겠습니다.

 

 

목차

1. <img> 태그 개요
2. 이미지 경로 설정
3. <img> 태그의 필수 속성
4. 이미지 크기 조정
5. 반응형 이미지 사용
6. 접근성을 고려한 <img> 태그 사용
7. 실전 예제

 

1. <img> 태그 개요

<img> 태그는 HTML에서 이미지를 웹 페이지에 삽입하는 데 사용됩니다. 이 태그는 다른 HTML 태그와 달리 닫는 태그가 없으며, 단독으로 사용됩니다. <img> 태그를 통해 이미지를 추가하면 사용자는 해당 이미지를 화면에서 직접 볼 수 있습니다.

<img> 태그는 이미지 파일의 경로를 지정하는 src 속성과, 이미지 설명을 위한 alt 속성을 필수적으로 포함해야 합니다. 이러한 속성들에 대한 자세한 내용은 다음 항목에서 다루겠습니다.

 

 

2. 이미지 경로 설정

<img> 태그에서 이미지를 불러오기 위해서는 src 속성에 이미지 파일의 경로를 지정해야 합니다. 경로 설정은 이미지가 웹 페이지와 동일한 디렉토리에 위치하는지, 다른 서버에 위치하는지에 따라 다릅니다.

• 상대 경로: 이미지 파일이 HTML 파일과 동일한 디렉토리나 하위 디렉토리에 있을 때 사용됩니다.

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

• 절대 경로: 이미지 파일이 다른 서버에 위치할 때 사용됩니다. 전체 URL을 지정해야 합니다.

  <img src="https://www.example.com/images/example.jpg" alt="예제 이미지">

상대 경로는 프로젝트 파일을 쉽게 관리할 수 있는 장점이 있고, 절대 경로는 외부 이미지를 불러올 때 유용합니다. 하지만 외부 서버의 이미지를 사용할 경우, 해당 서버의 상태에 따라 이미지가 표시되지 않을 수 있으므로 주의가 필요합니다.

 

 

3. <img> 태그의 필수 속성

<img> 태그에는 여러 속성이 있지만, src와 alt 속성은 필수적으로 포함해야 합니다. 이 속성들은 이미지의 위치와 대체 텍스트를 지정하는 데 사용됩니다.

• src 속성: 이미지를 불러올 경로를 지정합니다. 이 속성은 반드시 포함되어야 하며, 올바른 경로를 지정하지 않으면 이미지가 표시되지 않습니다.
• alt 속성: 이미지가 로드되지 않거나 화면 읽기 프로그램을 사용하는 사용자를 위해 이미지의 대체 텍스트를 제공하는 속성입니다. 이 속성은 접근성을 높이는 데 필수적이며, 검색 엔진 최적화(SEO)에도 도움이 됩니다.

  <img src="example.jpg" alt="사이트 로고">

 

 

4. 이미지 크기 조정

<img> 태그를 사용할 때, 이미지의 크기를 조정하여 페이지 레이아웃에 맞출 수 있습니다. 이를 위해 width와 height 속성을 사용합니다. 이러한 속성들은 픽셀 단위로 크기를 지정할 수 있습니다.

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

위 예제에서는 이미지의 너비를 300px, 높이를 200px로 지정했습니다. 이미지의 비율을 유지하면서 크기를 조정하려면 한쪽 속성만 설정하거나, CSS를 활용하여 크기를 지정하는 것이 좋습니다.

 

 

5. 반응형 이미지 사용

현대 웹 디자인에서는 다양한 디바이스에 맞게 이미지를 자동으로 조정하는 반응형 디자인이 필수적입니다. <img> 태그에서 반응형 이미지를 만들기 위해서는 CSS의 max-width 속성을 활용할 수 있습니다.

<img src="example.jpg" alt="예제 이미지" style="max-width: 100%; height: auto;">

이렇게 설정하면 이미지가 부모 요소의 너비를 넘지 않도록 크기가 자동으로 조정되며, 화면 크기에 따라 유동적으로 크기가 변경됩니다. height: auto; 속성은 이미지의 비율을 유지하면서 높이를 조정하는 데 유용합니다.

 

 

 

 

6. 접근성을 고려한 <img> 태그 사용

웹 접근성은 모든 사용자가 웹 콘텐츠에 접근할 수 있도록 하는 중요한 요소입니다. <img> 태그를 사용할 때도 이러한 접근성을 고려해야 합니다. 앞서 언급한 alt 속성은 접근성을 향상시키는 중요한 역할을 합니다.

이미지 설명을 제공하여 시각장애인이나 화면 읽기 프로그램을 사용하는 사용자도 콘텐츠를 이해할 수 있도록 해야 합니다. 이미지가 단순한 장식 용도로 사용될 경우, 빈 alt 속성(alt="")을 사용하여 화면 읽기 프로그램이 해당 이미지를 무시하도록 설정할 수 있습니다.

 

 

7. 실전 예제

이제까지 배운 내용을 바탕으로, 실제 웹 페이지에서 <img> 태그를 사용하는 예제를 살펴보겠습니다. 다음은 웹 페이지에 로고 이미지를 추가하고, 반응형 디자인을 구현하는 예제입니다:

<!-- 로고 이미지 추가 -->
<header>
    <img src="logo.png" alt="사이트 로고" style="max-width: 100%; height: auto;">
</header>

<!-- 본문 이미지 추가 -->
<section>
    <h2>우리의 서비스</h2>
    <img src="service.jpg" alt="우리의 서비스" width="600" height="400">
    <p>우리의 서비스는 고객에게 최고의 가치를 제공합니다.</p>
</section>
    

위 예제에서는 <header> 태그 내부에 사이트 로고를 추가하고, <section> 태그 안에 본문 이미지를 배치했습니다. 로고 이미지는 반응형으로 설정되어 화면 크기에 맞게 조정되며, 본문 이미지는 고정된 크기로 설정되었습니다.

이처럼 <img> 태그를 사용하면 웹 페이지에 다양한 이미지를 쉽게 추가할 수 있으며, 여러 속성과 CSS를 활용하여 원하는 대로 이미지를 조정할 수 있습니다.