CSS 백그라운드 이미지 및 엘리먼트 비율로 조절하기, aspect ratio

이미지나 특정 엘리먼트를 비율에 맞게 조절하는 방법을 알아봅니다. 이때 이미지가 img 태그가 아닌 background를 사용한 경우라면? 이 요소의 크기를 비율로 줄여서 썸네일처럼 보이려고 하는 경우 어떻게 하면 될까요?

# css를 사용하여 비율로 늘리거나 줄이는 방법, aspect ratio

앞에서 말한 것처럼 비율을 사용하는 방법을 알아두면 매우 유용합니다. 특히 이미지나 동영상을 작게 보이게 하거나 크게 보이게 하는 경우 많이 사용됩니다. 왜냐면 한 방향인 width, height 값만 조절하면 화면에 나타나는 영상이나 이미지가 흐릿하게 보이기 때문이죠.

"이미지나 동영상을 비율대로 줄이거나 늘리는 데 사용"

img 태그를 사용하는 경우 width 또는 height auto값을 사용하면 자동으로 비율로 조절될 수 있습니다. 하지만 background로 적용된 경우 이야기가 달라지죠. 먼저 css에서 아직까지는 비율로 조절할 수 있는 css 프로퍼티가 존재하지 않습니다. 그런 이유로 다른 방법을 사용해야 합니다.

! padding-을 사용하여 비율로 줄이기

이때 사용하는 방법이 바로 padding-top 또는 padding-bottom을 이용하는 방법입니다. 무슨 뜻이냐면 padding의 값이 width를 기반으로 생성할 수 있기 때문입니다. 아래의 이미지를 봐주세요.



위의 노란색 이미지는 2 : 1의 width, height 비율을 가지고 있으며 아래처럼 width: height css 프로퍼티를 사용했죠.

하지만 아래의 주황색은 다릅니다. 위 비율인 2:1을 유지하기 위해서 padding 값을 사용하여 만들었죠. 이처럼 원하는 비율은 무엇이든 만들 수 있습니다. 2:1 뿐만 아니라 16:9 역시 가능합니다. 그럼 어떻게 할까요?

! padding을 사용한 비율 요소 만들기, 예제

먼저 위와 같이 비율로 만들기 위해서 알아두어야 할 사항이 있습니다. padding을 사용해야 한다는 하나의 조건과 다른 하나로 엘리먼트가 두 개 필요하다는 것입니다. 즉 하나는 container가 되며 padding은 그 내부의 자식 요소가 됩니다.

이에 위 요소에 어떻게 css를 작성하는지는 아래에서 확인해봅니다.

여기까지 다 입니다. 보시면 padding의 기준을 부모의 width로 가지기 위해서 container 엘리먼트 요소가 필요했습니다. 그 외에는 50%의 비율을 유지하기 위해 padding 값을 50%로 설정하였죠. 이제 padding의 값을 효과적으로 사용하는 방법을 좀 더 알아봅니다.

! 비율에 calc()를 사용하는 방법

위 예제에서는 2:1 비율을 위해서 padding 값으로 50%를 설정하였습니다. 즉 비율의 값을 구할 때 width / height * 100% 의 값을 사용한 것이죠.

Ex ) 200 / 100 -> 50%


하지만 항상 이렇게 계산기를 가지고 다닐 필요는 없겠죠. 이때 calc()을 사용하면 편리합니다. css의 calc()는 계산을 수행하는 유용한 방법입니다. 위 예제를 이제 calc()을 사용하여 바꾸어보겠습니다. inner 부분만 바꾸어 주면 가능합니다.

코드를 보면 width에 0.3인 30%를 곱한 값을 calc()에서 설정하였습니다. 이제 어떻게 나타나는지 알아봅니다.
 
-- 30% 적용한 예제 --

위의 도형이 바로 30%를 적용한 코드입니다. 훨씬 간단합니다.

-- 16 : 9  비율 사용하기 --

이번에는 16 : 9 비율을 적용해보았습니다. css는 다음처럼 사용하면 됩니다.

매우 간단합니다. 이제 어떤 비율이든 쉽게 설정할 수 있게 되었습니다.

! 반응형 웹사이트인 경우(동적으로 변하는 width)

참고로 반응형인 경우에는 고려해야할 사항이 존재합니다. 즉 width 값이 줄어든 경우를 생각해야하므로 아래와 같이 calc()의 값을 200px 고정이 아닌 width: 100%로 설정해야 할 것입니다.

이 경우 부모 width값에 따라 상대적으로 달라지게 적용할 수 있습니다.

! inner 안에 텍스트 작성하기

참고로 .inner 안에 글을 작성하려면 경우 또 다시 엘리먼트를 추가하여 사용합니다. 이때 inner에는 postion: relative를 설정하고 글을 작성하는 태그는 position: absolute;를 사용할 수 있을 것입니다.

아래와 같이 태그를 inner 안에 추가하면 됩니다.

# 마치면서

여기까지 비율을 사용하여 엘리먼트나 배경 이미지를 조절하는 방법에 대하여 알아보았습니다. 요즘에는 백그라운드(background) 속성을 더 많이 사용하는 추세입니다. 다양한 설정 옵션들이 존재하여 원하는 대로 변형할 수도 있고 엘리먼트 내부에서 사이즈 등을 조절하는 것이 더 유용하기 때문이죠. 이런 이유로 위와 같이 비율로 조절하는 방법은 꼭 알아두시기 바랍니다.