# 이제 레이아웃 설정을 더 간편하게 할 수 있어요

**URL:** <https://ask.selectfromuser.com/t/topic/36>\
**Category:** 사용 팁\
**Created:** [6월 19, 2023, 10:06오전 UTC](https://ask.selectfromuser.com/t/topic/36 "2023-06-19T10:06:26Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hbkim](https://yyz2.discourse-cdn.com/flex032/user_avatar/ask.selectfromuser.com/hbkim/32/23_2.png) [@hbkim](https://ask.selectfromuser.com/u/hbkim)\
**Post date:** [6월 19, 2023, 10:06오전 UTC](https://ask.selectfromuser.com/t/topic/36/1 "2023-06-19T10:06:26Z")

</div>

페이지 레이아웃을 2열이나 3열 등으로 나눠서 구성하고 싶은적 없으신가요?  
이제 다양한 레이아웃을 더 간편하게 만들 수 있어요.

블록의 타입(blocks.type)에 **`top, left, center, right, bottom`** 의 개념이 추가되었습니다.  
해당 타입들 아래에 기존과 같이 쿼리, API, 마크다운 블록을 추가하시면 됩니다.

그리고 레이아웃 영역별로 제목(title)과 부제목(subtitle)을 입력해서 영역에 대한 설명을 추가해 사용자에게 가이던스를 줄 수 있어요.

서비스 운영 업무의 속도를 높여주는 레이아웃을 한번 구성해보세요.

```yaml
blocks:
- type: top # left, center, right, bottom
  title: title
  subtitle: subtitle
  blocks:
  - type: markdown
  - type: query

```

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/selectfromuser/original/1X/317a6a642190423bd80874c2fd1453c0549bc2e4.png)

```yaml
pages:
- path: company-layouts
  blocks:
  - 
    type: top
    title: title
    blocks:
      - type: markdown
        content: >
          > TOP
  - 
    type: left
    title: title
    subtitle: subtitle
    blocks:
      - type: markdown
        content: >
          > LEFT
  - 
    type: center
    style:
      width: 50%
      height: 80vh
      maxHeight: calc(100vh - 300px)
      overflow: scroll
    blocks:
      - type: markdown
        content: >
          > CENTER
      - type: query
        title: 내역은 최근 30일
        subtitle: 내역은 최근 30일
        description: 영수증 목록
        resource: mysql.qa
        sql: SELECT * FROM test_10k LIMIT 300
        sqlType: select
  - 
    type: right
    blocks:
      - type: markdown
        content: >
          > RIGHT
  - 
    type: bottom
    blocks:
      - type: markdown
        content: >
          > BOTTOM

```

어떻게 사용해야할지, 구성방법을 잘 모를 때는  
[support@selectfromuser.com](mailto:support@selectfromuser.com) 으로 글이나 이미지, 기획서 등으로  
자유롭게 문의주시면 샘플을 전달해드리도록 하겠습니다.