🐇 비율 고정

요소에 width,height의 %를 활용해서 비율을 유지하거나,
옛 방식인 padding-top, padding-bottom을 활용해 비율을 고정하는 경우가 있었다.
해당방식은 가시적이지도 않고 활용에 부모요소를 고려하는 등의 제약적인 부분이 많았다.
그래서 좀 더 사용하기 쉬운 다음 방법을 찾았다.

🥕 aspect-ratio

aspect-ratio는 자동 크기 및 기타 레이아웃 기능 계산에 사용되는 상자의 기본 종횡비를 설정 합니다.

활용법은 다음과 같습니다.

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;