[ CSS 응용 ] 비율에 맞추어 div 반응형 만들기

 

영역의 크기를 설정할때 특정한 비율로

반응형(화면 줄이거나 확대)때에도 유지가 되었으면 할때가 많습니다.

이럴때 사용할 수 있는 CSS코드를 알려드립니다.

 

 

 

padding을 이용한 비율 조정

---

<style>
    .container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    .box {
        background: #f5bb1c;
        margin: 10px 0;
    }
    .box1 {padding-bottom: 200%}
    .box2 {padding-bottom: 100%}
    .box3 {padding-bottom: 75%}
    .box4 {padding-bottom: 56.25%}
    .box5 {padding-bottom: 66.66%}
</style>
<div class="container">
    <div class="box box1">1:2</div>
    <div class="box box2">1:1</div>
    <div class="box box3">4:3</div>
    <div class="box box4">16:9</div>
    <div class="box box5">1.5:1</div>
</div>

 

padding을 이용한 비율 조정은 부모객체의 width값을 기준으로 삼습니다.

위 코드를 보면 부모 객체인 container가 있고 

그 안에 5가지의 box 클래스의 div를 넣었습니다.

각각 1:2, 1:1, 4:3, 16:9, 1.5:1 비율을 주기 위해 개별 클래스도 적용하였습니다.

 

 

기준을 삼는 부모객체의 width값은 최대 500px을 가지고 있으며

width: 100%를 주어 반응형이 가능하도록 적용하였습니다.

그 자식객체에서는 padding을 이용해 높이값을 줄 수 있습니다.

padding-bottom 이나 padding-top을 이용해도 가능합니다.

즉, padding-bottom: 100%는 부모객체 width값이 500px이라면

그대로 1:1비율인 500px이 적용됩니다.

 

 

순서대로 

box1(1:2비율)은 padding-bottom: 200%

box2(1:1비율)은 padding-bottom: 100%

box3(4:3비율)은 padding-bottom: 75%

box4(16:9비율)은 padding-bottom: 56.25%

box5(1.5:1비율)은 padding-bottom: 66.66%

가 됩니다.

 

 

미리보기

 

 

 

 

aspect-ratio를 이용한 비율 조정

---

<style>
    .container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    .box {
        background: #61f51c;
        margin: 10px 0;
    }
    .box1 {aspect-ratio: 1/2;} /*또는 0.5로 표기 가능*/
    .box2 {aspect-ratio: 1;} /*또는 1/1로 표기 가능*/
    .box3 {aspect-ratio: 4/3;}
    .box4 {aspect-ratio: 16/9;}
    .box5 {aspect-ratio: 1.5/1}
</style>
<div class="container">
    <div class="box box1">1:2</div>
    <div class="box box2">1:1</div>
    <div class="box box3">4:3</div>
    <div class="box box4">16:9</div>
    <div class="box box5">1.5:1</div>
</div>

 

이번에는 조금더 직관적으로 사용할 수 있는

aspect-ratio를 이용해서 스타일을 적용해 보겠습니다.

 

 

이전에 사용했던 소스와 동일합니다.

단 padding-bottom으로 주었던 부분을 모두 aspect-ratio로 바꾸었습니다.

아에 더 직관적으로 본인이 사용하고자 하는 비율을 그대로 입력하면 됩니다.

또는 제가 주석을 달아둔것처럼 부모객체의 크기 대비

0.5이면 1:2 비율, 1이면 1:1 비율로 작성도 가능합니다.

 

 

사용하시기에 편하거나 상황에 맞추어 

코딩에서 가능한 방식을 사용하시길 바랍니다.

 

 

미리보기