Aspect Ratio 비율 계산기 | 시각적 화면 비율 도구

Aspect Ratio Calculator

정확한 화면 비율을 계산하고 시각적인 프리뷰와 최적의 CSS 코드를 확인하세요.

🎯 Base Ratio

Width Ratio

Height Ratio

📏 Dimensions

Width (px)

Height (px)

가로 또는 세로 값을 변경하면 자동으로 계산됩니다.

PREVIEW

Modern CSS (aspect-ratio)

aspect-ratio: 16 / 9;

Legacy CSS (Padding Hack)


                      .container { position: relative; width: 100%; padding-top:
                      56.25%; }

                      .content { position: absolute; top: 0; left: 0; width:
                      100%; height: 100%; }

📖 사용 방법

Base Ratio: 원하는 비율을 직접 입력하거나 프리셋 버튼을 클릭하여 설정합니다.
Dimensions: 알고 있는 가로 또는 세로 값을 입력하면 비율에 맞는 나머지 수치가 자동 계산됩니다.
Preview: 설정한 비율대로 박스의 모양이 실시간으로 변하며 크기감이 시각화됩니다.
Code: 최신 브라우저용 aspect-ratio 속성과 하위 브라우저 호환성을 위한 padding-top 코드를 모두 제공합니다.

Aspect Ratio 계산 가이드: 완벽한 화면 비율 유지하기

Aspect Ratio(화면 비율) 계산기는 이미지, 비디오, 카드 UI 등 웹 디자인의 다양한 요소들이 모든 기기에서 왜곡 없이 의도한 비율을 유지할 수 있도록 돕는 필수 도구입니다. 반응형 웹에서 가로 너비가 변함에 따라 세로 높이를 자동으로 조절하는 것은 전문적인 레이아웃의 기본입니다.

1. Aspect Ratio(화면 비율)란 무엇인가요?

화면 비율은 가로(Width)와 세로(Height)의 수치 관계를 나타냅니다. 예를 들어 16:9 비율은 가로가 16단위일 때 세로가 9단위임을 의미합니다. 웹에서는 유튜브 비디오(16:9), 고전적인 사진(4:3), 정해진 카드(1:1) 등 다양한 상황에서 비율 유지가 필요합니다.

2. Modern CSS vs Legacy CSS

Modern CSS (aspect-ratio): 최신 브라우저에서는 aspect-ratio: 16 / 9; 한 줄로 비율을 고정할 수 있습니다. 매우 직관적이며 복잡한 HTML 구조가 필요 없습니다.

Legacy CSS (Padding Hack): padding-top의 백분율이 부모 요소의 너비를 기준으로 계산된다는 점을 이용한 방식입니다. 예를 들어 16:9 비율은 padding-top: 56.25%를 주어 구현하며, 모든 브라우저에서 호환됩니다.

3. 실무에서의 활용 사례

가장 대표적인 활용 사례는 반응형 비디오 임베드입니다. 화면 너비에 따라 비디오가 꽉 차게 보이면서도 높이가 비율에 맞춰 늘어나거나 줄어들어야 할 때 필수적입니다. 또한, 이미지 갤러리에서 서로 다른 해상도의 이미지를 격자 형태로 배치할 때, 모든 이미지를 동일한 비율(예: 3:2)로 고정하면 훨씬 정돈된 느낌을 줄 수 있습니다.

4. 도구 사용 팁

사용자가 가로(Width) 값을 입력하면 설정된 비율에 맞는 최적의 세로(Height) 값을 즉시 계산해 줍니다. 반대로 세로 값을 입력해도 가로 값을 알 수 있습니다. 계산된 결과와 함께 제공되는 Modern 및 Legacy 코드를 상황에 맞게 골라 사용하세요. IE 브라우저를 지원해야 하는 프로젝트라면 Legacy 코드를 사용하는 것이 안전합니다.