CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여

CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 티스토리에서 제공하는 티에디션이라고 하는 꾸미기 플랫폼에 보시면 미리보기 썸네일 이미지를 원본비율, 중앙비율, 상단, 하단 등 기준에 맞춰서 보여지게 설정할 수 있는데, 여기에서 쓰이는 원본비율이 바로 contain 이고 중앙비율이 cover 입니다. 말로는 잘 모를 수 있으니 바로 예시를 들어보겠습니다. 먼저 예시에 사용할 이미지를 두개 올리겠습니다.



img01출처 : 구글 이미지 검색


img02출처 : 구글 이미지 검색


이렇게 두개를 올렸구요, 이제 이것을 활용해서 contain과 cover의 쓰임을 살펴보겠습니다.


Background-size : contain


Background-size : cover

먼저 HTML 마크업 구조 입니다. div를 여러개 만들었습니다. 가로형태의 div 2개, 세로형태의 div 2개 이며, 이것이 한 쌍이고 총 두 쌍이 존재합니다. 이제 스타일을 만들어 주겠습니다.


@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');

/*RESET*/
* { margin: 10px; padding: 0; }
body { font: 17px 'Nanum Gothic', sans-serif; }
a { text-decoration: none; color: #404040; }
li { list-style: none; }
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이 원본비율로 설정이 되는 것 입니다. 한번 직접 여러가지 사이즈의 이미지를 직접 테스트해 보세요. 그러면 감이 딱 오실 것입니다. 끝.



"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유하기

댓글(0)

Designed by JB FACTORY