밀당 DS

시작하기

Aspect Ratio

자주 쓰는 가로세로 비율 토큰

가로세로 비율(aspect-ratio)은 정해진 토큰으로 지정합니다.

개요

토큰 이름이 곧 비율입니다(16:9 = 가로 16 / 세로 9).
가로형(16:9·4:3·3:2·2:1)과 정사각·세로형(1:1·3:4·2:3) 두 묶음을 제공합니다.

비율

조합 예시

16:9
4:3
3:2
2:1
1:1

가로형

2:1
16:9
3:2
4:3

정사각 · 세로형

1:1
3:4
2:3
토큰값용도
16:916 / 9와이드스크린 영상·동영상 썸네일
4:34 / 3전통적 화면 비율·문서 미리보기
3:23 / 2가로 사진
2:12 / 1와이드 배너·히어로 영역
1:11 / 1정사각 썸네일·아바타
3:43 / 4세로 카드·이미지
2:32 / 3세로 포스터·인물 사진

위 표의 용도는 각 비율의 일반적 용도입니다.

사용법

CSS 에서는 비율 값을 그대로 사용합니다.

css

.thumbnail {
  aspect-ratio: 16 / 9;
}

mildang-frontend 저장소에서 DS 소스를 직접 사용하는 경우에는 shorthand aspectRatio="16:9"도 사용할 수 있습니다.

권장 사항

구분내용
권장콘텐츠 성격에 맞는 비율을 사용합니다(영상 16:9, 아바타·썸네일 1:1, 세로 카드 3:4).
권장이미지·미디어 컨테이너에 비율을 미리 지정해 로딩 중 레이아웃 이동(CLS)을 방지합니다.
권장임의 비율보다 정의된 비율(16:9·4:3 등)을 우선 사용합니다.
지양이미지·영상에 object-fit: cover 없이 비율만 지정하지 않습니다(콘텐츠가 늘어나 왜곡됨).
지양너비와 높이를 함께 고정하지 않습니다(aspect-ratio가 무시됨).