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

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

프로시저

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

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

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

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

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

      

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

   

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

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

   

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

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

   구성요소를 추가하려면	수행 방법
   구성요소 목록에서	의 왼쪽 열UI 빌더에 있는 도구 상자 아이콘을 선택합니다. 구성요소 목록에서 페이지로 구성요소를 드래그합니다.
   페이지에서 직접	페이지에서 + 를 선택하고 목록에서 구성 요소를 선택합니다. 구성요소를 검색하거나 목록을 스크롤할 수 있습니다.
   페이지 위의 플로팅 메뉴	구성요소 위에 있는 부동 메뉴를 선택합니다. 다음 앞에 추가 또는 이후에 추가를 선택합니다. 구성요소 목록에서 구성요소를 선택합니다.
   컨텐츠 트리	다음 두 가지 방법으로 컨텐츠 트리에서 구성요소를 추가할 수 있습니다. 콘텐츠 트리의 컨테이너 아래에 있는 +구성 요소 추가 를 선택합니다. 그런 다음 구성 요소 목록에서 구성 요소를 선택합니다. 콘텐츠 트리의 오른쪽에 있는 +추가 를 선택한 다음, 구성 요소를 선택합니다. 그런 다음 구성 요소 목록에서 구성 요소를 선택합니다.

8. 다음 중 한 가지 방법으로 레이아웃 스타일링 옵션을 수정합니다.

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