[CSS] 요소를 일정 비로 감싸기

아래 동영상처럼 특정 요소를 일정한 비율로 반응형으로 감싸고 싶을 때 사용하는 방식입니다.

HTML

<div class="parent">
    <div class="child">Hi!</div>
</div>

CSS

.parent {
    width: 100%;
    padding-bottom: X;
    position: relative;
}

.child {
    position: absolute;
    width: 100%;
    height: 100%;
}

.child {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

요소를 감싸줄 부모 요소가 하나 필요합니다.

"parent"의 padding-bottom(혹은 top) 값을 수정하여 비율을 설정합니다.

요소 내부를 꽉 채우실 거라면 "child"의 첫 번째 항목을 사용하시고, 일정한 위치에 자식 요소를 배치하시고 싶으시다면 두 번째 항목을 적절히 수정하셔서 사용하시면 됩니다.

비 목록

100% - 1:1

75% - 4:3

66.67% - 3:2 (66.66666666666...)

56.25% - 16:9 (유튜브 등의 비디오)

잘 보시면 아시겠지만

100 : x = 원하는 비의 전항 : 원하는 비의 후항

이라는 단순한 식을 이용해 구하실 수 있습니다.

16:9비를 예로 들면

100 : x = 16 : 9

16x = 900

x = 56.25

같은 방식으로 padding-bottom(혹은 top)의 값을 결정해주시면 됩니다.