반응형이 대세가 되어 가고 있습니다.

보통 반응형은 고정된 픽셀을 사용하는 것이 아니라, % 의 가변형 크기로 만들어지는데요.

이럴때, 레이어 등의 비율을 고정하기가 힘들어 집니다.

보통 가로 : 세로가 1:1 인 정사각형을 반응형으로 만든다고 하면, 가로크기는 100% 로 두었을 때 세로크기는 어떻게?! 라는 문제가 생기게 되죠.

그래서 CSS만으로는 해결하지 못하고, 자바스크립트의 힘을 빌리게 됩니다. jQuery를 사용한다면 아래와 같이 되겠지요.

$(document).ready(function() {
    $("div").height($("div").width());
});

위의 코드를 실행하면, 가변적으로 변한 객체의 가로크기 만큼, 세로크기를 조절하게 됩니다.

하지만, 이렇게 자바스크립트를 사용하지 않고도, 오직 CSS만으로 가로 : 세로 비율이 일정한 박스를 만들 수 있습니다.

1:1 비율로 만든다고 할 경우에.

div {
    width: 100%;
    height: 0
    padding-bottom: 100%;
}

이렇게 한다면, 가로 : 세로 가 정확히 1:1 인 정사각형 반응형 박스를 만들 수 있습니다.

높이만큼 아래쪽에 여백을 주는 것이지요.

이상 간단한 CSS 트윅이었습니다!