css 반응형 정사각형 만들기

요즘은 홈페이지 대세가 반응형 인지라 ㅜ,.ㅡ

반응형에 맞게끔 작업을 하려면 %를 이용한 사이즈 작업을 해줘야 한다. 

하지만 width는 %로 사이즈 정리를 해준다지만 height는 ???????

물론 미디어 쿼리 를 이용해 각 해상도 마다. width 값 과 height 값을 주어도 되지만 그런 귀찮은 일을 피하고자.....편법으로

위와 같이 %로 사이즈를 주는 방법은

<style>

.test01 {width:20%; padding-bottom:20%; background:#f00}

</style>

<div class="test01"></div>

라고 주면 된다. 

test

위와 같이  안에 내용이 들어갈 경우

<style>

.test01 {position:relative; width:20%; padding-bottom:20%; background:#f00}

.test02 {position:absolute;}

</style>

<div class="test01">

    <div class="test02">test</div>

</div>

position 값으로 해결해주면 된다.

test

마지막으로 안에 내용을 가운데 정렬을 할 경우

<style>

.test01 {position:relative; width:20%; padding-bottom:20%; background:#f00}

.test02 {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; width:30%;height:30%; background:#fff}

</style>

<div class="test01">

    <div class="test02">test</div>

</div>

이렇게 해주면 된다. 단, height값이 없을 경우 100%로 인식하게 된다. 텍스트만 넣을 경우 에는 width 값 대신 text-align:center을 넣어 주고 font-size값과 height 값을 맞춰주면 된다.