5.1 srcset 속성
적응형 이미지는 반응형이고 최적화된 웹 페이지를 만드는 데 중요한 역할을 해. 다양한 크기와 해상도의 이미지를 기기와 보기 조건에 맞게 로드할 수 있도록 해줘서 성능과 사용 편의성을 향상시켜 줘. HTML에서 적응형 이미지를 구현하는 주요 도구는 srcset과 sizes 속성이야.
srcset 속성은 여러 크기나 해상도를 가진 이미지 소스를 지정하는 데 사용돼. 브라우저는 사용자 기기에 맞는 최적의 이미지를 선택해.
문법:
<img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">
설명:
src: 기본 이미지 경로를 지정해줘srcset: 여러 이미지와 그 특징들을 콤마로 구분해서 포함하고 있어-
1x,2x: 스케일 배율을 나타내 (예:1x는 일반 해상도,2x는 고밀도 픽셀 기기용)
srcset 사용 예:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>srcset 사용 예시</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
alt="적응형 이미지 예시">
</body>
</html>
코드 설명:
src="images/default.jpg": 기본 이미지를 지정해줘-
srcset: 각 이미지의 너비를 픽셀 단위로 지정한 목록 (480w,800w,1200w). 브라우저는 뷰포트 너비에 맞춰 적절한 이미지를 선택해
5.2 sizes 속성
sizes 속성은 srcset과 함께 사용되어 다른 보기 조건에서 이미지의 너비를 지정해. 이 속성을 통해 브라우저는 더 정확하게 적절한 이미지를 선택할 수 있어.
문법:
HTML
<img src="default.jpg"
srcset="image1.jpg 480w, image2.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="Example Image">
설명:
sizes: 보기 조건 및 해당 이미지의 너비 목록을 포함해(max-width: 600px) 480px: 뷰포트 너비가600px이하일 경우,480px너비 이미지를 사용해800px: 그 외 모든 경우엔800px너비 이미지를 사용해
sizes 사용 예:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sizes 사용 예시</title>
<style>
.responsive-img {
width: 100%;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="적응형 이미지 예시">
</body>
</html>
코드 설명:
sizes는 다양한 보기 조건에 맞는 이미지 너비를 정의해:
- 뷰포트가
600px이하일 경우,480px너비 이미지를 사용해 - 뷰포트가
900px이하일 경우,800px너비 이미지를 사용해 - 그 외 모든 경우엔
1200px너비 이미지를 사용해
5.3 적응형 이미지
다양한 화면 크기에 맞춘 적응형 이미지
srcset과 sizes 속성을 사용해 다양한 화면 크기에 이미지를 적응시키는 예제를 만들어보자.
예제:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>적응형 이미지</title>
<style>
.responsive-img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<img
class="responsive-img"
src="images/default.jpg"
srcset="images/image-small.jpg 480w,
images/image-medium.jpg 800w,
images/image-large.jpg 1200w"
sizes="(max-width: 600px) 480px,
(max-width: 900px) 800px,
1200px"
alt="적응형 이미지 예시">
</body>
</html>
코드 설명:
src="images/default.jpg": 기본 이미지를 지정해줘srcset: 다양한 너비로 세 가지 버전의 이미지를 정의해 (480w,800w,1200w)-
sizes: 여러 조건에 맞는 이미지 너비를 정의해:600px이하 —480px너비 이미지 사용900px이하 —800px너비 이미지 사용900px이상 —1200px너비 이미지 사용
-
.responsive-img: CSS 클래스는 이미지의 너비를100%로 하고 자동 높이로 설정해서 가용 공간을 차지하며 비율을 유지해
GO TO FULL VERSION