반응형 웹에서 이미지 활용 방법
이번 장에서는 반응형 웹에서 이미지 비율을 유지하고, 디바이스 크기에 따라 이미지 용량을 설정하는 방법에 대해 설명하겠다. 생각 외로 반응형 웹을 작업하다 보면 이미지 비율 문제가 많이 대두된다. 커다란 가로로 된 이미지를 작게 줄이게 되면 화소가 깨지게 된다. 이런 문제를 css로 잡아 달라고 한다거나… 4:3 이미지와 9:16 이미지, 1:2 이미지 등 비율이 중구난방인 이미지들을 나열해 놓고 서로의 비율이 완벽하게 유지되게 해달라고 하기도 한다. css는 포토샵이 아니다.
이러한 문제점을 가지고 이 글을 찾는 사람은 화소가 깨지는걸 포기하든, 가로나 세로 이미지 비율 둘 중 하나를 포기하든 하라. 그것도 안 된다면 어쩔 수 없다. 포토샵으로 이미지를 자르는 수 밖에.
이미지 비율 유지하는 방법
반응형 웹에서 가장 필요한 것 중 하나가 이미지 비율을 유지하는 방법이다. 여러가지 방법이 있겠지만, 실무에서 잘 사용하고 있는 방법을 설명한다.
<div class="imgBox">
<span class="text">text</span>
<p class="img"></p>
</div>
.imgBox {
position: relative
}
.text {
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /*폰트 가운데 정렬*/
font-size: 2em;
padding: 10px 20px;
background: rgba(0, 0, 0, .7);
color: #fff;
z-index: 1
}
.img {
/*패딩으로 높이를 설정하므로 높이는 0으로*/
height: 0;
/*비율을 계산하여 적는다 [(이미지 높이) / (이미지 넓이) * 100 = n%]*/
/*padding-top: 56.25%; 1080/1920*100=56.25%*/
/*계산이 귀찮으니 비율을 바로 적어버린다 (강추)
clac( 이미지 넓이 / 비율)*/
padding-top: calc(1920 / 16 * 9); /*16:9*/
background: url(../images/img10.jpg) no-repeat;
background-size: contain;/*비율에 따라 이미지가 늘어난다*/
}
이미지 리사이징 - 용량
srcset
<img srcset="images/small.png 400w,
images/medium.png 700w,
images/large.png 1000w"
sizes="(max-width: 401px) 400px,
(max-width: 700px) 7000px,
1000px"
src="images/large.png"
alt="IMAGE">
정의
브라우저에게 제시할 이미지 목록과 그 크기를 정의하는 속성. 브라우저의 사이즈가 변경될 때마다 이미지 크기가 변하는게 아니라 맨 처음 브라우저의 크기에 따라 이미지가 랜더링 된다.
언제 사용해야 할까?
반응형 웹이 아닌 모바일과 같이 작은 화면에 적절한 용량의 이미지를 제공해야한다. 모바일 사용자가 데스크탑 사용자와 같이 아주 큰 용량의 이미지를 렌더링하려면 더 많은 비용을 지불해야 하기 때문이다.
picture
<picture>
<source srcset="large.png" media="(min-width: 1000px)"><!--고 해상도-->
<source srcset="medium.png" media="(min-width: 700px)"><!--중 해상도-->
<source srcset="small.png" media="(min-width: 400px)"><!--저 해상도-->
<img src="large.png" alt="이미지"><!--필수항목!!-->
</picture>
정의
브라우저는 각각의 source 요소를 고려해 적절한 이미지를 제공하며 지원하지 않는 경우(주요 고객 익스플로러) img 태그의 src 속성에 정의된 이미지를 렌더링한다.
언제 사용해야 할까?
브라우저의 사이즈에 따라 이미지가 랜더링 되므로 반응형 웹이 적합하다.
Explore more like this
반응형 타이포그래피 어떻게 할 수 있을까?
웹은 모바일, 태블릿, 노트북, 데스크탑 등 다양한 화면 크기에 맞춰 사용된다. 모바일도 종류에 따라 화면 크기가 다르기에 고려해야 할 것이 많다. responsible 태그를 통해 반응형 웹에서 적용이 가능한 이미지, 표...
반응형 웹에서 테이블 처리는 어떻게 해야 할까?
반응형에서 table을 쓰지 않고, ul li 또는 div로 만드는 경우가 많다. 그러나 table이 반드시 필요한 예도 있다. 그럴 때 사용할 수 있는 두 가지 방법을 소개한다. 여러 가지로 응용이 가능하니...