반응형 레이아웃에서 간격을 유지하는 데 도움이 되는 새로운 CSS 속성입니다.
가로세로 비율
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
가로세로 비율은 다음 크기에서 가장 일반적으로 두 개의 정수와 콜론으로 표현됩니다. 너비:높이 또는 x:y일 수 있습니다. 사진의 가장 일반적인 가로세로 비율은 4:3과 3:2인 반면, 동영상은 및 최신 소비자 카메라는 가로세로 비율이 16:9인 경향이 있습니다.
<ph type="x-smartling-placeholder">반응형 디자인의 도래와 함께 가로 세로 비율을 유지하는 것이 특히 이미지 크기가 다르고 사용 가능한 애셋에 따라 요소 크기가 달라지기 때문에 있습니다.
다음은 가로세로 비율을 유지하는 것이 중요한 예입니다.
- 상위 요소 너비의 100% 를 차지하고 높이가 유지되어야 하는 반응형 iframe 만들기 특정 표시 영역 비율
- 이미지, 동영상, 임베딩에 대한 기본 자리표시자 컨테이너 만들기 항목이 로드되고 공간을 차지할 때 레이아웃 재배치 방지
- 대화형 데이터 시각화 또는 SVG 애니메이션을 위한 균일하고 반응형 공간 생성
- 카드, 캘린더 날짜 등의 다중 요소 구성요소를 위한 균일하고 반응형 공간 생성
- 크기가 다양한 여러 이미지를 위한 균일하고 반응형 공간 생성(
object-fit
)
개체 맞춤
가로세로 비율을 정의하면 반응형 컨텍스트에서 미디어 크기를 조정하는 데 도움이 됩니다. 이 예시의 또 다른 도구는
버킷은 object-fit
속성으로, 사용자는 객체 (예: 이미지)가
그 블록을 채워야 합니다.
initial
및 fill
값은 이미지를 재조정하여 공간을 채웁니다. 이 예에서는
픽셀이 재조정되므로 이미지가 찌그러지고 흐려집니다. 이는 이상적이지 않습니다. object-fit: cover
사용
이미지의 최소 크기를 조정하여 공간을 채우고 이를 기준으로 이미지를 적당히 자릅니다.
측정기준을 선택할 수 있습니다. '확대'됩니다. 가장 낮은 경계에 있습니다. object-fit: contain
는 전체 이미지가
은 항상 표시됩니다. 따라서 가장 큰 경계의 크기를 갖는 cover
의 반대입니다.
(이 예에서는 너비) 기본 가로세로 비율을 유지하도록 이미지 크기를 조절합니다.
공간에 잘 어우러집니다. object-fit: none
케이스에서는 가운데가 잘린 이미지가 표시됩니다.
(기본 개체 위치)를 원래 크기로 유지합니다.
object-fit: cover
는 처리할 때 우수한 균일한 인터페이스를 보장하기 위해 대부분의 상황에서 작동하는 경향이 있습니다.
이런 식으로 정보를 잃을 수 있습니다 (이미지의 일부분이
(가장 긴 가장자리)
이러한 세부 사항이 중요한 경우 (예: 뷰티 제품을 평평하게 배치하는 경우) 중요한 콘텐츠를 자르는 것은 허용되지 않습니다. 따라서 이상적인 시나리오는 UI 공간에 맞게 자르지 않고 다양한 크기로 표시합니다.
기존 팁: padding-top
로 가로세로 비율 유지
<ph type="x-smartling-placeholder">
반응성을 높이기 위해 가로세로 비율을 사용할 수 있습니다. 이렇게 하면 미디어의 나머지 부분을 개별 축 (높이 또는 너비)의 기준으로 삼을 수 있습니다.
이미지의 크기를 기반으로 가로세로 비율을 유지하기 위해 현재 잘 알려진 교차 브라우저 솔루션입니다.
"패딩-탑 해킹"으로 알려져 있습니다. 이 솔루션에는 상위 컨테이너와
하위 컨테이너를 배치하면 됩니다. 그런 다음 가로 세로 비율을 백분율로 계산하여
padding-top
로 설정합니다. 예를 들면 다음과 같습니다.
- 가로세로 비율 1:1 = 1 / 1 = 1 =
padding-top: 100%
- 4:3 가로세로 비율 = 3 / 4 = 0.75 =
padding-top: 75%
- 3:2 가로세로 비율 = 2 / 3 = 0.66666 =
padding-top: 66.67%
- 16:9 가로세로 비율 = 9 / 16 = 0.5625 =
padding-top: 56.25%
이제 가로세로 비율 값을 식별했으므로 상위 컨테이너에 적용할 수 있습니다. 다음 예를 참고하세요.
<div class="container">
<img class="media" src="..." alt="...">
</div>
그러면 다음과 같은 CSS를 작성할 수 있습니다.
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.media {
position: absolute;
top: 0;
}
aspect-ratio
에서 가로세로 비율 유지
<ph type="x-smartling-placeholder">
안타깝게도 이러한 padding-top
값을 계산하는 것은 그다지 직관적이지 않으며
추가적인 오버헤드와 포지셔닝이 필요합니다. 새로운 기본 aspect-ratio
CSS 사용
속성, 관점을 유지하기 위한 언어
훨씬 더 명확해집니다.
동일한 마크업을 사용하여 padding-top: 56.25%
를 aspect-ratio: 16 / 9
로 바꿀 수 있습니다.
width
/ height
의 지정된 비율로 aspect-ratio
.container { width: 100%; padding-top: 56.25%; }
.container { width: 100%; aspect-ratio: 16 / 9; }
padding-top
대신 aspect-ratio
를 사용하는 것이 훨씬 더 명확하며 패딩을 점검하지 않습니다.
속성을 사용하여 일반적인 범위 밖의 작업을 할 수 있습니다.
또한 이 새로운 속성은
가로세로 비율을 auto
로 설정합니다. 여기서 '기본 가로세로 비율로 대체된 요소는 해당 가로세로 비율을 사용합니다.
비율 그렇지 않으면 상자에 선호되는 가로세로 비율이 없습니다." auto
와 <ratio>
가 모두
함께 지정되지 않을 경우 기본 가로세로 비율은 width
를 height
로 나눈 지정된 비율입니다.
교체된 요소
고유한 가로세로 비율. 이 경우 해당 가로세로 비율이 대신 사용됩니다.
예: 그리드의 일관성
이는 CSS 그리드 및 Flexbox와 같은 CSS 레이아웃 메커니즘에서도 잘 작동합니다. 목록 살펴보기 스폰서 아이콘 그리드와 같이 1:1 가로세로 비율을 유지하려는 하위 항목이 있는 경우:
<ul class="sponsor-grid">
<li class="sponsor">
<img src="..." alt="..."/>
</li>
<li class="sponsor">
<img src="..." alt="..."/>
</li>
</ul>
.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.sponsor img {
aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain;
}
예: 레이아웃 변경 방지
aspect-ratio
의 또 다른 장점은 자리표시자 공간을 만들어
레이아웃 변경 횟수를 통해 웹 바이탈을 개선할 수 있습니다. 이 첫 번째 부분에서는
예를 들어 Unsplash와 같은 API에서 애셋을 로드하면
미디어 로드가 완료되면 레이아웃이 변할 수 있습니다.
반면에 aspect-ratio
를 사용하면 이러한 레이아웃 변경을 방지하는 자리표시자를 만듭니다.
img {
width: 100%;
aspect-ratio: 8 / 6;
}
보너스 팁: 가로세로 비율의 이미지 속성
이미지의 가로세로 비율을 설정하는 또 다른 방법은 이미지 속성을 사용하는 것입니다. 이미지의 크기를 미리 알고 있다면 권장사항:
이러한 크기를 width
및 height
로 설정합니다.
위의 예에서는 크기가 800x600픽셀임을 알면 이미지 마크업이 <img src="image.jpg"
alt="..." width="800" height="600">
와 같이 표시됩니다. 전송된 이미지의 가로세로 비율이 동일한 경우
정확한 픽셀 값을 사용할 필요는 없지만
속성 값을 사용하여 비율을 설정하고 width: 100%
의 스타일과 결합하여
이미지가 적절한 공간을 차지하도록 해야 합니다. 모두 합쳐지면 다음과 같은 형태가 됩니다.
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
결국 효과는 aspect-ratio
CSS를 통해 이미지를 만들고 누적 레이아웃 이동을 피할 수 있습니다 (페이지의 데모 참조
Codepen)이 있습니다.
결론
새로운 aspect-ratio
CSS 속성을 사용하면 여러 최신 브라우저에서 출시되며
미디어 및 레이아웃 컨테이너의 가로세로 비율은 조금 더 명확해집니다.
사진 제공: 에이미 샴블렌 및 라이오넬 Gustave(Unsplash).