[HTML/CSS] 반응형 %를 이용해서 가로세로 비율을 맞춘 div 박스 생성하는법

반응형 작업을 하는 경우에 div 박스에 width 값은 %로 줄 수 있지만 height 값은 %가 적용 되지않아서 비율을 어떻게 맞춰야하나 고민했던 경우가 있었는데요.

이럴 때 높이대신에 div에 padding-bottom:을 이용해서 % 값을 주면 간단하게 해결할 수 있습니다. 

 

div{width:50%; margin:0 auto; padding-bottom:30%; background-color:#eee;}

<div></div>

<가로 50% 세로 30% 비율의 div 박스 >

 

만약에 박스 안에 컨텐츠를 넣을 경우엔 감싸는 div에 position: relative;를 주고

컨텐츠는 absolute로 주어서 넣어주시면 됩니다!

.wrap{width:50%; margin:0 auto; padding-bottom:30%; background-color:#eee; position:relative;}
.cnts{position:absolute; top:0; left:0; font-size:15px;width:100%; height:100%; text-align:center;}

<div class="wrap"><div class="cnts">컨텐츠를 넣을 경우</div></div>

 

컨텐츠가 들어간 반응형 DIV 박스

 

간단하지만 유용한 꿀팁 이였습니다 ㅎㅎㅋㅋ