사용방법
- 프리셋 비율(예: 9:16 / 16:9 / 4:5)을 선택하거나 사용자 지정 비율을 직접 입력합니다.
- 알고 있는 너비 또는 높이를 입력합니다.
- 도구가 나머지 크기를 즉시 자동으로 계산합니다.
- 생성된 CSS
aspect-ratio코드를 복사하여 레이아웃에 적용합니다.
핵심 기능
- TikTok/Reels (9:16): 세로형 비디오의 주요 비율과 일반적인 해상도 설정을 원클릭으로 적용합니다.
- aspect-ratio CSS 생성:
aspect-ratio: W/H;CSS 코드 스니펫 및 호환성 제안을 즉시 생성합니다. - 누락된 크기 자동 계산: 너비 또는 높이 중 하나를 입력하면 비율을 유지한 채 나머지 크기를 자동으로 계산합니다.
- 직관적인 비율 미리보기: 반응형 사각형으로 비율을 실시간 미리보기 하여 치수 입력 오류를 방지합니다.
- 로컬 개인정보 보호: 입력한 치수 및 미디어 정보는 절대 서버로 전송되지 않습니다.
관련 도구
디자인 및 프론트엔드 개발을 위한 Lorem Ipsum 더미 텍스트를 생성하세요. 일반 텍스트, HTML <p> 태그 및 JSON 배열 출력을 지원합니다. 가변 길이(단락/문장/단어) 제어 기능과 중국어(CJK) 더미 텍스트를 제공하며, 서버 업로드 없이 브라우저에서 안전하게 실행됩니다.
HEX, RGB, HSL, CMYK 간의 색상을 실시간으로 변환하고 WCAG 접근성 대비 비율(AA/AAA)을 자동으로 검사합니다. 인쇄용 CMYK 백분율 및 시각적 미리보기를 지원하며, 100% 로컬 환경에서 안전하게 처리됩니다.
이미지를 선택하거나 드래그 앤 드롭, 또는 붙여넣어 브라우저에서 안전하게 픽셀 색상을 추출하세요. HEX/RGB/HSL 값을 복사하고 주요 색상 팔레트를 쉽게 생성할 수 있습니다.
계산 논리
- 계산 공식: [ H = W \times \frac{r_H}{r_W} ] 또는 [ W = H \times \frac{r_W}{r_H} ]
- CSS 작성 예시: [ \text{aspect-ratio}: \frac{16}{9} ]
FAQ
동영상 플랫폼(TikTok/Reels)에 가장 적합한 비율은 무엇인가요?
표준 비율은 9:16(세로형)이며, 가장 일반적인 해상도는 1080×1920입니다. 9:16 프리셋을 사용하면 크기를 빠르게 확인할 수 있습니다.
CSS에서 aspect-ratio는 어떻게 사용하나요?
간단히 aspect-ratio: 16/9; 와 같이 작성합니다. 이 도구는 해당 속성이 포함된 코드 스니펫과 레이아웃에 유용한 폴백(fallback)을 함께 생성합니다.
내 데이터는 안전한가요(로컬/개인정보)?
네. 모든 계산과 미리보기는 사용자의 브라우저 내에서 로컬로 처리되며, 어떤 크기나 콘텐츠도 업로드되거나 서버에 저장되지 않습니다.
이 도구는 무료인가요? 상업용 프로젝트에 사용해도 되나요?
완전 무료이며, 콘텐츠 제작자나 디자인 팀이 비디오 및 UI 크기를 빠르게 맞추는 데 사용하기 적합합니다.
왜 1~2픽셀의 오차가 발생하나요?
일부 치수는 정수 픽셀로 반올림해야 합니다. 이 도구는 비율을 최대한 정확하게 유지하면서 가장 가까운 정수로 반올림하여 결과를 제공합니다.