웹 페이지에서 동영상이나 이미지를 반응형으로 배치할 때는 창 크기가 변해도 요소의 종횡비(가로세로비, Aspect Ratio)가 일정하게 유지되어야 화면이 깨지지 않습니다. CSS에서는 요소의 패딩을 백분율(%) 단위로 지정하는 방식으로 이를 간단히 해결할 수 있습니다.
패딩의 백분율 값은 항상 부모 요소의 너비를 기준으로 계산되기 때문에, 세로 방향 패딩(padding-top 또는 padding-bottom)을 활용하면 너비에 비례하는 높이를 만들어 원하는 비율을 고정할 수 있습니다.
종횡비 유지에 사용되는 CSS 패딩 속성
- padding-bottom – 요소의 아래쪽 패딩을 지정합니다.
- padding-top – 요소의 위쪽 패딩을 지정합니다.
- padding-left – 요소의 왼쪽 패딩을 지정합니다.
- padding-right – 요소의 오른쪽 패딩을 지정합니다.
- padding – 위 네 가지 속성을 한 번에 설정하는 축약형(shorthand) 속성입니다.
예제 1: 1:1 정사각형 비율 유지하기
다음 예제는 padding-top: 100%를 사용해 정사각형(1:1) 비율을 유지하는 div 요소를 만듭니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
padding-top: 100%;
box-shadow: 0 0 24px steelblue;
position: relative;
width: 100%;
}
div > div {
margin: 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
</style>
</head>
<body>
<p>아래 div를 확인해 보세요</p>
<div id="demo">
<div>재미있는 비율!</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
브라우저 창 크기를 조절해도 요소의 비율은 항상 1:1로 유지됩니다.
예제 2: 16:9 비율로 YouTube 동영상 삽입하기
동영상에 가장 널리 쓰이는 16:9 비율은 padding-top: 56.25%(9 ÷ 16 = 0.5625)로 구현할 수 있습니다. 컨테이너의 높이를 0으로 설정하고 iframe을 절대 위치로 배치해 패딩 영역 위에 겹치면, 창 크기에 맞춰 자동으로 조절되는 반응형 동영상 플레이어가 완성됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 56.25%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
참고: 최신 CSS aspect-ratio 속성
최신 브라우저에서는 aspect-ratio: 16 / 9;처럼 한 줄로 종횡비를 지정할 수 있는 전용 속성도 제공됩니다. 다만 구형 브라우저와의 호환성을 고려해야 한다면, 위에서 소개한 패딩 기반 기법이 여전히 실용적인 대안이 됩니다.