화면비(종횡비)는 가로와 세로의 비례를 16:9처럼 두 수로 적은 것입니다. 디자이너는 이미지를 자를 때, 영상 편집자는 내보내기 크기를 고를 때, 프런트엔드 개발자는 이미지나 임베드가 로드되기 전에 자리를 확보할 때 씁니다. 이 계산기는 픽셀 단위의 가로와 세로를 최대공약수로 나눠 가장 간단한 정수 비율, 가로÷세로 소수 값, 대응하는 CSS 규칙을 보여 줍니다.
결과 아래의 비율 박스로 모양을 미리 보고, 모서리를 끌어 크기를 바꿀 수 있습니다. 극단적으로 가늘거나 긴 박스는 보기 편하도록 크기가 제한되므로 정확한 비율은 숫자로 확인하세요. 가로와 세로는 0.001부터 100,000까지, 소수 셋째 자리까지 입력할 수 있으며 모든 계산은 브라우저 안에서 이루어집니다.
새 가로를 입력하면 맞는 세로를, 새 세로를 입력하면 맞는 가로를 계산해 줍니다. 이미지 파일을 건드리지는 않으므로 나온 숫자를 편집기나 스타일시트에 직접 적용하면 됩니다.
사용 방법
가로 입력
가로를 픽셀로 입력합니다(0.001부터 100,000까지, 소수 셋째 자리까지). 페이지는 1920으로 시작합니다.
세로 입력
같은 단위로 세로를 입력합니다. 페이지는 1080으로 시작합니다. 두 수의 단위만 같으면 어떤 단위든 상관없습니다.
비율과 소수 값 확인
기약 비율은
16:9, 소수 값은1.7778처럼 나옵니다. 소수 값은 가로÷세로를 소수 넷째 자리까지, 0.1 미만은 유효 숫자 네 자리까지 반올림하고 끝의 0을 지운 것입니다. CSS에서는16 / 9로 씁니다.미리보기 확인
상자로 모양을 미리 확인합니다. 1080 x 1920 같은 세로형 크기는 세로로 긴 상자가 나옵니다. 표준 비율과 정확히 일치하면 표준 비율로 표시합니다. 1920 x 1200은 8:5로 약분되지만 표준 비율은 16:10입니다. 나머지는 가장 가까운 표준 비율과 차이를 표시하며, 0이 아닌 차이가 0.01% 미만이면 <0.01%로 나옵니다.
새 크기로 맞추기
새 가로를 입력하면 새 세로가, 새 세로를 입력하면 가로가 나옵니다. 상자의 모서리를 끌어도 같은 결과입니다. 0.001부터 100,000까지, 소수 셋째 자리까지 입력할 수 있고 계산된 반대쪽이 100,000을 넘으면 거부됩니다. 반대쪽 길이는 정수 픽셀로 반올림합니다. 소수가 나올 때만 배지에 계산값을 소수 넷째 자리까지 함께 보여 줍니다.
CSS 복사
aspect-ratio: 16 / 9;규칙이나 다른 탭의 padding-top 대체 코드, Tailwind 클래스를 복사해 이미지 래퍼, 비디오, iframe, 카드에 적용합니다.
작동 원리
최대공약수로 약분하기
가로 w와 세로 h의 비율은 유클리드 호제법으로 구한 gcd(w, h)로 둘을 나눠 약분합니다. 1920 x 1080은 gcd가 120이라 16:9이고, 1024 x 768은 gcd가 256이라 4:3입니다.
두 수의 공약수가 1뿐이면 더는 약분되지 않아 1366 x 768이 683 / 384가 되는 것처럼 어색한 값이 나옵니다. 수학적으로는 정확하지만, 실제로는 이 크기가 16:9에 근사할 뿐이라는 뜻입니다.
빠진 한쪽 길이 구하기
비율 w:h를 유지하면서 새 가로 W를 정하면 새 세로는 H = W x h / w입니다. 새 세로 H를 정하면 가로는 W = H x w / h입니다. 결과는 정수 픽셀로 반올림한 뒤 다시 확인하세요. 반올림하면 비율이 조금 어긋날 수 있습니다. 도구의 새 크기 입력란이 이 곱셈을 대신해 줍니다.
새 세로 = 새 가로 x (비율의 세로 / 비율의 가로)
1280 x 9 / 16 = 720
새 가로 = 새 세로 x (비율의 가로 / 비율의 세로)
1350 x 4 / 5 = 1080자주 쓰는 비율과 크기
자주 만나는 비율입니다. 아래의 약분 결과는 모두 이 계산기로 얻은 값입니다.
| 크기 | 비율 | 소수 값 | 주요 용도 |
|---|---|---|---|
| 1920 x 1080 | 16 / 9 | 1.7778 | 풀HD 영상, 대부분의 모니터 |
| 3840 x 2160 | 16 / 9 | 1.7778 | 4K UHD |
| 1080 x 1920 | 9 / 16 | 0.5625 | 세로 영상, 스토리 |
| 1024 x 768 | 4 / 3 | 1.3333 | 구형 디스플레이, 슬라이드 |
| 1080 x 1350 | 4 / 5 | 0.8 | 세로형 피드 이미지 |
| 1000 x 1000 | 1 / 1 | 1 | 정사각형 이미지 |
| 2560 x 1080 | 64 / 27 | 2.3704 | 울트라와이드(21:9로 판매) |
| 1200 x 630 | 40 / 21 | 1.9048 | 소셜 공유 미리보기 이미지 |
| 1366 x 768 | 683 / 384 | 1.7786 | 노트북 화면, 16:9에 가깝지만 정확히는 아님 |
CSS aspect-ratio
CSS aspect-ratio 속성(CSS Box Sizing Module Level 4)은 상자의 선호 비율을 지정해 높이가 너비를 따라가게 합니다. 도구는 padding-top 백분율 대체 코드도 제공합니다. 값은 16 / 9처럼 슬래시 양옆에 공백을 두고 씁니다.
실제 예시
1920 x 1080화면비: 16 / 9
소수 비율 (너비 ÷ 높이): 1.7778
CSS: aspect-ratio: 16 / 9;1280 x 720과 3840 x 2160도 같은 16 / 9로 약분됩니다.
1080 x 1920화면비: 9 / 16
소수 비율 (너비 ÷ 높이): 0.5625
CSS: aspect-ratio: 9 / 16;소수 값이 1보다 작으면 상자가 가로보다 세로가 깁니다.
1366 x 768화면비: 683 / 384
소수 비율 (너비 ÷ 높이): 1.7786
CSS: aspect-ratio: 683 / 384;gcd(1366, 768)은 2입니다. 16:9와 0.05% 이내로 가깝지만 정확히 16:9는 아니어서 비율은 683 / 384로 두고, 결과에 가장 가까운 표준 비율이 16:9(0.05% 차이)라고 표시합니다.
1200 x 630화면비: 40 / 21
소수 비율 (너비 ÷ 높이): 1.9048
CSS: aspect-ratio: 40 / 21;흔히 1.91:1이라 부릅니다. 정확히 약분한 비율은 40:21입니다.
0 x 1080, 100001 x 50보다 크고 100,000 이하의 숫자를 입력해 주세요.유효한 크기는 0.001부터 100,000까지이며 소수 셋째 자리까지 입력할 수 있습니다. 0, 음수, 100,000을 넘는 값은 거부되고 소수 자릿수 초과는 별도 오류로 나옵니다. 입력을 고칠 때까지 직전의 유효한 결과가 흐리게 남아 있습니다.
자주 하는 실수
16:9에 가까운 것은 16:9가 아님
1366 x 768이나 1360 x 768 같은 크기는 16:9에 가깝지만 약분하면 전혀 다른 정확한 비율이 됩니다. 레이아웃에서는 어색한 약분 값 대신 의도한 대표 비율(
16 / 9)을 쓰고, 한두 픽셀 차이는object-fit으로 잘라내세요.울트라와이드 이름은 마케팅 용어
21:9로 파는 모니터는 대개 2560 x 1080(64:27)이나 3440 x 1440(43:18)입니다. 계산기는 정확한 값을 알려 주므로 픽셀 단위 정확도가 필요하면 그 값을 쓰세요.
가로·세로 순서가 중요
두 수를 바꾸면 역수 비율이 나오고 소수 값이 1보다 작아집니다. 가로형은 가로÷세로, 세로형은 그 반대입니다.
소수 값은 반올림된 값
소수 값은 넷째 자리까지, 0.1 미만은 유효 숫자 네 자리까지 보여 줍니다. CSS에서는 소수 값보다 약분된 비율을 쓰세요.
16 / 9는 오차가 없습니다.비율 약분과 픽셀 반올림은 다름
33.3 x 25 같은 크기도 받습니다. 소수 셋째 자리까지는 먼저 정수가 되도록 곱한 뒤 약분하므로 333:250이 나옵니다. 새 크기의 반대쪽 길이는 정수 픽셀로 반올림합니다. 16:9에서 가로가 1366이면 세로는 768px로, 배지에는 768.375로 나옵니다. 배지의 계산값도 소수 넷째 자리까지 반올림하므로 순환소수는 근삿값입니다. 픽셀 반올림 뒤 비율을 다시 확인하세요. 계산된 길이가 0.5 미만이면 0px로 반올림됩니다.
자주 묻는 질문
1920x1080의 화면비는 얼마인가요?
16:9입니다. 1920과 1080은 모두 120으로 나누어떨어지고 16과 9가 남습니다. 소수 값은 1.7778입니다.
가로와 화면비로 세로를 구하려면 어떻게 하나요?
가로에 비율의 세로를 곱하고 비율의 가로로 나눕니다. 16:9에서 가로가 1280이면 세로는 1280 x 9 / 16 = 720입니다.
CSS에서 화면비는 어떻게 쓰나요?
요소에 aspect-ratio: 16 / 9;를 지정합니다. 너비를 정하거나 늘어나게 두면 브라우저가 높이를 계산합니다.
이미지 크기도 바꿔 주나요?
아니요. 입력한 두 수의 비율을 약분하고 맞는 가로나 세로를 계산해 줄 뿐 이미지 파일은 건드리지 않습니다.
1366x768이 16:9로 나오지 않는 이유는 뭔가요?
정확히 16:9가 아니기 때문입니다. 1366과 768은 공약수가 2뿐이라 정확한 비율은 683:384이고, 16:9의 1.7778에 대해 약 1.7786입니다.
입력할 수 있는 값의 범위는 어떻게 되나요?
가로, 세로, 직접 입력하는 새 크기 모두 0.001부터 100,000까지이며 소수 셋째 자리까지 쓸 수 있습니다. 소수 자릿수를 초과하면 잘라내지 않고 거부하며, 계산된 반대쪽 길이가 100,000을 넘어도 거부합니다.
서버로 전송되는 것이 있나요?
아니요. 몇 줄짜리 산술을 브라우저에서 실행할 뿐입니다.
마지막 업데이트: