이 페이지는 Cloud Translation API를 통해 번역되었습니다.

컨테이너 쿼리 우수사례

Swetha Gopalakrishnan

Saurabh Rajpal

컨테이너 쿼리 매우 동적이고 유연한 접근 방식을 통해 설계했습니다. 컨테이너 쿼리는 @container at 규칙을 사용합니다. 이는 비슷한 @media를 사용하여 미디어 쿼리로 연결하는 대신 @container가 상위 요소를 쿼리합니다. 표시 영역 및 사용자 에이전트가 아닌 스타일 지정 정보 컨테이너를 사용합니다.

컨테이너 쿼리는 새로 사용 가능한 기준의 일부입니다.

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

컨테이너 쿼리는 컨테이너 크기에 응답함으로써 구성요소가 인터페이스 내 해당 위치로 복사됩니다. 예를 들어 카드 구성요소는 사이드바, 히어로 등 배치된 컨테이너에 따라 크기와 스타일을 정해야 합니다. 섹션 또는 페이지 본문 내의 그리드입니다.

다음 그림과 같이 매크로를 위해 미디어 쿼리를 결합할 수 있습니다. 사용자 환경설정 기반 미디어가 포함된 마이크로 레이아웃용 컨테이너 쿼리 사용하여 강력한 반응형 디자인 시스템을 만들 수 있습니다. 읽기 컨테이너 쿼리에 대해 자세히 알아보고 새로운 반응형 디자인을 도입했습니다.

다양한 유형의 스타일이 함께 작동하는 방식을 보여주는 이미지 — web.dev—새로운 반응형.

이 글은 전자상거래 회사들의 새로운 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> <ph type="x-smartling-placeholder">

컨테이너 쿼리를 구현하기 전에 "ISKU 10 in 1 Obeng" 사투..." 작은 화면에서는 왼쪽 상단이 잘립니다.

이후

</ph> <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를 개선할 수 있습니다.

리소스:

이 시리즈의 다른 기사에서 전자상거래가 어떻게 기업들은 스크롤 기반 전략과 같은 새로운 CSS 및 UI 기능을 사용하여 애니메이션, 팝오버, 컨테이너 쿼리, has() 선택기 등이 포함됩니다.