아직 실질적으로 사용해보지 않았지만 박스의 영역을 직관적으로 설정할 수 있어 보인다.

예를들어 정사각형의 박스를 만드려면 padding-top: 100%;로 넣는 편법으로 만들 수 있다. 하지만 그 속에 내용을 그대로 사용할 수 없으므로 엘리먼트를 하나 더 싸고 position: absolute;로 레이어를 띄어놓아야 한다. 상당히 번거롭지만 딱히 좋은 방도가 없어서 이렇게 사용해왔다.

그나마 괜찮은 방법은 https://css-tricks.com/aspect-ratio-boxes 페이지에서 Using Custom Properties 섹션에서 살펴보니 비율을 변수화 시키고 calc()를 이용하여 원하는 비율을 만들어 내는거 같아 보인다. 결국에는 padding-top을 사용하는 핵이지만 나쁘지 않은 방법인거 같다.

---

https://web.dev/aspect-ratio/?fbclid=IwAR0TRXD-xAJOPPrbUV9vyakvLHlX_1BO9N1wTP-aEsiYFaHgDSebLeCwmHc

링크에서 있는 방식은 비율을 직접 정한다는것인데 상당히 직관적으로 보인다.

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

꼭 테스트해보고 적용시켜보고 싶어진다.
좀 자세히 보니 현재 시기에서 프리뷰 버전들에서만 사용할 수 있어 보인다.