# Layout

<figure><img src="https://2175080280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHdZ32eborYFcmdxjlQYD%2Fuploads%2FpgTpmdpOqhDZrgC1y12P%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-11-07%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%208.14.28.png?alt=media&#x26;token=fdfd9bf9-798a-408c-8fa6-26a86be26b8d" alt=""><figcaption><p>Layout tab</p></figcaption></figure>

### LayoutType

FUNCTION12 Detect 엔진에서 분석한 디자인 Layout을 기본으로 Layout type을 수정할 수 있습니다.

* None ⇒ Layout이 정해지지 않음
  * position: absolute일 때 또는 자식 요소가 하나라 정할 필요가 없을 때
* Row ⇒ flex-direction: row를 의미
* Column ⇒ flex-direction: column
* Grid ⇒ display: grid
* Wrap ⇒ flex-wrap: wrap를 의미 ( flex-direction: row 일때)

### Layout

#### Row-Gap

element의 rows의 간격

<https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap>

#### ColumnGap

element의 columns의 간격

<https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap>

#### RowCount

row의 갯수 - display: grid일때 나옴

grid로 잡았으나 자동분석으로 된 결과로 row로 쌓여진 element의 갯수를 보여줍니다. 갯수가 다를 경우 설정 가능합니다.

#### ColumnCount

column의 갯수 - display: grid일때 나옴

grid로 잡았으나 자동분석으로 된 결과로 column으로 쌓여진 element의 갯수를 보여줍니다. 갯수가 다를 경우 설정 가능합니다.

#### GridWidth

css property : grid-template-columns

grid column의 width 값 설정

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns>

#### GridHeight

css property: grid-template-rows

grid row의 height 값 설정

<https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows>

### Alignment

부모 요소가 display:flex일 때 Flex-direction이 row인지 column인지에 따라 해당 버튼들이 달라지고 자식 요소들의 배치를 결정할 수 있습니다.

#### flex-direction: row 이면

&#x20; Horizontal : justify-content 와

&#x20; Vertical : align-items 가 나타납니다.

#### flex-direction: column이면

&#x20; Horizontal이 align-items 와

&#x20; Vertical 이 justify-content 를 나타내고

&#x20; Vertical 에 space between 옵션이 더 생깁니다.

#### Horizontal

* Left
* Center
* Right
* Space Between ( flex-direction: row일때 나옴)

#### Vertical

* Top
* Center
* Bottom
* Space Between ( flex-direction: column일때 나옴)

### Overflow

[CSS 단축속성](https://developer.mozilla.org/ko/docs/Web/CSS/overflow) 콘텐츠가 너무 커서 블록 서식의 크기에 맞출 수 없을때의 처리법을 지정합니다.

적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 콘텐츠 그대로 노출, 자동 등이 있습니다.

관련 속성은 [CSS 문서](https://developer.mozilla.org/ko/docs/Web/CSS/overflow)를 참조해 주세요.

Overflow X - horizontal 부분에 적용 하고 싶을 때 사용됩니다.

Overflow Y - vertical 부분에 적용하고 싶을 떄 사용됩니다.
