aspect-ratio1

• 

  [CSS] aspect-ratio 속성으로 반응형 박스 비율 고정하는 법 반응형 웹페이지를 만들다 보면, 정해진 가로세로 비율을 유지한 채 박스나 이미지 크기를 자동 조절해야 하는 경우가 많습니다. 과거에는 padding-top 트릭이나 position: absolute를 이용해 우회적으로 해결했지만, CSS의 aspect-ratio 속성을 사용하면 이 과정을 훨씬 더 간단하게 만들 수 있습니다. 기본 사용법.box { width: 100%; aspect-ratio: 16 / 9; background-color: #3498db;} 이렇게 작성하면, .box는 항상 가로 16: 세로 9의 비율을 유지합니다. width가 늘어나면 height도 자동 조정됩니다. 모바일에서도 완벽하게 작동하게 됩니다. 다양한 예제1. 정사각형 만들기.square { width: 100px.. CSS 2025. 5. 18.