반응형 웹사이트의 레이아웃은 브라우저 창의 너비에 따라 화면 요소의 너비도 늘어나거나 줄어든다
크기가 고정되어 있는 이미지를 화면 너비에 따라 높이와 너비를 바뀌도록 하는 것이 가변 이미지다
가변 이미지를 지정하는 기본 방법
이미지와 같은 멀티미디어 요소는 값을 지정하지 않으면 원래 크기대로 삽입됨
width: 100% 로 지정하면 화면 너빗값에 따라 이미지의 너비가 줄어들거나 늘어나게 되지만 원래 크기 이상으로 늘어났을 경우에는 화질이 깨지므로 원래 이미지의 너빗값 이상으로 늘어나지 않도록 max-width 속성을 사용함 height: auto 를 사용하면 너빗값에 따라 높이가 자동으로 조절됨
기본방법
img{
max-width:100%;
height:auto;
}
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>가변 이미지</title>
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1">
<style>
img {
display:block;
margin-bottom:10px;
}
.img1 {
width:100%;
}
.img2 {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="jump.png" class="img1">
<img src="jump.png" class="img2">
</body>
</html>
가변 이미지에서 생길 수 있는 문제점
고화질의 이미지를 크기만 줄여서 모바일 기기에 표시할 경우 화면에 보이는 모습은 작아보여도 이미지 파일을 다운로드 하는데 오랜 시간이 걸리는 문제가 종종 발생한다
<img> 태그의 srcset 속성
이 속성은 기본으로 사용할 이미지 파일 경로를 지정하고, px 너비나 px 밀도에 맞는 여러 이미지를 함께 지정할 수 있음
기본 형식
<img src="기본 이미지" srcdet="파일1[,파일2, 파일3, ....]">
픽셀 너비 서술자 함께 사용하기
화면 너비에 따라 이미지 파일을 다르게 지정할 때 ‘파일 이름, 너비w’ 형식을 사용한다
예를 들어 large.png,1024w 는 화면 너비가 1024px 이상에서 large.png 파일을 표시한다는 의미이다
<img src="sky.png" srcset="sky-large.png 1024w,sky-medium.png 640w,sky-small.png 320w">
위 예시는 화면 너비가 1024px 이상인 경우에는 sky-large, 640px 이상인 경우엔 sky-medium, 320px 이상인 경우엔 sky-small을 화면에 표시한다 srcset을 지원하지 않으면 sky.png를 표시한다
픽셀 밀도 서술자 함께 사용하기
화면에 표시되는 객체의 크기는 px 밀도가 증가할수록 더 작아진다
기본 px 밀도의 이미지를 1x로 한다면 밀도 2x 일때는 이미지를 크게 만들던지 하여 px 밀도에 따라 이미지를 따로 지정할 수 있다
<img src="sky.png" srcset="sky-large.png 3x,sky-medium.png 2x,sky-small.png">
<picture> 태그
<picture> 태그와 <source> 태그를 함께 사용하면 화면 해상도뿐 아니라 화면 너비에 따라 다른 이미지 파일을 함꼐 사용해 화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지 파일을 표시할 수 있다
속성 설명
| media | srcset 에 지정한 이미지를 표시하기 위한 조건 |
| sizes | 파일 크기 |
| srcset | 이미지 파일 경로 |
| type | 파일 유 |
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 08-1 원페이지 사이트 만들기 (0) | 2026.02.19 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-4 가변 동영상 (0) | 2026.02.18 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-2 미디어 쿼리 사용하기 (0) | 2026.02.16 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 07-1 뷰포트와 미디어 쿼리 알아보기 (0) | 2026.02.16 |
| [ FE ] Web1 HTML (0) | 2026.02.15 |