응답형 작성을 위한 레이아웃 조정

다양한 양식 요소에 대해 반응형 작성을 사용하여 페이지를 만들 때 레이아웃을 조정하여 더 작은 크기에서 페이지의 모양과 느낌을 개선하는 방법을 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

페이지 사용성을 높이는 방법은 중단점 간에 레이아웃을 조정하여 구성 요소를 조정하는 것입니다. 레이아웃을 조정하기 위한 다양한 옵션이 있습니다. 이 절차에서는 모바일 양식 요소에 대한 탭 구성요소의 레이아웃을 조정합니다.

속성 창에 있는 대부분의 열 레이아웃 옵션은 다양한 양식 요소에 대해 편집할 수 있습니다. 그러나 다음 옵션은 폼 팩터 전반에 걸쳐 전역 값을 가집니다.

• 열 수
• 아래 열 스태킹(픽셀) 옵션
• 접근성 아래의 모든 옵션

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. 작업할 경험을 열거나 > 경험 생성을 선택하여 환경을 생성합니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 다음에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 응답형 작성을 사용하여 처음부터 페이지를 생성합니다.
   페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성을 참조하십시오.
4. 상단에서 데스크톱 폼 팩터 아이콘이 선택되어 있는지 확인합니다.
   
5. 스테이지에서 + 콘텐츠 추가를 선택합니다.
6. Layouts(레이아웃) 탭에서 Single column(단일 열)을 선택합니다.
7. 탭 구성요소를 추가합니다.
   1. 스테이지의 열 가운데에 있는 + 아이콘을 선택합니다.
   2. 구성요소 탭에서 탭 구성요소를 찾아 선택합니다.
   3. 저장을 선택합니다.
8. 구성 패널의 구성 탭에서 편집 아이콘을 선택하여 첫 번째 탭의 이름을 편집합니다.
   
9. 탭 레이블에 Tab 1을 입력합니다.
10. 탭 ID에 tab_1를 입력합니다.
11. 저장을 선택합니다.
12. 두 번째 탭을 추가합니다.
    1. 구성 탭에서 탭 옆에 있는 + 추가를 선택합니다.
    2. 빈 컨테이너에서 시작을 선택한 다음, 다음을 선택합니다.
    3. 탭 레이블에 Tab 2를 입력합니다.
    4. 탭 ID가 tab_2으로 자동으로 채워졌는지 확인합니다.
       
    5. 생성을 선택합니다.
13. 12단계를 반복하여 세 번째 탭을 추가하고 12c에서 탭의 이름을 Tab 3으로 지정합니다.
14. 콘텐츠 트리와 페이지가 정확한지 확인합니다.
    
15. 태블릿 폼 팩터 아이콘을 선택합니다.

    

    탭의 간격과 위치는 태블릿 너비에 잘 어울립니다.

16. 모바일 폼 팩터 아이콘을 선택합니다.

    

    탭은 더 작은 크기에서 더 많은 공간을 차지합니다.

    

17. 모바일 크기에 맞게 탭 레이아웃을 변경합니다.
    1. 콘텐츠 트리에서 Column layout 1(열 레이아웃 1)에서 Column 1(열 1)을 선택합니다.
    2. 구성 패널의 방향에서 행 아이콘을 선택합니다.

       

    3. 저장을 선택합니다.
    스테이지가 자동으로 업데이트되어 탭 1이 표시되고 새 드롭다운 메뉴가 있음을 알립니다.

    

18. 미리 보기를 선택합니다.
19. 자세히를 선택합니다.
    다른 두 탭은 사용할 수 있습니다.

    

20. 데스크톱 및 태블릿 폼 팩터 아이콘을 선택하여 더 보기 드롭다운이 나타나지 않는지 확인합니다.
21. X를 선택하여 미리 보기 오버레이를 닫습니다.