응답형 레이아웃

AEM에서는 레이아웃 컨테이너 구성 요소를 사용하여 사용자 페이지에 대한 응답형 레이아웃을 보유할 수 있습니다.

이 레이아웃은 응답형 격자 내에 구성 요소를 배치할 수 있도록 해주는 단락 시스템을 제공합니다. 이 격자를 사용하면 장치/창 크기 및 형식에 따라 레이아웃을 다시 정렬할 수 있습니다. 구성 요소는 레이아웃 모드와 함께 사용됩니다. 이 모드에서는 장치에 종속적인 응답형 레이아웃을 만들고 편집할 수 있습니다.

레이아웃 컨테이너:

• 구성 요소를 격자에 나란히 배치하고 언제 구성 요소가 축소되거나 리플로우되어야 하는지를 지정하는 기능과 함께, 수평 격자에 맞춤 기능을 제공합니다.
• 미리 정의된 중단점(예: 전화, 태블릿 등)을 사용하여 관련 장치/방향에 대한 필수 동작을 정의할 수 있습니다.
  • 예를 들어, 구성 요소 크기나 구성 요소를 특정 장치에서 볼 수 있도록 할지 여부를 사용자 지정할 수 있습니다.
• 열 컨트롤을 사용하도록 중첩될 수 있습니다.

그러면 사용자는 컨텐츠가 에뮬레이터를 사용하여 어떻게 특정 장치에 대해 렌더링될지 알 수 있습니다.

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

• 레이아웃 컨테이너 구성 요소
  이 구성 요소는 구성 요소 브라우저에서 사용할 수 있으며, 응답형 격자 내에 구성 요소를 추가 및 배치할 수 있도록 해주는 격자 단락 시스템을 제공합니다. 또한 페이지에서 기본 단락 시스템으로 설정할 수도 있습니다.
  
• 레이아웃 모드
  레이아웃 컨테이너를 페이지에 배치하면 레이아웃 모드를 사용하여 컨텐츠를 응답형 격자 내에 배치할 수 있습니다.
• 에뮬레이터
  에뮬레이터를 사용하면 구성 요소의 크기를 대화 방식으로 변경하여 장치/창 크기에 따라 레이아웃을 다시 정렬하는 응답형 웹 사이트를 만들고 편집할 수 있습니다. 사용자는 컨텐츠가 에뮬레이터를 사용하여 어떻게 렌더링될지 알 수 있습니다.

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

• 중단점을 사용하여 장치 너비를 기반으로 달라지는 컨텐츠 레이아웃을 정의할 수 있습니다(장치 유형 및 방향과 관련).
• 동일한 중단점 및 컨텐츠 레이아웃을 사용하여 컨텐츠가 데스크톱에서 브라우저 창의 크기에 맞게 조절되도록 할 수 있습니다.
  
• 수평 격자에 맞춤 기능을 사용하여 구성 요소를 격자에 배치하고, 필요에 따라 크기를 변경하고, 언제 구성 요소가 나란히 또는 위/아래에 있도록 축소되거나 리플로우되어야 하는지 지정할 수 있습니다.
• 특정 장치 레이아웃의 구성 요소를 숨길 수 있습니다.
  
• 열 컨트롤을 구현할 수 있습니다.

프로젝트에 따라 [레이아웃 컨테이너]는 페이지의 기본 단락 시스템으로 사용되거나 구성 요소 브라우저를 통해 페이지에 추가할 수 있는 구성 요소(또는 둘 다)로 사용될 수 있습니다.

웹 사이트 컨텐츠를 만들 때에는 컨텐츠를 보는 데 사용할 장치에 적절하게 컨텐츠가 표시되도록 해야 할 것입니다.

AEM을 사용하면 장치의 너비에 따라 레이아웃을 정의할 수 있습니다.

• 애뮬레이터를 사용하면 다양한 장치에서 이러한 레이아웃을 에뮬레이션할 수 있습니다. 장치 유형은 물론 장치 회전 옵션으로 선택한 방향도 너비가 변함에 따라 선택한 중단점에 영향을 줄 수 있습니다.
• 중단점은 레이아웃 정의를 분리하는 점입니다.
  
  • 특정 레이아웃을 사용하는 모든 장치의 최대 너비(픽셀 단위)도 효과적으로 정의할 수 있습니다.
    
  • 대개는 표시 너비에 따라 장치 선택에 중단점을 사용할 수 있습니다.
    
  • 중단점의 범위는 다음 중단점까지 왼쪽으로 확장됩니다.
  • 중단점을 명시적으로 선택할 수는 없습니다. 장치 및 방향을 선택하면 적절한 중단점이 자동으로 선택됩니다.
    

특정 너비가 없고 기본 중단점과 관련된 데스크톱 장치입니다(즉, 마지막으로 구성된 중단점 위의 모든 것).

에뮬레이터를 사용하여 에뮬레이션하고 레이아웃을 정의할 특정 장치를 선택하면 관련 중단점도 강조 표시됩니다. 수행하는 모든 레이아웃 변경 작업은 중단점이 적용되는 다른 장치(즉, 활성 중단점 마커의 왼쪽에, 하지만 다음 중단점 마커의 앞에 배치된 모든 장치)에 적용할 수 있게 됩니다.

예를 들어, 에뮬레이션하고 레이아웃을 정의할 장치로 iPhone 6 Plus(너비 540픽셀로 정의됨)를 선택하면 중단점 Phone(768픽셀로 정의됨)도 활성화됩니다. iPhone 6에 대해 수행하는 모든 레이아웃 변경 작업은 iPhone 5(320픽셀로 정의됨)와 같은 Phones 중단점 아래의 다른 장치에 적용됩니다.

레이아웃 컨테이너는 다음과 같은 단락 시스템입니다.

• 다른 구성 요소를 포함합니다.
  
• 레이아웃을 정의합니다.
• 변경에 응답합니다.

선택할 수 있는 기타 구성 요소가 있으면 레이아웃 컨테이너에서 작업을 수행(복사, 잘라내기, 삭제)할 수 있습니다(편집 모드에 있을 때).

레이아웃 컨테이너로 구현된 응답형 격자의 레이아웃을 구성하려면 레이아웃 모드를 사용해야 합니다. 

레이아웃 모드는 두 가지 방법으로 시작할 수 있습니다.

레이아웃 모드에 있는 경우 격자에서 다양한 작업을 수행할 수 있습니다.