에서 Flexbox 레이아웃 사용 UI 빌더

에서 Flexbox 레이아웃 UI 빌더 을 만들어 CSS(Cascading Style Sheet)로 사용자 지정하고 성능을 향상시킬 수 있도록 강력한 페이지를 빌드합니다.

에서 Flexbox 레이아웃을 UI 빌더사용하여 사용자 지정 페이지를 쉽게 빌드할 수 있습니다. 페이지 레이아웃을 사용자 정의하면 Flexbox를 최대한 활용하여 전체 페이지 디자인을 얻을 수 있습니다. 자세한 내용은 UI Builder 페이지에서 구성요소 구성 문서를 참조하십시오.

Flexbox는 CSS의 1차원 레이아웃 시스템입니다. Flexbox는 본질적으로 유연하므로 콘텐츠 크기를 모를 때 유용합니다. 복잡한 페이지를 만들려는 경우 구성 패널 스타일 탭 또는 CSS를 사용하여 페이지 레이아웃을 사용자 지정할 수 있습니다. Mozilla를 방문하여 Flexbox에 대해 자세히 알아보세요.

다음과 같은 방법으로 레이아웃에서 콘텐츠의 방향을 변경할 수 있습니다.

• 행: 행은 브라우저의 기본 언어 방향에 따라 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽으로 구성됩니다. 왼쪽/오른쪽은 영어 브라우저의 경우입니다.
• 행 반전: 행은 브라우저 기본 언어의 반대 방향(예: 오른쪽에서 왼쪽 또는 왼쪽에서 오른쪽)으로 구성됩니다.
• 열: 위/아래 또는 아래/위
• 열 반전: 아래/위

  그림 1. Flexbox 행 및 열 방향

  

• 컨텐츠 정당화: 기본 축을 따라 정렬을 정의합니다. 선택 항목은 다음과 같습니다.
  • flex-start: 항목이 왼쪽 맞춤 콘텐츠와 유사하게 플렉스 방향의 시작 부분에 있습니다. 이것이 기본 설정입니다.
  • 플렉스 엔드: 항목이 플렉스 방향의 끝에 있으며 오른쪽 정렬 컨텐츠와 유사합니다.
  • 간격: 항목이 균등하게 분산됩니다.
  • 주변 공간: 항목 주위에 동일한 공간을 두고 항목이 균등하게 분산됩니다.
  • 균등한 간격: 항목 사이의 간격이 동일합니다.
• 항목 정렬: 플렉스 컨텐츠를 교차 축을 따라 표시하는 방법을 정의합니다. 선택 항목은 다음과 같습니다.
  • 스트레치: 콘텐츠를 늘려 컨테이너를 채웁니다. 이것이 기본 설정입니다
  • Flex-start: 교차 축의 시작 부분에 콘텐츠를 배치합니다.
  • Flex-end: 교차 축의 끝에 콘텐츠를 배치합니다.
  • 가운데: 콘텐츠를 교차 축의 가운데에 맞춥니다.
  • 기본 시스템: 기준선 정렬과 동일하게 컨텐츠를 정렬합니다.
• 높이: 높이를 자동 또는 수동으로 설정합니다.
• 너비: 플렉스박스 항목 의 높이를 자동 또는 수동으로 설정합니다.
• 여백: 플렉스박스 항목 사이의 최소 거리를 설정합니다.
• 패딩: 플렉스박스 항목의 각 면에 대한 패딩을 설정합니다.

새 레이아웃 시스템으로 Flexbox 레이아웃 만들기

에서 Flexbox 레이아웃 UI 빌더 을 만들어 로우코드 환경에서 강력한 페이지를 빌드할 수 있습니다.

시작하기 전에

필요한 역할: admin

프로시저

1. 다음으로 이동 모두 > Now Experience 프레임워크 > UI Builder레이블이 표시됩니다.
2. 작업할 환경을 열거나 + 만들기를 선택하여 환경을 만듭니다.
   경험 생성에 대한 자세한 내용은 을 참조하십시오 에서 사용자가 애플리케이션과 상호작용하는 방법 구성 UI 빌더 .
3. 에서 페이지 만들기 UI 빌더.
4. 스테이지에서 UI 빌더+ 아이콘을 선택합니다.
5. 레이아웃 탭에서 Flexbox 를 선택합니다.
   
6. 구성 패널에서 스타일 탭을 선택합니다.
7. 레이아웃 섹션에서 Flexbox가 강조 표시되어야 합니다.
   
8. 스타일 탭의 레이아웃 섹션에서 다음을 변경할 수 있습니다.

   방향

   구성요소를 가로 또는 세로로 쌓는 방법을 정의합니다.

   항목 정렬

   컨테이너 내의 구성요소가 그룹으로 정렬되는 방식을 정의합니다.

   컨텐츠 정당화

   컨테이너 내의 구성요소를 압축하거나 간격을 두는 방법을 정의합니다.

   주:

   고급 레이아웃 옵션 표시를 선택하여 다음 두 옵션을 확인합니다.

   갭

   행과 열 사이의 간격 크기를 설정합니다.

   하위 요소를 여러 줄로 줄 바꿈

   구성요소를 한 라인에 강제로 적용할지 아니면 여러 라인에 오버플로우를 적용할지 설정합니다.

   Mozilla를 방문하여 Flexbox 레이아웃 구성에 대해 자세히 알아보세요.

9. 옵션: 스타일 탭 아래쪽에 있는 고급 구성 옵션 표시를 선택한 다음 CSS 보기 및 편집 옵션을 선택하여 CSS 코드를 편집할 수 있습니다.
10. 저장을 선택합니다.
    페이지가 새로 고쳐지고 레이아웃에 대한 변경 내용이 표시됩니다.
11. 페이지에 구성요소를 추가합니다.
    자세한 내용은 구성요소 추가 및 구성 문서를 참조하십시오.
12. 선택하여 페이지를 보고 테스트합니다.

이전 레이아웃 시스템으로 Flexbox 레이아웃 만들기

에서 Flexbox 레이아웃 UI 빌더 을 만들어 CSS(Cascading Style Sheet)로 사용자 지정하고 성능을 향상시킬 수 있도록 강력한 페이지를 빌드합니다.

시작하기 전에

필요한 역할: admin

이 태스크 정보

다음 절차에서는 Flexbox를 사용하여 CSS 코드를 변경하여 페이지 레이아웃을 사용자 지정하는 방법을 알아봅니다.

프로시저

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

   그림 2. 표준 2열 레이아웃

   

5. 레이아웃 코드 편집을 클릭합니다.

   그림 3. 레이아웃 코드 편집

   

6. CSS 코드를 쉽게 볼 수 있도록 코드 편집기를 확장합니다.

   그림 4. 코드 편집기 확장

   

7. 기존 슬롯의 CSS 코드를 복사하여 레이아웃에 다른 슬롯을 추가합니다.

   코드를 복사하는 것이 레이아웃에 입력하는 것보다 쉽습니다.

   그림 5. 슬롯에 대한 CSS 코드 복사

   

8. 복사한 코드 아래에 쉼표를 입력하고 다음 CSS 코드를 붙여넣습니다.
   1. "slotName" 속성을 "Column 3"(으)로 변경합니다.
   2. "flex" 속성을 "2"로 변경합니다.
   3. "margin-left": "1rem"을 추가합니다.

   그림 6. CSS 코드 붙여넣기

   

   속성을 변경 "flex" 하면 열 크기가 커집니다. 를 사용하여 "margin-left"이전 열 사이에 공백을 추가합니다.

9. 확장된 보기를 축소하고 적용을 클릭합니다.

   그림 7. 레이아웃 변경 적용

   

결과

생성한 새 Flexbox 레이아웃에는 원래 2열 레이아웃에 추가한 새 슬롯이 표시됩니다.

그림 8. 새로운 사용자 지정 레이아웃

원본으로 재설정(Reset to original)을 클릭하여 레이아웃 변경 사항을 원본으로 재설정합니다.

그림 9. 레이아웃 재설정

관련 태스크

• 이전 레이아웃 시스템으로 CSS 그리드 레이아웃 만들기