레이아웃 컨테이너 및 레이아웃 모드 구성 configuring-layout-container-and-layout-mode

응답형 레이아웃은(는) 응답형 웹 디자인을 구현하기 위한 메커니즘입니다. 이를 통해 콘텐츠 작성자는 사용자가 사용하는 장치에 따라 레이아웃과 차원이 다른 웹 페이지를 만들 수 있습니다.

AEM에서는 메커니즘을 조합하여 페이지에 대한 반응형 레이아웃을 실현합니다.

이러한 응답형 격자 메커니즘을 사용하여 다음과 같은 작업을 수행할 수 있습니다.

에뮬레이터 활성화 enabling-emulator

Project Archetype 및 표준 사이트 템플릿이(가) 이미 에뮬레이터를 사용할 수 있도록 설정되었습니다. 핵심 구성 요소 또는 Archetype을 기반으로 하지 않는 자체 콘텐츠를 개발한 경우, 이러한 기능을 활용하면서 구성 요소를 개발하는 방법에 대한 자세한 내용은 반응형 디자인 문서를 참조하십시오.

사이트에 대한 레이아웃 모드 활성화 activate-layout-mode-for-your-site

레이아웃 모드를 사용하면 에뮬레이터를 사용하여 여러 장치의 콘텐츠 레이아웃을 조정할 수 있습니다. WKND 샘플 사이트가 이미 레이아웃 모드에 대해 활성화되어 있습니다. 다음 단계에 따라 사이트를 활성화하십시오.

중단점 구성 configure-breakpoints

중단점은 반응형 디자인에 중요하며 콘텐츠를 타겟 디바이스에 조정하는 방법 및 시기를 정의합니다. 하지만 소개하는 각 중단점은 콘텐츠를 수용할 수 있도록 작성자에게 추가 작업을 생성하므로 주의하십시오. 기본 중단점이 항상 있는 경우를 포함하여 두 개의 중단점으로 충분할 수 있습니다. Adobe은 기본값을 포함하여 세 개 이상의 중단점을 만들지 말 것을 권장합니다(예: cq:responsive/breakpoint 아래의 두 개 이하의 노드).

중단점은 새 프로젝트와 기존 프로젝트 모두에 대해 고려되어야 합니다.

상속으로 인해 콘텐츠의 루트 페이지에 대해서만 이 작업을 수행하면 됩니다.

CRXDE Lite을 사용하여 중단점 구성 configuring-breakpoints-using-crxde-lite

XML을 사용하여 중단점 구성 configuring-breakpoints-using-xml

중단점은 적절한 템플릿(또는 콘텐츠) 폴더 아래의 .context.html의 <jcr:content> 섹션 내에 있습니다.

예제 정의:

<cq:responsive jcr:primaryType="nt:unstructured">
  <breakpoints jcr:primaryType="nt:unstructured">
    <phone jcr:primaryType="nt:unstructured" title="{String}Phone" width="{Decimal}768"/>
    <tablet jcr:primaryType="nt:unstructured" title="{String}Tablet" width="{Decimal}1200"/>
  </breakpoints>
</cq:responsive>

페이지에 대한 구성 요소 크기 조정 활성화 enable-component-resizing-for-the-page

레이아웃 모드에서 구성 요소의 크기를 조정하는 것은 WKND 샘플 사이트에서 사용할 수 있는 응답형 디자인의 중요한 부분입니다. 다음 단계에 따라 사이트를 활성화하십시오.

레이아웃 컨테이너를 기본 Parsys로 설정 set-layout-container-as-main-parsys

페이지의 기본 parsys를 레이아웃 컨테이너로 설정하려면 parsys를 다음과 같이 정의합니다.

wcm/foundation/components/responsivegrid

다음 중 하나에서:

다음 두 예는 정의를 보여 줍니다.

반응형 CSS 포함 include-the-responsive-css

LESS를 사용하는 중단점용 CSS css-for-breakpoints-using-less

AEM에서는 LESS를 사용하여 필요한 CSS의 일부를 생성하지만 이를 프로젝트에 포함해야 합니다.

추가 구성 및 함수 호출을 제공하려면 클라이언트 라이브러리를 만들어야 합니다. 다음 LESS 추출은 프로젝트에 추가해야 하는 최소값의 예입니다.

@import (once) "/libs/wcm/foundation/clientlibs/grid/grid_base.less";

/* maximum amount of grid cells to be provided */
@max_col: 12;

/* default breakpoint */
.aem-Grid {
  .generate-grid(default, @max_col);
}

/* phone breakpoint */
@media (max-width: 768px) {
  .aem-Grid {
    .generate-grid(phone, @max_col);
  }
}

/* tablet breakpoint */
@media (min-width: 769px) and (max-width: 1200px) {
  .aem-Grid {
    .generate-grid(tablet, @max_col);
  }
}

기본 격자선 정의는 다음 위치에 있습니다.

/libs/wcm/foundation/clientlibs/grid/grid_base.less

스타일 고려 사항 styling-considerations

응답형 컨테이너 내에 있는 구성 요소의 크기는 응답형 격자 크기에 따라 해당 HTML DOM 요소와 함께 조정됩니다. 따라서 이러한 상황에서는 고정 너비(포함된) DOM 요소의 정의를 피하거나 업데이트하는 것이 좋습니다.

예:

크기 조정 및 적응형 이미지 규정 준수 resizing-and-adaptive-image-compliance

그리드 내의 구성 요소 크기를 조정하면 다음 리스너가 적절하게 트리거됩니다.

응답형 격자에 포함된 응용 이미지의 내용을 올바르게 크기 조정하고 업데이트하려면 REFRESH_PAGE 수신자로 설정된 afterEdit을(를) 포함된 모든 구성 요소의 EditConfig 파일에 추가해야 합니다.

예:

<cq:listeners jcr:primaryType="cq:EditListenersConfig" afteredit="REFRESH_PAGE" />

적응형 이미지 메커니즘은 윈도우의 현재 크기에 대한 정확한 이미지의 선택을 제어하는 스크립트를 통해 이용 가능하게 된다. DOM이 준비된 후 또는 전용 이벤트를 수신할 때 활성화됩니다. 현재 사용자의 작업 결과를 제대로 반영하려면 페이지를 새로 고쳐야 합니다.

페이지에 대한 레이아웃 컨테이너 구성 요소 활성화 enable-the-layout-container-component-for-page

효과적인 반응형 레이아웃을 위해 콘텐츠 작성자는 레이아웃 컨테이너 구성 요소의 인스턴스를 페이지로 드래그할 수 있어야 합니다. WKND 샘플 사이트에 대해 이미 활성화되어 있습니다. 다음 단계에 따라 사이트를 활성화하십시오.

페이지 편집을 위해 레이아웃 컨테이너 구성 요소 활성화 enable-the-layout-container-component-for-page-editing

작성자가 컨텐츠 페이지에 응답형 그리드를 더 추가할 수 있도록 하려면 페이지에 대해 레이아웃 컨테이너 구성 요소를 활성화해야 합니다. 다음 중 하나를 사용하여 이 작업을 수행할 수 있습니다.

레이아웃 컨테이너의 그리드 구성 configure-the-grid-of-the-layout-container

페이지 템플릿을 편집하여 레이아웃 컨테이너 의 각 특정 인스턴스에 사용할 수 있는 열 수를 구성할 수 있습니다.