반응형 레이아웃 responsive-layout

• 예를 들어 구성 요소 크기나 구성 요소를 특정 디바이스에서 볼 수 있도록 할지 여부를 사용자 정의할 수 있습니다.

레이아웃 컨테이너 구성 요소

이 구성 요소는 구성 요소 브라우저에서 사용할 수 있으며, 응답형 그리드 내에 구성 요소를 추가 및 배치할 수 있도록 해 주는 그리드 단락 시스템을 제공합니다. 또한 페이지에서 기본 단락 시스템으로 설정할 수도 있습니다.

레이아웃 모드

레이아웃 컨테이너를 페이지에 배치하면 레이아웃 모드를 사용하여 콘텐츠를 응답형 그리드 내에 배치할 수 있습니다.

에뮬레이터
이를 사용하여 구성 요소의 크기를 상호 작용 방식으로 조정하여 디바이스/창 크기에 따라 레이아웃을 재정렬하는 반응형 웹 사이트를 만들고 편집할 수 있습니다. 그러면 사용자는 콘텐츠가 에뮬레이터를 사용하여 어떻게 렌더링될지 알 수 있습니다.

에뮬레이터를 사용하면 다양한 디바이스에서 이러한 레이아웃을 에뮬레이션할 수 있습니다. 디바이스 유형은 물론 디바이스 회전 옵션으로 선택한 방향도 폭이 변함에 따라 선택한 중단점에 영향을 줄 수 있습니다.

중단점은 레이아웃 정의를 분리하는 점입니다.

• 특정 레이아웃을 사용하는 모든 디바이스의 최대 폭(픽셀 단위)도 효과적으로 정의할 수 있습니다.
• 대개는 표시 폭에 따라 디바이스 선택에 중단점을 사용할 수 있습니다.
• 중단점의 범위는 다음 중단점까지 왼쪽으로 확장됩니다.
• 중단점을 명시적으로 선택할 수는 없습니다. 디바이스 및 방향을 선택하면 적절한 중단점이 자동으로 선택됩니다.

도구 모음에서 모드 메뉴를 사용하여  레이아웃  모드 선택

• 편집  모드나  타겟팅  모드로 전환하는 것처럼 레이아웃 모드 선택
• 레이아웃 모드가 지속적으로 유지되며 모드 선택기를 통해 다른 모드를 선택할 때까지 레이아웃 모드를 벗어나지 않습니다.

개별 구성 요소를 편집하는 경우

• 구성 요소의 빠른 작업 메뉴에서 레이아웃 선택 사항을 사용하여 레이아웃 모드로 전환할 수 있습니다.
• 구성 요소를 편집하는 동안 레이아웃  모드가 지속되며 초점이 다른 구성 요소로 변경되면  편집  모드로 되돌아갑니다.

파란색 점을 사용하여 콘텐츠 구성 요소 크기를 변경할 수 있습니다. 크기를 변경하면 항상 격자에 맞춰집니다. 크기를 변경하면 정렬을 위해 배경 격자가 표시됩니다.

콘텐츠 구성 요소를 선택합니다. 도구 모음을 사용하면 다음 작업을 수행할 수 있습니다.

• 상위 - 전체적으로 작업을 수행할 전체 레이아웃 컨테이너 구성 요소를 선택할 수 있습니다.
• 새 라인으로 이동 - 그리드 내에서 사용할 수 있는 공간에 따라 구성 요소가 새 라인으로 이동됩니다.
• 구성 요소 숨기기 - 구성 요소가 보이지 않게 됩니다(레이아웃 컨테이너의 도구 모음에서 복원 가능).

레이아웃 모드에서 구성 요소를 여기로 드래그 ​하여 전체 구성 요소를 선택할 수 있습니다. 이 모드에 대한 도구 모음이 표시됩니다.

도구 모음은 레이아웃 구성 요소의 상태와 이에 속하는 구성 요소에 따라 옵션이 달라집니다. 예:

• 상위 - 상위 구성 요소를 선택합니다.

  

• 숨겨진 구성 요소 표시 - 모든 또는 개별 구성 요소를 표시합니다. 숫자는 현재 숨겨진 구성 요소 수를 표시합니다. 카운터는 몇 개의 구성 요소가 숨겨져 있는지 표시합니다.

  

• 중단점 레이아웃 되돌리기 - 기본 레이아웃으로 되돌립니다. 사용자 정의된 레이아웃이 적용되지 않습니다.

  

• 새 라인으로 이동 - 공간이 있으면 구성 요소를 위로 이동합니다.

  

• 구성 요소 숨기기 - 현재 구성 요소를 숨깁니다.

  

• 구성 요소 숨김 취소 상위 구성 요소를 선택하여 숨겨진 구성 요소 표시 옵션과 함께 작업 도구 모음을 표시할 수 있습니다. 이 예시에는 두 개의 구성 요소가 숨겨져 있습니다.

  

숨겨진 구성 요소 표시 옵션을 선택하면 원래 위치에서 현재 숨겨진 구성 요소가 파란색으로 표시됩니다.

모두 복원 ​을 선택하면 숨겨진 모든 구성 요소가 숨김 취소됩니다.