한눈에 보는 정의
요소의 가로와 세로 비율을 정해 두는 CSS 속성. 예를 들어 16 / 9로 지정하면 너비가 바뀌어도 그 비율이 유지된다.
이런 말로 들어요
- 썸네일 칸은 aspect-ratio 1:1로 고정해 주세요.
- 이미지가 늦게 떠서 글이 밀리니까 비율로 자리를 잡아 둘게요.
그림으로 보기
aspect-ratio는 너비가 바뀌어도 가로세로 비율을 지켜 자리를 먼저 잡습니다. 로딩 중 화면이 밀리는 현상(CLS)을 줄입니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
aspect-ratio를 쓰면 화면 크기에 따라 너비가 달라져도 높이가 비율에 맞춰 자동으로 정해집니다. 영상 칸은 16 / 9, 정사각형 썸네일은 1 / 1처럼 적습니다. 이미지가 늦게 불러와져도 자리를 미리 잡아 두기 때문에 글이 갑자기 아래로 밀리는 현상을 줄입니다. 구글은 이렇게 화면이 밀리는 정도를 CLS라는 지표로 봅니다.
실무 예시
예를 들어 유튜브 영상을 넣는 칸에 aspect-ratio: 16 / 9를 주면, 휴대폰과 PC 어디서든 영상 칸이 같은 모양으로 자리를 잡습니다.
함께 살펴볼 점
비율과 다른 원본 이미지를 넣으면 잘리거나 찌그러질 수 있습니다. object-fit으로 잘라 맞출지 여백을 둘지 함께 정합니다.
AI에게 이렇게 요청해 보세요
블로그 카드 썸네일을 모두 16:9 비율로 맞추고, 이미지가 늦게 떠도 글이 밀리지 않게 aspect-ratio와 object-fit을 써서 CSS를 짜 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- aspect-ratio - MDN 새 창
aspect-ratio가 상자의 선호 가로세로 비율을 정하고, 크기 계산에 쓰인다는 설명을 확인했습니다.
자료 확인 - Optimize Cumulative Layout Shift - web.dev 새 창
이미지·영상에 width·height를 주거나 CSS aspect-ratio로 공간을 미리 잡아 로딩 중 레이아웃 이동을 줄이라는 안내를 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정