반응형 웹을 만들다 보면 이미지나 박스 요소의 비율을 고정하면서 크기만 유동적으로 바꾸고 싶을 때가 많습니다. 예를 들어 유튜브 영상 썸네일(16:9), 정사각형 카드(1:1), 세로로 긴 프로필 이미지(3:4) 등이 있죠. 기존에는 padding-top 트릭이나 ::before 가상 요소를 활용해야 했지만, 이제는 aspect-ratio 속성 하나로 간단하게 처리할 수 있습니다.
1. 기본 문법
.element {
aspect-ratio: 가로 / 세로;
}aspect-ratio는 가로:세로 비율을 지정하는 속성입니다.width또는height중 하나만 지정하면 나머지는 비율에 맞게 자동 계산됩니다.
2. 예제
1) 정사각형 박스 만들기
.square {
width: 200px;
aspect-ratio: 1 / 1; /* 가로세로 1:1 비율 */
background: lightblue;
}→ 항상 정사각형 형태를 유지합니다.
2) 유튜브 영상 비율 (16:9)
.video {
width: 100%;
aspect-ratio: 16 / 9;
background: black;
}→ 반응형 레이아웃에서도 16:9 비율이 깨지지 않습니다.
3) 세로 비율 카드 (3:4)
.card {
width: 150px;
aspect-ratio: 3 / 4;
background: pink;
}→ 가로보다 세로가 긴 카드 레이아웃에 유용합니다.
3. 실제 활용 예시
이미지에 적용
img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}→ 이미지가 잘려도 비율을 유지하면서 꽉 차게 보여줄 수 있습니다.
4. 주의사항
1. 지원 브라우저: 대부분의 최신 브라우저(크롬, 엣지, 사파리, 파이어폭스)에서 지원합니다.
단, IE는 지원하지 않습니다.
2. 우선순위:
width와height를 동시에 지정하면aspect-ratio가 무시됩니다.width만 지정하면height는 비율로 계산됩니다.- 반대로
height만 지정해도width가 자동으로 맞춰집니다.
5. 결론
aspect-ratio 속성은 반응형 레이아웃에서 비율 고정 박스를 쉽게 만들 수 있는 강력한 도구입니다.
이제 복잡한 padding-top 트릭을 쓰지 않아도 되고, 코드가 훨씬 간결해집니다.
- 정사각형 버튼
- 반응형 영상 영역
- 카드/썸네일 레이아웃
등에서 활용해 보시면 큰 도움이 될 거예요.
html_programming_language