CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여
CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 티스토리에서 제공하는 티에디션이라고 하는 꾸미기 플랫폼에 보시면 미리보기 썸네일 이미지를 원본비율, 중앙비율, 상단, 하단 등 기준에 맞춰서 보여지게 설정할 수 있는데, 여기에서 쓰이는 원본비율이 바로 contain 이고 중앙비율이 cover 입니다. 말로는 잘 모를 수 있으니 바로 예시를 들어보겠습니다. 먼저 예시에 사용할 이미지를 두개 올리겠습니다.
이렇게 두개를 올렸구요, 이제 이것을 활용해서 contain과 cover의 쓰임을 살펴보겠습니다.
<div id="div">
<h2>Background-size : contain</h2>
<div class="bg01"></div>
<div class="bg02"></div>
<div class="bg03 vertical"></div>
<div class="bg04 vertical"></div>
<hr>
<h2>Background-size : cover</h2>
<div class="bg05"></div>
<div class="bg06"></div>
<div class="bg07 vertical"></div>
<div class="bg08 vertical"></div>
</div>먼저 HTML 마크업 구조 입니다. div를 여러개 만들었습니다. 가로형태의 div 2개, 세로형태의 div 2개 이며, 이것이 한 쌍이고 총 두 쌍이 존재합니다. 이제 스타일을 만들어 주겠습니다.
/*RESET*/
* {
margin: 10px;
padding: 0;
}
hr {
margin: 20px 0;
visibility: hidden;
}
h2 {
clear: both;
}
/*BODY*/
#div > div {
float: left;
width: 300px;
height: 150px;
border: 1px solid #333;
box-sizing: border-box;
}
#div .vertical {
width: 150px;
height: 300px;
}
#div .bg01 {
background: url(../images/img01.jpg) no-repeat center center/contain;
}
#div .bg02 {
background: url(../images/img02.jpg) no-repeat center center/contain;
}
#div .bg03 {
background: url(../images/img01.jpg) no-repeat center center/contain;
}
#div .bg04 {
background: url(../images/img02.jpg) no-repeat center center/contain;
}
#div .bg05 {
background: url(../images/img01.jpg) no-repeat center center/cover;
}
#div .bg06 {
background: url(../images/img02.jpg) no-repeat center center/cover;
}
#div .bg07 {
background: url(../images/img01.jpg) no-repeat center center/cover;
}
#div .bg08 {
background: url(../images/img02.jpg) no-repeat center center/cover;
}이렇게 꾸며보았습니다. 가로형태의 div 크기는 300 x 150 픽셀 사이즈이며, 세로는 가로사이즈의 반대입니다. 그리고 CSS 속성에 보시면 contain과 cover가 어떻게 사용되는지 확인하실 수 있습니다. 따로 사용도 됩니다. 아래는 사용 예시 입니다.
background-size: cover;
background-size: contain;
이렇게 됩니다. 위의 CSS 마크업에서는 사이즈 요소를 따로 마크업하지 않고, background 요소에 같이 사용했습니다. 둘 다 사용 가능한 방법이므로 참고하시면 됩니다. 그러면 결과를 보겠습니다.
See the Pen background - contain, cover by rgy0409 (@rgy0409) on CodePen.
보시면 어떤 차이점이 있는지 확인 가능하실겁니다. 처음에 티에디션 썸네일의 경우를 말씀드렸는데, cover가 중앙비율, contain이 원본비율로 설정이 되는 것 입니다. contain의 경우는 이미지 전체가 보여지도록 설정이 됩니다. 이때 div의 크기에 따라서 이미지가 전체에 꽉 들어차지 못할수도 있습니다. 반면 cover는 div 영역 안에 백그라운드 이미지가 빈 틈 없이 매워지게 하는 가장 효과적인 방법입니다. 하지만 이미지의 일부가 잘리는 단점이 있습니다. 보편적으로 cover는 이미지의 가장 짧은 선분을 기준으로 꽉 찹니다. 왜냐하면 선분이 긴 쪽을 기준으로 한다면 div 영역에 꽉차게 할 수 없기 때문입니다. 한번 직접 여러가지 사이즈의 이미지를 직접 테스트해 보세요. 그러면 감이 딱 오실 것입니다.
개인적으로는 cover 옵션을 많이 사용합니다. 지정해놓은 영역 안에 백그라운드 이미지로서 빈 틈 없이 나오게 만들 수 있기 때문입니다. 물론 이미지 영역 일부가 잘리는 부작용이 있지만 어쩔 수 없지요. 물론 지정한 영역에 이미지를 꽉 채우는 방법은 또 있습니다. 하지만 지정한 영역과 이미지의 비율이 똑같아야 합니다. 만약 둘 중 하나라도 틀린다면 이미지 왜곡이 일어납니다. 끝.
