[CSS] 비율을 유지하는 반응형 박스

padding을 사용하는 방법 .container { /* height값을 지정해주지 않거나 0으로 지정해주어야한다. */ width: 200px; } .box { /* 부모height가 0인 상태에서 자식에서 padding-top을 선언하면, 바로 이 값이 높이가 되게 된다. */ padding-top: 50%; /* calc()를 사용할 수도 있다 */ padding-top: calc(100% * 0.5); /* 16:9 적용 */ padding-top: calc(100% / 16 * 9); } 부모의 width가 padding의 기준이 되기 때문에 부모인 container 엘리먼트 요소가 필요합니다. aspect-ratio를 사용하는 방법 .box { /* 16:9 적용 */ aspect-ratio..

원문링크 : [CSS] 비율을 유지하는 반응형 박스