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

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

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

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

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

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

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. > 경험 생성을 선택하여 작업할 경험을 열거나 경험을 생성합니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 응답형 작성으로 처음부터 새로 페이지 생성
   페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성 섹션을 참조하십시오.
4. 상단에서 데스크톱 폼 팩터 아이콘이 선택되어 있는지 확인합니다.
   
5. 스테이지에서 + 콘텐츠 추가를 선택합니다.
6. 레이아웃 탭에서 단일 열을 선택합니다.
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에서 탭 이름을 탭 3으로 지정합니다.
14. 콘텐츠 트리와 페이지가 정확한지 확인합니다.
    
15. 태블릿 양식 요소 아이콘을 선택합니다.

    

    탭의 간격과 위치는 태블릿 너비에서 잘 보입니다.

16. 모바일 양식 요소 아이콘을 선택합니다.

    

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

    

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

       

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

    

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

    

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