[CSS] 이미지/동영상 비율을 임의로 설정하려면? - Aspect Ratio

이미지/동영상 비율을 임의로 설정하려면?

Aspect Ratio(비율)은 웹 디자인에서 중요한 요소 중 하나입니다.

이것은 이미지와 비디오의 화면 비율을 나타내며, 웹 페이지의 레이아웃 및 사용자 경험에 큰 영향을 미칩니다.

이 글에서는 Aspect Ratio의 개념을 자세히 알아보고, 웹 디자인에서의 활용 방법과 다양한 예시를 살펴보겠습니다. 😁

 

#1 Aspect Ratio란?

Aspect Ratio는 이미지나 비디오의 너비와 높이 사이의 비율을 나타냅니다.보통 가로:세로 의 형태로 표현되며, 너비를 높이로 나눈 값입니다. 가장 흔한 Aspect Ratio는 16:9로, 넓은 화면 비율을 가진 비디오 포맷입니다!

 

#2 왜 중요한가?

Aspect Ratio는 웹 페이지의 레이아웃을 결정하는 데 매우 중요합니다.

올바른 비율을 사용해야 콘텐츠가 일관되게 표시되며, 사용자 경험이 향상되기 때문입니다.

또한 다양한 디바이스와 화면 크기에도 적절하게 표시될 수 있도록 해줍니다.

 

#3 다양한 예시

1. 이미지 갤러리 : 이미지 갤러리에서는 각 이미지의 비율이 일관되어야 합니다. 예를 들어, 모든 이미지가 4:3 비율을 갖도록 해야 레이아웃이 균형있게 유지될 수 있기 때문입니다.
2. 비디오 플레이어 : 비디오 플레이어에서는 화면이 특정 비율을 유지해야 합니다. 예를 들어, YouTube는 기본적으로 16:9 비율로 비디오들을 재생합니다.
3. 배경 이미지 : 웹 사이트의 배경 이미지는 창의 크기에 맞게 조정되어야 합니다. 이때 적절한 Aspect Ratio를 사용하여 이미지가 잘리지 않고 균형 있게 표시될 수 있도록 합니다.

 

#3 CSS 활용 : aspect-ratio

CSS에서 Aspect Ratio를 다루기 위한 속성으로, aspect-ratio 가 있습니다. 이를 사용하여 요소의 비율을 지정할 수 있습니다.

.image-container {
  aspect-ratio: 16/9; /* 16:9 비율로 설정 */
}

 

#4 유사한 기능의 다른 기법들

1. CSS의 `padding-top` 속성 이용하기

• 이 기법은 특정 비율을 유지하기 위해 요소의 위쪽 여백을 사용하는 방법입니다. aspect-ratio를 사용하는 것보다 많은 CSS 코드가 필요하지만, 이미지 등과 같이 요소의 높이가 알려져 있지 않을 때 유용합니다.
• 장점
  • 요소의 크기가 동적으로 변할 때 유연하게 대응할 수 있습니다.
  • Aspect Ratio를 정확히 지정할 수 있습니다.
• 단점
  • 추가 CSS 코드가 필요하며, 복잡해질 수 있습니다.
  • 레이아웃이 좀 더 복잡해질 수 있습니다.

.image-container {
  width: 100%; /* 요소의 너비를 100%로 설정 */
  padding-top: 56.25%; /* 16:9 비율에 해당하는 여백을 위쪽에 적용 */
  position: relative; /* 자식 요소의 위치를 상대적으로 설정하기 위해 부모 요소에 상대적 위치 지정 */
}

.image-container img {
  position: absolute; /* 이미지를 절대적으로 위치시킴 */
  width: 100%; /* 이미지의 너비를 100%로 설정하여 부모 요소에 맞게 조정 */
  height: 100%; /* 이미지의 높이를 100%로 설정하여 부모 요소에 맞게 조정 */
  top: 0; /* 부모 요소의 상단에 이미지를 배치 */
  left: 0; /* 부모 요소의 왼쪽에 이미지를 배치 */
}

 

2. Flexbox 또는 Grid를 사용하기

• Flexbox 또는 Grid를 사용하여 요소의 배치를 제어하면, Aspect Ratio를 유지하면서 요소를 유연하게 배치할 수 있습니다. 이 방법은 요소의 크기와 배치를 동적으로 조절해야 할 때 유용합니다.
• 장점
  • Flexbox나 Grid를 사용하여 레이아웃을 쉽게 구성할 수 있습니다.
  • 요소의 크기와 배치를 유연하게 조절할 수 있습니다.
• 단점
  • Aspect Ratio를 설정하기 위해 추가 CSS 코드가 필요할 수 있습니다.
  • 브라우저 호환성 문제가 발생할 수 있습니다.

.container {
  display: flex; /* Flexbox 컨테이너로 설정 */
  justify-content: center; /* 요소를 수평 가운데 정렬 */
  align-items: center; /* 요소를 수직 가운데 정렬 */
}

.item {
  width: 100%; /* 요소의 너비를 100%로 설정 */
  padding-top: 56.25%; /* 16:9 비율에 해당하는 여백을 위쪽에 적용 */
  position: relative; /* 자식 요소의 위치를 상대적으로 설정하기 위해 부모 요소에 상대적 위치 지정 */
}

.item img {
  position: absolute; /* 이미지를 절대적으로 위치시킴 */
  width: 100%; /* 이미지의 너비를 100%로 설정하여 부모 요소에 맞게 조정 */
  height: 100%; /* 이미지의 높이를 100%로 설정하여 부모 요소에 맞게 조정 */
  top: 0; /* 부모 요소의 상단에 이미지를 배치 */
  left: 0; /* 부모 요소의 왼쪽에 이미지를 배치 */
}

 

3. JavaScript를 사용하기

• JavaScript를 사용하여 요소의 크기를 동적으로 조절하고 Aspect Ratio를 유지할 수 있습니다. 이 방법은 다양한 크기의 화면에 대응해야 하는 웹 어플리케이션에서 유용하게 사용될 수 있습니다.
• 장점
  • JavaScript를 사용하여 동적으로 요소의 크기를 조절할 수 있습니다.
  • 다양한 크기의 화면에 유연하게 대응할 수 있습니다.
• 단점
  • JavaScript가 필요하므로 페이지 로딩 시간이 늘어날 수 있습니다.
  • 코드가 복잡해지고 유지보수가 어려워질 수 있습니다.

const container = document.querySelector('.container');
const aspectRatio = 16 / 9; // 16:9 비율

function setAspectRatio() {
  const width = container.offsetWidth; // 컨테이너의 너비
  const height = width / aspectRatio; // 비율에 맞게 높이 계산
  container.style.height = `${height}px`; // 컨테이너의 높이 설정
}

// 페이지 로드 또는 화면 크기 변경 시 Aspect Ratio 설정
window.addEventListener('DOMContentLoaded', setAspectRatio);
window.addEventListener('resize', setAspectRatio);