비디오 플레이어로 많이 쓰이는 16:9 비율의 엘리먼트를 만들어보자.
방법 1. padding-top(또는 padding-bottom)을 이용
스펙 문서에 따르면 % 단위의 padding 은 컨테이닝 블록의 너비를 기준으로 한다고 명시가 되어 있는데 이 점을 이용하자. https://developer.mozilla.org/ko/docs/Web/CSS/padding
먼저 너비 지정을 위한 엘리먼트를 만들고, 자식 엘리먼트에 padding-bottom 을 적용한다. padding-bottom: 100% 을 적용하면 정사각형을 만들 수 있다. padding 영역엔 콘텐츠를 채울 수 없으니, 콘텐츠를 채우기 위한 엘리먼트를 만들어 absolute 로 띄워주면 끝!
지원 범위가 넓지만, 기본적으로 여러개의 엘리먼트를 필요로 하기 때문에 depth가 깊어지는 단점이 있다.
See the Pen aspect-ratio by 소지훈 (@sogoonii) on CodePen.
너비 변경 만으로 높이도 변경되는 걸 확인할 수 있다.
방법 2. aspect-ratio 를 이용
사용법도 간단하고, 비율을 유지하기 위한 별도의 엘리먼트가 필요하진 않지만, 브라우저의 지원범위가 크지 않으니, 사용 전에는 지원 범위를 먼저 확인해보자. https://caniuse.com/?search=aspect-ratio
See the Pen aspect-ratio by 소지훈 (@sogoonii) on CodePen.
역시 너비 변경 만으로 높이도 변경되는 걸 확인할 수 있다.
댓글 없음:
댓글 쓰기