aspect-ratio 이란?

1. aspect-ratio

CSS에서 요소의 가로 세로 비율을 지정하는 속성이다. 이 속성을 사용하면, 요소의 크기를 동적으로 조정할 때도 가로와 세로의 비율이 일정하게 유지되도록 한다.

 

2. 장점

이는 유연한 레이아웃으로, 비율을 고정해두면 다양한 화면 크기에서 일관된 디자인을 유지할 수 있다.

미디어 요소, 이미지, 비디오 등에서 특정 비율을 유지해야 할 때 유용하다.

즉, 콘텐츠가 로드되기 전에도 안정적인 레이아웃을 유지할 수 있다.

 

3. 예시

div {
  aspect-ratio: 16 / 9;
}

 

위 코드는 div 요소의 가로 세로 비율을 16:9로 설정이 된다. 

즉, 너비가 160px이면 높이는 90px로 너비로, 너비가 320px이면 높이는 180px로 조정이 된다. 이 비율은 요소의 크기가 변하더라도 유지가 된다.