CSS 그리드 레이아웃을 사용하여 페이지 작성
에서 CSS 그리드 레이아웃 UI 빌더 을 만들어 강력한 페이지를 만들어 CSS(Cascading Style Sheet)로 사용자 지정하고 성능을 향상시킬 수 있습니다.
CSS 그리드는 CSS에서 가장 강력한 레이아웃 시스템입니다. CSS 그리드는 2차원 그리드 위에 구축됩니다. CSS 그리드를 사용하면 페이지를 만드는 방법을 제어할 수 있습니다. 로우 코드 레이아웃 구성 속성을 사용하여 CSS 그리드 레이아웃을 구현하는 데 사용합니다 UI 빌더 . 고급 레이아웃의 경우 CSS 코드를 보고 편집하여 레이아웃을 사용자 지정할 수 있습니다. CSS 그리드에 대해 더 자세히 알아보려면 Mozilla 를 방문하세요.
예를 들어, 3개의 열과 3개의 행이 있는 그리드를 사용하여 9개의 셀을 그리드로 만들 수 있습니다. 이러한 셀 내에 구성 요소를 배치하거나 구성 요소가 여러 셀에 걸쳐 있도록 할 수 있습니다.
페이지의 레이아웃을 사용자 정의하면 CSS 그리드를 최대한 활용하여 전체 페이지 디자인을 얻을 수 있습니다. 자세한 내용은 UI Builder 페이지에서 구성요소 구성 문서를 참조하십시오.
인스턴스 내의 UI 빌더 CSS 레이아웃에 대한 자세한 내용은 [sys_uib_template] 테이블에서 찾을 수 있습니다.
새 레이아웃 시스템으로 CSS 그리드 레이아웃 만들기
에서 CSS 그리드 레이아웃을 만들어 로우 코드 환경에서 강력한 페이지를 빌드할 수 UI 빌더 있습니다.
시작하기 전에
필요한 역할: admin
프로시저
-
레이아웃 탭에서 그리드 를 선택합니다.
-
Layout( 레이아웃 ) 섹션에서 Grid(그리드 )가 강조 표시되어 있어야 합니다.
-
선택하여 페이지를 보고 테스트합니다.
이전 레이아웃 시스템으로 CSS 그리드 레이아웃 만들기
에서 CSS 그리드 레이아웃 UI 빌더 을 만들어 강력한 페이지를 만들어 CSS(Cascading Style Sheet)로 사용자 지정하고 성능을 향상시킬 수 있습니다.
시작하기 전에
필요한 역할: admin
이 태스크 정보
다음 절차에서는 CSS 그리드를 사용하여 CSS를 수정하여 페이지 레이아웃을 사용자 지정하는 방법을 알아봅니다.
프로시저
-
레이아웃 탭을 클릭하고 2행 x 2열 레이아웃을 선택합니다.
그림 2. 표준 2행, 2열 레이아웃 -
레이아웃 코드 편집을 클릭합니다.
그림 3. 레이아웃 코드 편집 -
CSS 코드를 쉽게 볼 수 있도록 코드 편집기를 확장합니다.
그림 4. 코드 편집기 확장 -
기존 슬롯의 CSS 코드를 복사하여 레이아웃에 다른 슬롯을 추가합니다.
CSS 코드를 복사하는 것은 레이아웃에 입력하는 것보다 쉽습니다.
그림 5. 슬롯에 대한 CSS 코드 복사 -
복사한 코드 아래에 CSS 코드를 붙여넣고 and grid-area 를 slotName 고유한 값으로 변경합니다.
그림 6. CSS 코드 붙여넣기 -
다음과 같이 새 열과 템플릿 영역을 포함하도록 레이아웃 규칙을 수정합니다.
-
"grid-template-columns": "1fr 1fr",줄을 삭제합니다. - cell1 뒤에 두 번째 cell1을 추가한 다음 cell4 뒤에 cell5를 추가합니다.
그림 7. 레이아웃 규칙 수정 다양한 구성을 설정할 수 있습니다. 이 예제에는 두 개의 서로 다른 그리드 템플릿 영역에서 생성된 두 개의 결과 그리드가 있습니다. "grid-template-areas" 수정되는 속성은 동일한 이름의 CSS 속성을 설정합니다. 자세한 내용은 MDN grid-templates-areas를 참조하세요.
그림 8. 그리드 템플릿 영역 -
-
확장된 보기를 축소하고 적용을 클릭합니다.
그림 9. 레이아웃 변경 적용