Layout

이 페이지에서는 메인 메뉴의 Edit Menu 중 Layout Tab에 대해 설명합니다.

Layout tab

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 이면

Horizontal : justify-content 와

Vertical : align-items 가 나타납니다.

flex-direction: column이면

Horizontal이 align-items 와

Vertical 이 justify-content 를 나타내고

Vertical 에 space between 옵션이 더 생깁니다.

Horizontal

• Left

• Center

• Right

• Space Between ( flex-direction: row일때 나옴)

Vertical

• Top

• Center

• Bottom

• Space Between ( flex-direction: column일때 나옴)

Overflow

CSS 단축속성 콘텐츠가 너무 커서 블록 서식의 크기에 맞출 수 없을때의 처리법을 지정합니다.

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

관련 속성은 CSS 문서를 참조해 주세요.

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

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