--- sourceDocument: 호주 애플리케이션 빌드 또는 수정 sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ko-KR/application-development Release : - australia ft:locale : - ko-KR ft:publication_title : - 호주 애플리케이션 빌드 또는 수정 ft:clusterId : - cadev bundleId : - cadev workflow : - Development, Data, and Analytics --- # UI 빌더 페이지에서 구성요소 구성 # UI 빌더 페이지에서 구성요소 구성 {#ariaid-title1} * 릴리스 버전: Australia * * 업데이트 날짜 2026년 03월 12일 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 소요 시간: 1분 열 레이아웃은 페이지의 구성요소를 구성합니다 UI 빌더 . 에서 열 레이아웃이 어떻게 사용되는지 UI 빌더알아봅니다. 열 레이아웃을 사용하면 경험에서 유용하고 시각적으로 매력적인 페이지를 만들 수 있습니다. 열 레이아웃은 구성요소를 저장할 수 있는 유연한 컨테이너 유형입니다. 열 레이아웃에는 너비가 같거나 다른 열이 있을 수 있습니다. 열 레이아웃을 전체적으로 구성하고 레이아웃 내의 개별 열을 구성할 수 있습니다. 예를 들어 열 레이아웃과 레이아웃 내의 개별 열에 대해 다른 테두리 너비와 색상을 설정합니다. 열 레이아웃에는 페이지에 빈 열 UI 빌더 이 포함되어 공백을 만들 수 있습니다. 페이지에서 여러 열 레이아웃을 사용합니다. 예를 들어 2열 레이아웃에는 헤더와 이미지가 포함될 수 있고, 그 아래에 있는 3열 레이아웃에는 목록 및 양식과 같은 더 많은 구성요소가 포함될 수 있습니다. 페이지 빌드를 시작하기 전에 페이지 레이아웃을 생각해 보십시오. 달성하려는 목표와 페이지 레이아웃이 얼마나 복잡해야 하는지 분석합니다. 이러한 질문에 따라 어떤 유형의 열 레이아웃을 사용해야 하는지가 결정됩니다. 의 UI 빌더 열 레이아웃은 표준 기반 CSS(계단식 스타일시트) 규칙과 Flexbox, CSS 그리드 및 절대 위치 지정과 같은 웹 레이아웃 기술을 사용합니다. 따라서 CSS에서 할 수 있는 것은 무엇이든 여기에서 할 수 있습니다. CSS에 대해 자세히 알아보려면 [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS) 를 방문하십시오. 주: 이전 릴리스(Utah 또는 Tokyo)에서 만든 기존 UI 빌더 페이지가 있는 경우 Vancouver 또는 Washington DC로 업그레이드하고 페이지에 열 레이아웃을 추가할 수 있습니다. * **[열 레이아웃](https://servicenow-prod.fluidtopics.net/rVU5iJlvhBUPVa9x5_mgfg#column-layout)** 열 레이아웃은 페이지를 디자인하고 구성 UI 빌더 하는 데 사용됩니다. * **[UI 빌더에서 레이아웃 업그레이드](https://servicenow-prod.fluidtopics.net/nr4t6x078dX7RUQ40EtXnw#upgrade-layout-uib)** 생성된 레이아웃을 새 레이아웃 시스템으로 QuebecRome 업그레이드합니다. * **[UI 빌더에서 Flexbox 레이아웃 사용](https://servicenow-prod.fluidtopics.net/697JB8IVYvLs3CzosZwH9w#flexbox-uib)** 에서 Flexbox 레이아웃 UI 빌더 을 생성하여 CSS(계단식 스타일시트)로 사용자 지정하고 성능을 개선할 수 있는 강력한 페이지를 빌드합니다. * **[CSS 그리드 레이아웃을 사용하여 페이지 빌드](https://servicenow-prod.fluidtopics.net/KOkSthBEppKMePUSWrJ0aw#css-grid-uib)** CSS 그리드 레이아웃 UI 빌더 을 생성하여 CSS(계단식 스타일시트)로 사용자 지정하고 성능을 향상시킬 수 있는 강력한 페이지를 빌드합니다. * **[Rome 에서 작성 Quebec된 페이지의 레이아웃 변경](https://servicenow-prod.fluidtopics.net/3X5Z7i2Vfnfjv7tbjc~BVw)** 레이아웃 디자인을 추가하고 수정하여 페이지의 모양을 변경합니다. Flexbox 및 CSS 그리드와 같은 CSS 웹 레이아웃 기술을 통해 구성요소가 페이지에 표시되는 방식을 선택합니다.