노트

비율을 유지하는 박스

Aspect Ratio Box

프런트엔드#css · 연결된 개념 5개

쉽게 말하면

비율을 유지하는 박스는 창 크기가 바뀌어도 16:9 같은 모양을 지키는 틀이에요. TV 화면이 커져도 찌그러지지 않듯, 너비가 달라지면 높이도 따라 달라져 영상이 늘어나지 않죠.

비유가 깨지는 곳 예전엔 이 틀을 직접 만들었어요. 퍼센트 padding이 부모 너비 기준이라는 점을 이용해 높이를 0으로 두고 padding으로 높이를 냈는데, 지금은 aspect-ratio 한 줄이면 돼요.

너비가 바뀌어도 가로세로 비율(예: 16:9)을 지키는 상자. 지금은 aspect-ratio 속성 한 줄이면 되고, 그 전에는 퍼센트 padding을 이용한 트릭을 썼다. 임베드 동영상(iframe)을 반응형으로 만들 때 주로 쓴다.

/* 현대 방식 */
.video { width: 100%; aspect-ratio: 16 / 9; }

padding-bottom 트릭

padding을 퍼센트로 주면 부모의 너비를 기준으로 계산된다. 높이를 0으로 두면 padding이 높이를 대신하므로, 너비에 비례하는 높이가 생긴다.

.wrap {
  position: relative;
  height: 0;
  padding-bottom: calc(100% / (16 / 9)); /* = 56.25% */
}
.wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
  • 16:9가 아니면 높이 / 너비 * 100%로 계산한다. CSS 변수(CSS Custom Properties, --ratio)로 비율을 받으면 컴포넌트 하나로 여러 비율을 처리할 수 있다
  • 안쪽 요소는 inset: 0과 absolute로 상자를 채운다
  • aspect-ratio를 지원하지 않는 아주 오래된 브라우저를 위해 두 방식을 함께 두기도 했지만 2026 기준으로는 aspect-ratio만으로 충분하다

이미지와 동영상에 비율이나 크기를 미리 잡아 두면 로드될 때 레이아웃이 밀리지 않아 CLS(Cumulative Layout Shift)가 좋아진다. 반응형 웹 디자인의 한 도구다.

출처: CSS-Tricks — Aspect Ratio Boxes · MDN — aspect-ratio

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • CSS 박스 모델

    브라우저는 모든 요소를 사각형 상자로 보고, 그 상자를 안쪽부터 콘텐츠(content) → 안쪽 여백(padding) → 테두리(border) → 바깥 여백(margin) 네 겹으로 계산한다. 레이아웃에서 요소가 차지하는 크기와 요소 사이 간격이 모두 이 네 겹에서 나온다.

  • CSS Grid

    행과 열을 동시에 정의해 아이템을 배치하는 2차원 레이아웃 방식. 컨테이너가 트랙(Track, 행·열)의 크기를 정하고 아이템은 그 칸에 들어간다.

  • Flexbox

    한 방향(행 또는 열)으로 아이템을 배치하고 남는 공간을 나눠 주는 1차원 레이아웃 방식. 부모에 display: flex를 주면 부모는 flex 컨테이너(Flex Container), 자식은 flex 아이템(Flex Item)이 된다. 아이템이 늘어서는 방향이 주축(Main Axis), 그에 수직인 방향이 교차축(Cross Axis)이다.

  • content-visibility

    화면 밖에 있는 요소의 렌더링을 건너뛰어도 된다고 브라우저에 알려 주는 CSS 속성. auto를 주면 뷰포트에서 멀리 있는 요소의 레이아웃·페인트를 생략하므로, 긴 페이지의 첫 렌더링과 스크롤이 빨라진다.

  • Flexbox와 Grid 비교

    flexbox는 한 방향으로 흐르는 1차원 배치, css-grid는 행과 열을 함께 다루는 2차원 배치다. 크기를 누가 정하느냐도 다르다. flex는 아이템과 콘텐츠가, grid는 컨테이너의 트랙이 정한다.

보기 옵션