넓이(Width)에 비례하는 높이(Height) 만들기

qpress 2020년 3월 24일 21

일반적으로 HTML Element의 높이(Height) 값은 고정된 픽셀 값을 지정하게 되는데, 넓이(Width)가 가변적인 반응형 UI에서는 원하는 형태를 유지하기 어렵게 된다. 넓이 대비 비율, 즉, 종횡비를 맞추는 방식이 필요한데, 현재 CSS에 이에 대한 속성이 존재 하지 않기 때문에 약간의 Trick을 쓰거나 JavaScript를 이용해야 한다.

CSS Padding 활용

See the Pen Aspect Ratio 1:1 by Andy Jung (@Samchogo) on CodePen.

container Class 의 padding-top을 100% 설정하고 내부 요소의 포지션을 절대값(absolute)로 지정, container를 가득 채우는 방식으로 비율 적용을 했다. padding-top을 100%로 설정 했기 때문에, 넓이(Width)와 같은 비율로 높이가 자동 설정 되는 것이다.

See the Pen Aspect Ratio 2:1 by Andy Jung (@Samchogo) on CodePen.

padding-top을 50% 설정하면 넓이 대비 50%, 즉, 2:1의 비율로 높이가 지정된다.

YouTube 영상을 Embed 시킬때 YouTube 의 가로세로 비율과 동일한 비율로 iframe 등을 지정해 주어야 실제 영상의 크기와 자연스럽게 조화가 되는데, YouTube의 비율은 16:9이기 때문에 padding-top을 56.25% 설정해 주면 된다.

QPRESS(qp.css, qp.js) 활용 – Class Only

qp.css는 비율로 높이를 쉽게 지정할 수 있는 Class가 정의 되어 있다. qp.css가 인클루드 되어 있다면 아래와 같이 간편하게 사용 할 수 있다.

<div class="qp-aspect50">
    <div class="qp-inner">
       2:1 height
    </div>
</div>

qp-aspect50은 높이를 넓이의 50%서 설정한다는 뜻이며, qp-aspect10~qp.aspect100까지 사용할 수 있다. 또한 YouTube 크기인 16:9는 qp-aspect-wide를 사용하면 된다. qp-aspect의 하위 요소는 반드시 qp-inner class를 사용해야 하면 모든 컨텐츠는 qp-inner 내부에 들어가야 한다.

QPRESS(qp.css, qp.js) 활용 – qp.js

qp.js는 보다 간결하게 높이 비율을 정할 수있는 방법을 제공한다.

<div class="as-ratio" data-ratio="30">
    content...
</div>

해당 요소에 ‘as-ratio’라는 Class를 추가하고 별도의 Custom Attribute인 ‘data-ratio’을 통해 비율을 지정한다. 위에서는 30이 지정되어 30%가 높이로 설정되는데, 이러한 비율 조정은 qp.js가 담당한다.

만약, 모바일 등 Medium 브라우저에서 높이 비율을 다르게 지정하고 싶다면 ‘data-ratio-md’ Attribute 속성을 추가하면 된다.

<div class="as-ratio" data-ratio="30" data-ratio-md="100">
    content...
</div>