CSS로 고정 비율 박스 만들기 (유튜브 16:9 비율 등 적용 팁)

이미자 또는 콘텐츠 박스 비율을 다양하게 적용하고, 반응형까지 커버해야 할 때 사용하면 좋은 CSS를 알아볼게요. aspect-ratio는 비율을 지정하는 방법을 간단히 처리해 줍니다. 제일 많이 사용 중인 유튜브 화면 비율을 예로 들 수 있습니다.

aspect-ratio를 알아보자

종횡비 전용 속성으로 이미지 또는 박스 비율을 지원하는 속성이다. 사용이 간편하고, 반응형에 최적이라 생각한다. 단, IE 브라우저에는 지원이 안된다.

예제코드 1:1비율

.box {
  width: 300px;
  aspect-ratio: 1;
  background-color: #c30;
  border-radius: 10px;
}

예제코드 4:3비율

.box {
  width: 300px;
  aspect-ratio: 4 / 3;
  background-color: #c30;
  border-radius: 10px;
}

예제코드 16:9비율

.box {
  width: 300px;
  aspect-ratio: 16 / 9;
  background-color: #c30;
  border-radius: 10px;
}

마무리

위 예제처럼 이미지 또는 박스의 비율을 간단히 조절하는 방법에 대해서 알아봤습니다. 예제는 가로를 픽셀로 지정해 줘 정의를 했지만, 반응형이면 퍼센트 또는 다른 방법으로 정의 된 박스에 비율을 그대로 적용하면 됩니다. 이번에는 기본 기능만 확인했습니다.