응답형 작성을 위한 스타일 조정

다양한 양식 요소에 대해 반응형 작성으로 페이지를 만들 때 스타일 옵션을 변경하여 더 작은 크기에서 페이지의 유용성을 높이는 방법을 알아봅니다.

시작하기 전에

필요한 역할: ui_builder_admin

이 태스크 정보

페이지 가용성을 높이는 방법은 중단점에서 다양한 스타일을 사용하여 구성 요소를 조정하는 것입니다. 스타일을 편집할 수 있는 다양한 옵션이 있습니다. 이 절차에서는 스타일화된 텍스트 구성요소 주위의 여백을 편집하고 텍스트 크기를 줄여 작은 양식 요소에서 더 적은 공간을 사용합니다.

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI 빌더.
2. > 경험 생성을 선택하여 작업할 경험을 열거나 경험을 생성합니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호 작용하는 방법 구성 UI 빌더 .
3. 응답형 작성으로 처음부터 새로 페이지 생성
   페이지를 생성하는 방법에 대한 자세한 내용은 UI 빌더에서 페이지 생성 섹션을 참조하십시오.
4. 상단에서 데스크톱 반응형 작성 아이콘이 선택되어 있는지 확인합니다.
   
5. 스테이지에서 + 콘텐츠 추가를 선택합니다.
6. 레이아웃 탭에서 단일 열을 선택합니다.
7. 스타일화된 텍스트 구성요소를 추가합니다.
   1. 스테이지의 열 중앙에 있는 + 아이콘을 선택합니다.
   2. 구성 요소 탭에서 스타일을 입힌 텍스트 구성 요소를 찾아 선택합니다.
   3. 구성 패널에서 없음 - 구성 요소를 수동으로 구성을 선택합니다.
   4. 구성 패널의 구성 탭에서 텍스트 필드를 두 번 클릭(또는 키보드 단축키 사용)하여 기본 텍스트를 선택합니다.
   5. 중요 운영 작업 공간 관리자 센터를 입력하여 기본 텍스트를 바꿉니다.

      

   6. 저장을 선택합니다.
8. 스타일화된 텍스트 구성요소 주위에 약간의 공간을 추가하고 가운데에 배치합니다.
   1. 콘텐츠 트리에서 스타일을 입힌 텍스트 1을 선택합니다.
   2. 구성 패널에서 스타일 탭을 선택합니다.
   3. 간격(Spacing)에서 여백(Margin)을 선택합니다.
   4. 목록에서 크게 를 선택합니다.

      

   5. 정렬에서 중앙 아이콘을 선택합니다.

      

   6. 저장을 선택합니다.
   스테이지가 자동으로 업데이트되어 스타일화된 텍스트 구성요소 주위에 추가 공백이 표시되고 가운데에 배치됩니다.
9. 태블릿 양식 요소 아이콘을 선택합니다.

   

   스타일화된 텍스트 구성요소의 간격 및 제목 크기는 태블릿 크기에 적합합니다.

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

    

    스타일화된 텍스트 구성 요소는 더 작은 크기에서 많은 세로 공간을 사용합니다.

    

11. 추가 여백 공간을 제거하고 모바일 폼 팩터 전용으로 제목을 작게 만듭니다.
    1. 콘텐츠 트리에서 스타일을 입힌 텍스트 1을 선택합니다.
    2. 구성 패널에서 스타일 탭을 선택합니다.
    3. 간격(Spacing)에서 여백(Margin)을 선택합니다.
    4. 목록에서 0 을 선택합니다.
    5. 구성 탭을 선택합니다.
    6. HTML 탭에서H3을 선택합니다.
    7. 저장을 선택합니다.
    스테이지가 자동으로 업데이트되어 스타일화된 텍스트 구성요소가 더 적은 공간을 사용한다는 것을 보여줍니다.

    

12. 태블릿과 상단의 데스크톱 폼 팩터 아이콘을 선택하여 더 큰 폼 팩터가 변경되지 않았는지 확인합니다.