에서 Quebec 생성되거나 생성된 페이지의 레이아웃 변경 Rome

레이아웃 디자인을 추가하고 수정하여 페이지 모양을 변경합니다. Flexbox 및 CSS 그리드와 같은 CSS(Cascading Style Sheet) 웹 레이아웃 기술을 통해 구성요소가 페이지에 표시되는 방식을 선택합니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

레이아웃은 페이지에서 사용할 수 있는 컨테이너와 구성요소, 그리고 그것들이 있는 위치를 제어합니다. CSS 규칙이 적용됩니다. 다음과 같이 레이아웃을 변경할 수 있습니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 작업할 경험을 열거나 다음을 선택하여 경험을 생성합니다. 작성 > 경험.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 페이지를 만들거나 엽니다.
4. 레이아웃 탭을 선택합니다.
5. 페이지 유형에 따라 다음 중 하나를 수행하여 업데이트할 컨테이너를 선택합니다.

   페이지 유형	지침
   기존 페이지	페이지에서 레이아웃을 변경할 컨테이너를 선택합니다. 주: 또는 기본 페이지 영역의 왼쪽에 있는 컨텐츠 트리에서 컨테이너를 선택할 수 있습니다. 페이지 구조가 구조적 트리에 있으면 변경하려는 컨테이너를 보다 쉽게 찾을 수 있습니다. 컨텐츠 트리에 많은 구성 요소와 컨테이너가 있는 경우 검색 창을 사용하여 특정 컨테이너를 찾습니다.
   새 페이지	기본 페이지 영역의 왼쪽에 있는 콘텐츠 트리에서 페이지의 본문 을 선택합니다. 본문 은 페이지의 루트 요소입니다.

   새 페이지를 시작하는 경우 페이지 수준에서 레이아웃을 선택하고 나중에 컨테이너 수준에서 레이아웃을 선택할 수 있습니다. 기존 페이지의 소유자가 아닌 경우 페이지 수준에서 레이아웃을 변경할 경우의 영향에 유의하십시오.
6. 컨테이너의 레이아웃을 변경합니다.
   1. 페이지 구성 창에서 레이아웃 탭을 선택하여 사용할 레이아웃을 선택합니다.

      기존 페이지의 현재 레이아웃을 새 레이아웃으로 변경할 수 있습니다. 예를 들어 3열 레이아웃에서는 4열 레이아웃을 클릭하여 레이아웃을 변경할 수 있습니다.

      컨테이너의 레이아웃을 설정할 수도 있습니다. 다음 이미지는 UI 빌더의 레이아웃 옵션을 보여줍니다.

      

   2. 페이지를 만드는 경우 레이아웃의 새 영역에 구성요소를 추가합니다.
   3. 저장을 클릭합니다.
   4. 
   기존 페이지를 변경하기 위해 다음 비디오에서는 컨테이너 레이아웃을 3개에서 4개로 변경한 다음 네 번째 열에 새 구성 요소를 추가하는 방법을 보여 줍니다.

   

   새 페이지의 레이아웃을 설정하기 위해 다음 비디오에서는 페이지에 대해 원하는 레이아웃을 설정하는 방법을 보여 줍니다. 예를 들어 페이지에 두 개의 슬롯 또는 열이 있도록 설정할 수 있습니다. 그런 다음 각 슬롯에 컨테이너를 추가하고 각 컨테이너의 레이아웃을 변경할 수 있습니다. 페이지에 컨테이너를 추가한 후 컨테이너 수준에서 레이아웃을 설정할 수도 있습니다.

   그림 1. 페이지 레이아웃 변경

   

7. 슬롯에 구성요소를 추가합니다.
   컨테이너 구성요소로 페이지를 빌드합니다. 자세한 내용은 구성요소를 사용하여 페이지 사용자 지정 UI 빌더 문서를 참조하십시오.

   다음 방법 중 하나를 사용하여 구성요소를 추가할 수 있습니다.

   구성요소를 추가하려면	수행 방법
   페이지에서 직접(옵션 1)	콘텐츠 추가(더하기) 아이콘을 선택하고 구성 요소 탭을 선택한 다음 구성 요소를 선택합니다.
   페이지에서 직접(옵션 2)	열 레이아웃 또는 구성요소에서 앞에 추가(더하기) 또는 뒤에 추가(더하기) 아이콘을 선택한 다음, 구성요소를 선택합니다.
   콘텐츠 트리에서	콘텐츠 트리에서 + 콘텐츠 추가 를 선택한 다음, 구성 요소를 선택합니다.
   페이지 위의 플로팅 메뉴에서	열 레이아웃 또는 구성요소에서 메뉴 아이콘을 선택하고 이전 추가 또는 뒤에 추가를 선택한 다음 구성요소를 선택합니다.

8. 다음 방법 중 하나를 통해 레이아웃 스타일링 옵션을 수정합니다.

   옵션	지침
   레이아웃 스타일 변경	레이아웃을 변경할 컨테이너를 클릭합니다. 콘텐츠 트리에서 컨테이너를 클릭하거나 페이지에서 컨테이너를 클릭할 수 있습니다. 페이지 위의 떠 있는 메뉴에서 Layout(레이아웃)을 클릭합니다. 컨텐츠를 Flex 또는 Grid로 표시하도록 선택합니다. flex 또는 grid 옵션에 대한 자세한 내용은 또는 CSS 그리드 레이아웃을 사용하여 페이지 작성를 참조하십시오에서 Flexbox 레이아웃 사용 UI 빌더.
   Flex 선택	Display(표시) 목록에서 Flex(플렉스)를 선택합니다. 페이지에 컨테이너 콘텐츠를 표시하는 방법에 따라 다음 옵션을 선택합니다. CSS 스타일 상자에 옵션을 입력할 수도 있습니다. 플렉스 방향: Row, Row-reverse, Column 또는 Column-reverse 중에서 선택합니다. 콘텐츠 정당화: 다음 중 하나를 선택합니다. flex-start: 항목은 왼쪽 맞춤 콘텐츠와 유사하게 플렉스 방향의 시작 부분에 있습니다. 이것이 기본 설정입니다. Flex-end: 항목이 오른쪽 맞춤 콘텐츠와 유사하게 플렉스 방향의 끝에 있습니다. 간격: 항목이 균등하게 분산됩니다. 주변 공간: 항목 주위에 동일한 공간을 두고 항목이 균등하게 분산됩니다. 균등한 간격: 항목 사이의 간격이 동일합니다. 항목 정렬: 교차 축을 따라 플렉스 콘텐츠를 표시하는 방법을 정의합니다. 선택 항목은 다음과 같습니다. 스트레치: 콘텐츠를 늘려 컨테이너를 채웁니다. 이것이 기본 설정입니다. Flex-start: 교차 축의 시작 부분에 콘텐츠를 배치합니다. Flex-end: 교차 축의 끝에 콘텐츠를 배치합니다. 가운데: 콘텐츠를 교차 축의 가운데에 맞춥니다. 기준선: 기준선 정렬과 동일하게 콘텐츠를 정렬합니다. 높이: 자동으로 또는 수동으로 높이를 설정합니다. 너비: Flexbox 항목의 높이를 자동 또는 수동으로 설정합니다. 여백: flexbox 항목 사이의 최소 거리를 설정합니다. 패딩: flexbox 항목의 각 면에 대한 패딩을 설정합니다.
   그리드 선택	표시(Display) 목록에서 그리드(Grid)를 선택합니다. 다음 정보를 입력합니다. 높이: 자동으로 또는 수동으로 높이를 설정합니다. 너비: 격자 항목의 높이를 자동 또는 수동으로 설정합니다. 여백: 그리드 항목 사이의 최소 거리를 설정합니다. 패딩: 그리드 항목의 각 면에 대한 패딩을 설정합니다.