Post

HTML) img 태그의 모든 것

Posted
Preview Image
By parksohyunnn 7 min read

안녕하세요, 코딩을 사랑하는 여러분! 이번 포스팅에서는 HTML의 img 태그에 대해 깊이 있게 알아보겠습니다. 이 글을 통해 img 태그의 정의, 사용 방법, 주요 속성, 그리고 실전 예제까지 다뤄보겠습니다. 끝까지 함께 해주세요!

img 태그 정의

HTML의 img 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다. 이 태그는 빈 태그로, 내용이 없고 닫는 태그가 필요하지 않습니다. 이미지는 웹 페이지에서 중요한 시각적 요소로, 정보 전달, 사용자 경험 향상, 브랜드 인지도 구축 등에 사용됩니다.

img 태그의 기본 사용법

img 태그를 사용하여 이미지를 삽입하는 기본 구문은 다음과 같습니다:

1

<img src="image.jpg" alt="Image description">
  • src: 이미지를 가져올 경로를 지정합니다.
  • alt: 이미지를 불러올 수 없을 때 표시될 대체 텍스트를 지정합니다. 접근성 향상을 위해 반드시 사용해야 합니다.

img 태그의 주요 속성

img 태그는 다양한 속성을 지원하여 이미지를 더욱 효과적으로 표시할 수 있습니다. 주요 속성들은 다음과 같습니다:

  • src: 이미지를 가져올 경로입니다. 절대 경로 또는 상대 경로를 사용할 수 있습니다.
  • alt: 이미지를 불러올 수 없을 때 표시될 대체 텍스트입니다.
  • width 및 height: 이미지를 표시할 너비와 높이를 지정합니다. 픽셀(px) 단위 또는 백분율(%)을 사용할 수 있습니다.
  • title: 이미지에 마우스를 올렸을 때 표시될 툴팁 텍스트입니다.
  • loading: 이미지의 로딩 방식을 지정합니다. lazy 값을 사용하면 이미지가 필요할 때 로드됩니다.
  • srcset: 반응형 이미지를 위해 다양한 해상도의 이미지 파일을 지정할 수 있습니다.
  • sizes: srcset과 함께 사용되며, 브라우저가 선택할 이미지 크기를 지정합니다.

img 태그 사용 예제

다양한 속성을 활용하여 이미지를 삽입하는 예제들을 살펴보겠습니다.

기본 이미지 삽입

1

<img src="example.jpg" alt="An example image">

이미지 크기 지정

1

<img src="example.jpg" alt="An example image" width="300" height="200">

툴팁 텍스트 추가

1

<img src="example.jpg" alt="An example image" title="Example Image">

반응형 이미지

1

<img src="example.jpg" alt="An example image" srcset="example-480w.jpg 480w, example-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px">

지연 로딩 이미지

1

<img src="example.jpg" alt="An example image" loading="lazy">

img 태그 사용 시 주의사항

  • 대체 텍스트(alt): 접근성을 위해 반드시 대체 텍스트를 제공해야 합니다.
  • 반응형 이미지: 다양한 디바이스에서 최적의 해상도를 제공하기 위해 srcset과 sizes 속성을 사용하는 것이 좋습니다.
  • 지연 로딩: 페이지 로딩 속도를 향상시키기 위해 loading=”lazy” 속성을 사용하여 이미지 지연 로딩을 구현할 수 있습니다.
  • 실전 예제: 웹 페이지에 이미지 갤러리 만들기 이제 간단한 이미지 갤러리를 만들어보겠습니다. 예제에서는 여러 이미지를 사용하여 반응형 이미지 갤러리를 구현할 것입니다.

HTML 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery</title>
    <style>
        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .gallery img {
            width: 100%;
            height: auto;
        }
        .gallery-item {
            flex: 1 1 calc(33.333% - 10px);
        }
        @media (max-width: 600px) {
            .gallery-item {
                flex: 1 1 calc(50% - 10px);
            }
        }
    </style>
</head>
<body>
    <h1>Responsive Image Gallery</h1>
    <div class="gallery">
        <div class="gallery-item">
            <img src="image1.jpg" alt="Image 1">
        </div>
        <div class="gallery-item">
            <img src="image2.jpg" alt="Image 2">
        </div>
        <div class="gallery-item">
            <img src="image3.jpg" alt="Image 3">
        </div>
        <div class="gallery-item">
            <img src="image4.jpg" alt="Image 4">
        </div>
        <div class="gallery-item">
            <img src="image5.jpg" alt="Image 5">
        </div>
        <div class="gallery-item">
            <img src="image6.jpg" alt="Image 6">
        </div>
    </div>
</body>
</html>

이 코드는 간단한 반응형 이미지 갤러리를 생성합니다. 브라우저의 너비에 따라 갤러리 항목의 크기가 조정됩니다.

마무리

오늘은 HTML의 img 태그에 대해 깊이 있게 알아보았습니다. img 태그는 웹 페이지에서 이미지를 삽입하는 데 필수적인 요소이며, 다양한 속성을 사용하여 이미지를 효과적으로 관리할 수 있습니다. 이번 포스팅이 여러분의 웹 개발 여정에 도움이 되었기를 바랍니다. 궁금한 점이 있거나 더 알고 싶은 내용이 있다면 댓글로 남겨주세요. 즐거운 코딩 되세요! 😊

다음 시간에는 더 흥미로운 주제로 찾아뵙겠습니다. 감사합니다!

HTML
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github