종횡비 계산기
브라우저 처리가로·세로 값을 기준으로 비율과 CSS aspect-ratio 값을 계산합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.
사용 전 확인
- 파일·이미지·문서 처리 도구는 브라우저 안에서 처리되더라도 원본에 개인정보나 민감 정보가 포함될 수 있습니다. 공유·제출 전 원본과 결과를 한 번 더 확인하세요.
도구 실행입력 후 결과 확인
종횡비 계산기 샘플 실행
브라우저 처리
가로·세로 값을 기준으로 비율과 CSS aspect-ratio 값을 계산합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.
샘플 결과
종횡비 계산기 샘플 결과 입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.
종횡비 계산기 사용 안내
가로·세로 값을 기준으로 비율과 CSS aspect-ratio 값을 계산합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.
종횡비 계산기는 이미지, 영상, 카드 UI의 가로·세로 값에서 간단한 비율과 CSS aspect-ratio 값을 계산하는 디자인 도구입니다. 썸네일, 배너, 카드 레이아웃을 만들 때 비율을 빠르게 확인할 수 있습니다.
사용 방법
- 가로 픽셀과 세로 픽셀을 입력합니다.
- 줄여진 비율과 소수 비율을 확인합니다.
- 미리보기 박스에서 대략적인 화면 비율을 확인합니다.
- CSS 코드를 복사해 레이아웃 작업에 사용합니다.
이럴 때 사용하세요
- 종횡비 계산기에서는 가로 픽셀과 세로 픽셀을 입력합니다. 줄여진 비율과 소수 비율을 확인합니다. 미리보기 박스에서 대략적인 화면 비율을 확인합니다. CSS 코드를 복사해 레이아웃 작업에 사용합니다.
- 종횡비 계산기 결과를 확인한 뒤 CSS clamp 생성기 또는 이미지 자르기에서 다음 작업을 이어갈 수 있습니다.
- 종횡비 계산기: 입력 조건을 바꿔 금액·기간·비율의 차이를 비교할 때 적합합니다.
문제가 생겼을 때
종횡비 계산기: 미리보기와 실제 화면이 다름
부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
종횡비 계산기: 예상한 계산 결과와 차이가 큼
종횡비 계산기에서 퍼센트와 소수, 월과 연, 세전과 세후 등 입력 단위를 하나씩 확인하세요.
활용 팁
- 웹 카드 이미지는 한 프로젝트 안에서 같은 비율을 유지하면 화면이 안정적으로 보입니다.
- 영상 썸네일은 16:9, 프로필 이미지는 1:1, 세로형 콘텐츠는 4:5나 9:16을 자주 사용합니다.
- 실제 이미지 리사이즈가 필요하면 이미지 자르기 도구와 함께 사용하세요.