컨테이너 쿼리
매우 동적이고 유연한 접근 방식을 통해
설계했습니다. 컨테이너 쿼리는 @container
at 규칙을 사용합니다. 이는 비슷한
@media
를 사용하여 미디어 쿼리로 연결하는 대신 @container
가 상위 요소를 쿼리합니다.
표시 영역 및 사용자 에이전트가 아닌 스타일 지정 정보 컨테이너를 사용합니다.
컨테이너 쿼리는 새로 사용 가능한 기준의 일부입니다.
브라우저 지원
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
컨테이너 쿼리는 컨테이너 크기에 응답함으로써 구성요소가 인터페이스 내 해당 위치로 복사됩니다. 예를 들어 카드 구성요소는 사이드바, 히어로 등 배치된 컨테이너에 따라 크기와 스타일을 정해야 합니다. 섹션 또는 페이지 본문 내의 그리드입니다.
다음 그림과 같이 매크로를 위해 미디어 쿼리를 결합할 수 있습니다. 사용자 환경설정 기반 미디어가 포함된 마이크로 레이아웃용 컨테이너 쿼리 사용하여 강력한 반응형 디자인 시스템을 만들 수 있습니다. 읽기 컨테이너 쿼리에 대해 자세히 알아보고 새로운 반응형 디자인을 도입했습니다.
<ph type="x-smartling-placeholder">이 글은 전자상거래 회사들의 새로운 CSS 및 UI 기능을 사용하여 웹사이트를 개선했습니다. 이번에는 을 통해 컨테이너 쿼리를 사용하고 그로부터 혜택을 얻은 방법을 살펴봤습니다.
redBus
redBus는 모바일 및 데스크톱 버전에 대해 서로 다른 코드를 유지하고 제공합니다. 애플리케이션에 컨테이너 쿼리를 구현한 후 즐길 거리 및 cargo 페이지에서 이 코드를 통합했으며 하나의 코드베이스로 만들 수 있습니다. 이렇게 하면 시간을 절약할 수 있습니다 다음 예는 cargo 페이지를 사용하여 이를 보여줍니다.
코드
다음 예에서 .bpdpCardWrapper
는 상위 컨테이너입니다.
이름은 bpdpSection
입니다.
컨테이너 bpdpSection
의 최소 너비가 744px인 경우 font-size
.bpdpCardContainer
및 line-height
가 선택한 구성요소의
.subTxt, .bpdpAddress
이 업데이트되었습니다.
//Code for Container Queries
.bpdpCardWrapper {
container-type: inline-size;
container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
.bpdpCardContainer{
font-size: 1rem;
line-height: 1.5rem;
}
.subTxt, .bpdpAddress{
font-size: 0.875rem;
line-height: 1.25rem;
}
}
영향
이전 (여러 코드베이스) | 이후 (단일 코드베이스) | |
---|---|---|
인프라 | 별도의 인프라 (높은 비용). | 동일한 인프라 (비용 절감) |
디자인 | UI는 분리되지만 일관성이 낮습니다. | 해결이 어렵지만 가능함 |
성능 | 시스템이 분리되어 있기 때문에 처리하기는 쉽지만 성능 개선에 드는 노력이 중복됩니다. | 페이지 및 기능에 따라 다르지만 redBus PageSpeedInsights 점수는 80점 이상입니다. |
개발 | 개발자팀을 분리합니다. | 시간 30%~40% 단축. |
Tokopedia
Tokopedia의 제품 세부정보 페이지 (PDP)에는 매장과 확인할 수 있습니다 이전에는 이 페이지의 레이아웃이 세 개의 왼쪽에 있는 제품 이름이 잘려서 잘린 상태로 표시될 수 있습니다. 화면 크기 (다음 '이전' 동영상 참고)를 참고하세요.
이 레이아웃 문제를 해결하기 위해 팀은 컨테이너 쿼리를 쉽고 빠르게 채택했습니다. 이 구현 후, 회사들은 제품 이름은 항상 전체가 표시되었습니다 (다음 '이후' 동영상 참고).
이전
<ph type="x-smartling-placeholder">이후
<ph type="x-smartling-placeholder">코드
다음 코드는 infowrapper
라는 상위 컨테이너의 크기를 쿼리합니다.
infowrapper
의 최대 너비가 360픽셀이면 하위 구성요소의
width
, margin,
, padding
가 조정됩니다.
container-type
를 inline-size
로 설정하면 인라인 방향 크기를 쿼리합니다.
를 참조하세요. 영어와 같은 라틴어의 경우 너비는
텍스트가 왼쪽에서 오른쪽으로 인라인으로 흐르기 때문입니다.
export const styCredibilityContainer = css`
container-name: infowrapper;
container-type: inline-size;
`;
export const styBtnShopFollow = css`
margin-left: auto;
width: 98px;
@container infowrapper (max-width: 360px) {
width: 100%;
margin-top: 2px;
margin-bottom: 8px;
padding-left: 60px;
}
`;
export const styBottomRow = css`
margin-top: 4px;
padding-left: 60px;
display: flex;
align-items: center;
@container infowrapper (max-width: 360px) {
padding-left: 0px;
}
> div {
text-align: left;
margin-top: 0 !important;
}
`;
컨테이너 쿼리 사용 시 고려해야 할 사항
Tokopedia는 사이트에서 텍스트 생략 부호를 찾아 사용 사례를 찾았습니다. 이는 컨테이너가 너무 작아서 콘텐츠가 잘릴 수 있음을 나타냅니다. 해제되어 있습니다.
전자상거래 사이트에서 컨테이너 쿼리를 사용하는 또 다른 좋은 사용 사례는 구성 요소가 포함됩니다. 예를 들어 장바구니에 추가 버튼이 표시될 수 있습니다. 다르게 표시됩니다 (예: 페이지의 기본 CTA인 경우 텍스트가 포함된 제품 카드 및 아이콘). 이 버튼은 컨테이너 쿼리에 적절할 수 있습니다.
원하는 경우 사이트를 점진적으로 개선할 수 있습니다. 예를 들어 Tokopedia의 타원 예와 같이 더 작은 사용 사례로 시작할 수 있습니다. 거기에 컨테이너 쿼리를 구현합니다 그런 다음 점차 더 많은 사례와 CSS를 개선할 수 있습니다.
리소스:
- 안정적인 브라우저에서 컨테이너 쿼리가 실행됨
- 컨테이너 쿼리 - 브라우저에서 설계하기
- 컨테이너 쿼리 데모
- 데모: 컨테이너 쿼리 카드
- 동영상: 웹 UI의 새로운 기능 - I/O 2023
- 버그를 신고하거나 새 기능을 요청하시겠어요? 의견을 들려주세요.
이 시리즈의 다른 기사에서 전자상거래가 어떻게
기업들은 스크롤 기반 전략과 같은 새로운 CSS 및 UI 기능을 사용하여
애니메이션, 팝오버, 컨테이너 쿼리, has()
선택기 등이 포함됩니다.