종횡비 박스 생성기 최신 및 레거시 CSS 접근 방식을 사용하여 반응형 종횡비 박스를 생성합니다.
종횡비 박스 생성기
최신 및 레거시 CSS 접근 방식을 사용하여 반응형 종횡비 박스를 생성합니다.
사전 설정된 비율이나 사용자 정의 비율을 선택
일반적인 화면비(16:9, 4:3, 1:1) 중에서 선택하거나 사용자 정의 값을 입력할 수 있습니다.
박스를 구성
최대 너비, 배경색을 설정하고 최신 또는 레거시 CSS 접근 방식을 선택합니다.
CSS를 복사
화면 비율 박스를 미리 보고 CSS 코드를 복사합니다.
What Is 종횡비 박스 생성기?
Aspect Ratio Box Generator는 특정 너비-높이 비율을 유지하는 반응형 컨테이너를 생성합니다. 영상, 이미지, 카드 등 пропор션 있는 크기를 필요로 하는 모든 요소에 대해 측면 비율을 유지하는 것은 필수적입니다. 이 도구는 1:1(정사각형), 4:3(표준), 16:9(와이드스크린), 21:9(초광역), 3:2(사진), 9:16(세로), 2:3(포스터), 3:4(태블릿) 등 여덟 가지 일반적인 프리셋을 제공하며, 사용자 지정 비율 값을 설정할 수도 있습니다. 이 도구는 현대적 인 CSS aspect-ratio 속성과 더广泛한 브라우저 지원을 위한 레거시 패딩-하단 기술 모두를 지원합니다. 미리보기에는 최대 너비와 배경색을 수정할 수 있는 측면 비율 상자가 표시되며, 생성된 CSS에는 선택한 접근 방식이 포함됩니다.
Why Use 종횡비 박스 생성기?
-
8개의 일반적인 화면비 사전 설정 및 사용자 정의 입력
-
최신(aspect-ratio)과 레거시(padding-bottom) CSS 접근 방식 모두 지원
-
최대 너비와 배경색을 사용자 정의할 수 있음
-
미리 보기에서 비례 박스를 정확하게 표시
Common Use Cases
동영상 컨테이너
내장된 동영상에 대한 16:9 반응형 컨테이너를 생성합니다.
이미지 플레이스홀더
레이아웃을 변경하지 않도록 이미지가 로드되는 동안 공간을 예약합니다.
반응형 카드
다양한 화면 크기에서 일관된 카드 비율을 유지합니다.
사진 갤러리
갤러리 그리드 레이아웃에 대한 균일한 이미지 컨테이너를 생성합니다.
Technical Guide
현대적 인 CSS aspect-ratio 속성은 직접 선호하는 측면 비율을 설정합니다: aspect-ratio: 16 / 9. 브라우저는 요소의 너비에 따라 높이를 자동으로 계산합니다. 이는 2021년 이후 모든 현대 브라우저에서 지원됩니다. 레거시 기술은 너비의 백분율(패딩 百分比는 부모 너비에 상대적임)로 패딩-하단을 사용합니다: padding-bottom: 56.25%는 16:9 비율(9/16 * 100 = 56.25%)를 생성합니다. 레거시 접근 방식에는 컨테이너에 position: relative 및 자식 콘텐츠에 position: absolute; top: 0; left: 0; width: 100%; height: 100%가 필요합니다. 현대적 인 접근 방식은 더 간단하고 읽기 쉽습니다. 두 가지 방법 모두 모든 너비에서 비율을 유지하는 반응형 컨테이너를 생성합니다. max-width 속성은 컨테이너 크기를 제한합니다. 이미지의 경우 object-fit 속성이 이미지가 측면 비율 컨테이너를 채우는 방식을 제어합니다.
Tips & Best Practices
-
1보다 깨끗하고 간단한 코드를 위해 최신 aspect-ratio 속성을 사용
-
2구식 브라우저 지원을 위한 padding-bottom 기법으로 돌아가기
-
3화면 비율 컨테이너 내의 이미지에 object-fit: cover 사용
-
4박스가 넓은 화면에서 너무 커지지 않도록 최대 너비 설정
Related Tools
CSS 플렉스박스 플레이그라운드
모든 플렉스 컨테이너 속성에 대한 인터랙티브 제어를 제공하는 시각적 CSS 플렉스박스 탐색기입니다.
🎨 CSS & Design
CSS 그리드 플레이그라운드
템플릿 열, 행 및 간격에 대한 상호 작용형 컨트롤을 갖춘 시각적 CSS 그리드 빌더입니다.
🎨 CSS & Design
반응형 디자인 테스터
내장된 iframe 뷰어를 사용하여 일반적인 기기 브레이크포인트에서 웹사이트를 미리 봅니다.
🎨 CSS & Design
미디어 쿼리 생성기
기능 조건 및 미리 정의된 브레이크포인트로 CSS 미디어 쿼리를 생성합니다.
🎨 CSS & DesignFrequently Asked Questions
Q CSS에서 aspect-ratio는 무엇인가?
Q aspect-ratio 속성이 모든 곳에서 지원되는가?
Q padding-bottom 트릭이란 무엇인가?
Q 화면 비율 박스 내부에 콘텐츠를 넣는 방법은 무엇인가?
Q 화면 비율과 함께 이미지를 사용할 수 있는가?
About This Tool
종횡비 박스 생성기 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.