HTML의 img 태그는 웹 페이지에 이미지를 삽입할 때 사용하는 태그입니다.
이는 자체적으로 닫히는 태그이며, 이미지를 페이지에 표시할 때 필요한 여러 속성들 설정할 수 있습니다.
기본적으로 이미지의 경로, 대체 텍스트(alt 속성), 너비와 높이 등을 지정할 수 있습니다.
Table of Contents
img 기본 사용
<img src="image.jpg" alt="설명 텍스트">- src: 이미지를 불러올 URL을 지정합니다.
- alt: 이미지가 로드되지 않거나 시각장애인용 스크린 리더에서 읽을 수 있는 대체 텍스트를 제공합니다.
img 주요 속성
src (source)
이미지를 불러올 경로를 지정합니다.
<img src="logo.png">alt (alternative text)
이미지가 로드되지 않거나 접근성 목적으로 이미지의 내용을 설명하는 텍스트입니다.
<img src="logo.png" alt="웹사이트 로고">width & height
이미지의 너비와 높이를 설정합니다.
단위는 픽셀(px)이나 백분율(%)로 설정할 수 있습니다.
<img src="photo.jpg" alt="사진" width="300" height="200">title
이미지에 마우스를 올렸을 때 나타나는 툴팁을 설정합니다.
<img src="icon.png" alt="아이콘" title="아이콘 이미지">loading
페이지에서 이미지를 로드할 때 로딩 방식을 설정합니다.
lazy를 사용하면 화면에 이미지를 표시할 때 지연 로딩되어 성능을 개선할 수 있습니다.
<img src="large-image.jpg" alt="큰 이미지" loading="lazy">img 크기 조정
이미지의 크기를 CSS로 조정할 수도 있지만, HTML 태그의 width와 height 속성으로 직접 지정할 수 있습니다.
<img src="example.jpg" alt="예시 이미지" width="500" height="auto">- width: 이미지의 너비를 설정
- height: 이미지의 높이를 설정
- auto: 자동으로 비율을 맞추어 이미지 크기를 조정
예제 1: 로고 이미지
웹사이트의 헤더에 로고 이미지를 추가할 때 사용합니다.
<header>
<img src="bear.png" alt="My Website Logo" width="120" height="150">
</header>
예제 2: 갤러리 이미지
이미지를 여러 개 나열하여 갤러리 형식으로 배치할 때 사용합니다.
<section class="gallery">
<img src="image1.jpg" alt="갤러리 이미지 1" width="300">
<img src="image2.jpg" alt="갤러리 이미지 2" width="300">
<img src="image3.jpg" alt="갤러리 이미지 3" width="300">
</section>
예제 3: img 링크 추가
이미지를 클릭하면 다른 페이지로 이동하게 할 때 a 태그와 결합하여 사용합니다.
<a href="https://shinyks.com">
<img src="product.jpg" alt="제품 사진" width="300">
</a>예제 4: 배경 이미지
이미지를 배경으로 사용하고 CSS로 스타일링하는 방법입니다.
<div style="background-image: url('background.jpg'); height: 400px; width: 100%;">
<p>배경 이미지가 설정된 영역</p>
</div>예제 5: 다국적 사이트에서의 이미지
이미지에 특정 언어로 된 텍스트를 추가하거나, 사이트의 언어에 맞는 이미지를 표시하려면 alt 속성과 lang 속성을 잘 활용할 수 있습니다.
<img src="welcome_en.jpg" alt="Welcome" lang="en">
<img src="bienvenue_fr.jpg" alt="Bienvenue" lang="fr">
예제 6: 응답형 img
응답형 이미지란 이미지의 크기가 화면 크기에 따라 달라지도록 하는 방법입니다.
이때 srcset과 sizes 속성을 사용하여 여러 크기의 이미지를 지정할 수 있습니다.
<img src="small.jpg"
alt="이미지"
srcset="large.jpg 1024w, medium.jpg 768w, small.jpg 320w"
sizes="(max-width: 600px) 100vw, 50vw">- srcset: 다양한 해상도의 이미지를 나열하여, 화면 크기나 해상도에 맞는 이미지를 자동으로 선택하도록 합니다.
- sizes: 화면 너비에 따라 사용할 이미지의 크기를 지정합니다.
예제 7: 스타일 적용
이미지에 CSS를 적용해 다양한 스타일을 만들 수 있습니다.
예를 들어, 둥근 모서리, 그림자, 테두리 등을 추가할 수 있습니다.
<img src="webp.webp" alt="사진" width="200px">
<img src="webp.webp" alt="사진" width="200px" style="border-radius: 50%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
위의 코드에서 적용한 스타일은 이미지를 원형으로 만들고, 거기에 그림자를 추가했습니다.
정리
이처럼 img 태그는 다양한 속성과 스타일을 통해 웹 페이지에 이미지를 효율적으로 삽입하고 제어할 수 있는 중요한 HTML 태그입니다.