💡 퀵 접속: htm.kr/img

HTML5 Img 태그 사용법

1. Img 태그란?

Img 태그는 HTML 문서에서 이미지를 삽입하는 태그입니다. 웹 페이지에 이미지를 표시하고, alt 속성을 통해 이미지에 대한 대체 텍스트를 제공하여 접근성을 향상시킵니다.

2. 기본 구조

Img 태그의 기본 사용법

<img src="image.jpg" alt="이미지 설명">

<img src="logo.png" alt="회사 로고" width="200" height="100">

<img src="photo.jpg" alt="사진" loading="lazy">

3. 자주 사용되는 속성

속성 설명 예시
src 이미지 소스 URL <img src="image.jpg">
alt 대체 텍스트 <img alt="설명">
width 이미지 너비 <img width="300">
height 이미지 높이 <img height="200">
loading 지연 로딩 설정 <img loading="lazy">

4. 실제 사용 예제

<article class="product">
    <div class="product-image">
        <img src="product.jpg" 
             alt="제품 이미지" 
             width="400" 
             height="300"
             loading="lazy"
             class="main-image">
    </div>
    
    <div class="product-thumbnails">
        <img src="thumb1.jpg" 
             alt="제품 썸네일 1" 
             width="100" 
             height="100"
             loading="lazy"
             class="thumbnail">
        <img src="thumb2.jpg" 
             alt="제품 썸네일 2" 
             width="100" 
             height="100"
             loading="lazy"
             class="thumbnail">
    </div>
    
    <div class="product-info">
        <h2>제품명</h2>
        <p>제품 설명...</p>
    </div>
</article>

💡 주의사항

  • alt 속성은 항상 제공해야 합니다.
  • 이미지 크기는 적절하게 지정합니다.
  • 지연 로딩을 활용하여 성능을 최적화합니다.
  • 이미지 포맷과 크기를 최적화합니다.
  • 접근성을 고려한 마크업을 사용합니다.

5. 스타일링 예제

<style>
    .product-image {
        margin-bottom: 20px;
    }
    
    .main-image {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .product-thumbnails {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .thumbnail {
        cursor: pointer;
        border: 2px solid transparent;
        border-radius: 4px;
        transition: border-color 0.3s;
    }
    
    .thumbnail:hover {
        border-color: #4CAF50;
    }
    
    .thumbnail.active {
        border-color: #4CAF50;
    }
    
    /* 반응형 이미지 */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 이미지 로딩 효과 */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    img[loading="lazy"].loaded {
        opacity: 1;
    }
</style>

6. 성능 최적화 팁

  • 이미지 크기와 포맷을 최적화합니다.
  • 지연 로딩을 활용합니다.
  • 적절한 이미지 크기를 지정합니다.
  • WebP 등 최신 이미지 포맷을 사용합니다.
  • CDN을 활용하여 이미지 전송을 최적화합니다.

7. 검증 및 테스트

Img 태그가 올바르게 사용되었는지 확인하는 방법:

  • W3C 마크업 검증 서비스 사용
  • 이미지 로딩 테스트
  • 다양한 브라우저에서 테스트
  • 반응형 디자인 테스트
  • 접근성 검사 도구 사용