Layout
이 페이지에서는 메인 메뉴의 Edit Menu 중 Layout Tab에 대해 설명합니다.
Last updated
이 페이지에서는 메인 메뉴의 Edit Menu 중 Layout Tab에 대해 설명합니다.
Last updated
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 일때)
element의 rows의 간격
element의 columns의 간격
row의 갯수 - display: grid일때 나옴
grid로 잡았으나 자동분석으로 된 결과로 row로 쌓여진 element의 갯수를 보여줍니다. 갯수가 다를 경우 설정 가능합니다.
column의 갯수 - display: grid일때 나옴
grid로 잡았으나 자동분석으로 된 결과로 column으로 쌓여진 element의 갯수를 보여줍니다. 갯수가 다를 경우 설정 가능합니다.
css property : grid-template-columns
grid column의 width 값 설정
css property: grid-template-rows
grid row의 height 값 설정
부모 요소가 display:flex일 때 Flex-direction이 row인지 column인지에 따라 해당 버튼들이 달라지고 자식 요소들의 배치를 결정할 수 있습니다.
Horizontal : justify-content 와
Vertical : align-items 가 나타납니다.
Horizontal이 align-items 와
Vertical 이 justify-content 를 나타내고
Vertical 에 space between 옵션이 더 생깁니다.
Left
Center
Right
Space Between ( flex-direction: row일때 나옴)
Top
Center
Bottom
Space Between ( flex-direction: column일때 나옴)
적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 콘텐츠 그대로 노출, 자동 등이 있습니다.
Overflow X - horizontal 부분에 적용 하고 싶을 때 사용됩니다.
Overflow Y - vertical 부분에 적용하고 싶을 떄 사용됩니다.
콘텐츠가 너무 커서 블록 서식의 크기에 맞출 수 없을때의 처리법을 지정합니다.
관련 속성은 를 참조해 주세요.
