CSS로 요소의 종횡비 유지하기
웹 페이지에서 이미지, 비디오, 카드 레이아웃 등은 화면 크기가 변하더라도 일정한 종횡비(aspect ratio), 즉 가로세로 비율을 유지해야 하는 경우가 많습니다. 예를 들어 16:9 동영상 플레이어나 1:1 정사각형 썸네일이 대표적입니다.
CSS에서 종횡비를 유지하는 대표적인 방법은 두 가지입니다. 하나는 전통적으로 널리 쓰인 padding-top 퍼센트 기법이고, 다른 하나는 최신 브라우저에서 지원되는 aspect-ratio 속성입니다.
방법 1: padding-top 퍼센트 기법
padding의 백분율 값은 항상 부모 요소의 너비를 기준으로 계산된다는 점을 활용합니다. 예를 들어 padding-top: 75%를 지정하면 세로 높이가 가로 너비의 75%가 되므로 4:3 비율이 자동으로 유지됩니다.
내부 콘텐츠는 position: absolute와 함께 상하좌우를 0으로 설정해 컨테이너 전체에 배치합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.aspectContainer {
background-color: rgb(191, 66, 216);
position: relative;
width: 100%;
padding-top: 75%; /* 4:3 비율 유지 */
}
.aspectText {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 20px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1>Aspect ratio 예제</h1>
<div class="aspectContainer">
<div class="aspectText">4:3 Aspect ratio</div>
</div>
<h2>창 크기를 조절하면 4:3 비율이 그대로 유지됩니다</h2>
</body>
</html>실행 결과
위 코드를 실행하면 보라색 컨테이너가 화면 전체 너비를 차지하면서 4:3 비율로 표시됩니다.
브라우저 창 크기를 줄이면 요소도 함께 축소되지만, 여전히 4:3 비율이 그대로 유지되는 것을 확인할 수 있습니다.
방법 2: aspect-ratio 속성 (권장)
최신 브라우저에서는 훨씬 간단한 aspect-ratio 속성을 사용할 수 있습니다. 별도의 패딩 계산이나 절대 위치 지정 없이 한 줄로 종횡비를 지정할 수 있어 코드가 깔끔하고 유지보수가 쉽습니다.
.aspectContainer {
background-color: rgb(191, 66, 216);
width: 100%;
aspect-ratio: 4 / 3;
}주요 비율 표기 예시는 다음과 같습니다.
aspect-ratio: 16 / 9;— 일반적인 동영상 비율aspect-ratio: 1 / 1;— 정사각형 프로필 이미지aspect-ratio: 21 / 9;— 울트라와이드 화면
정리
구형 브라우저 호환성이 필요하다면 padding-top 퍼센트 기법을, 모던 브라우저만 지원하면 되는 환경이라면 aspect-ratio 속성을 사용하는 것이 좋습니다. 두 방법 모두 반응형 웹 디자인에서 레이아웃이 깨지지 않도록 하는 필수 기술입니다.