가이드/위키/편집/레이아웃

배치 방식

가로/세로

블록을 한 방향으로 나열합니다. 가로 정렬은 왼쪽→오른쪽, 세로 정렬은 위→아래로 배치됩니다

그리드

정해진 열 수만큼 칸을 나누고, 블록을 순서대로 채웁니다. 균등한 크기의 카드 배치에 적합합니다

벤토

블록마다 차지하는 칸 수(가로·세로)를 자유롭게 지정합니다. 대시보드나 매거진 스타일에 적합합니다

중첩

깊이

컨테이너 안에 컨테이너를 넣을 수 있습니다. 최상위가 깊이 0, 그 안이 깊이 1, 또 안이 깊이 2입니다

깊이 핸들

컨테이너 왼쪽 상단에 숫자 버튼이 표시됩니다. 이 숫자가 현재 깊이이며, 클릭하면 해당 컨테이너를 선택합니다

역할 분리

바깥 컨테이너는 전체 방향·크기를, 안쪽 컨테이너는 개별 영역의 스타일을 담당하면 관리하기 쉽습니다

탐색

진입

컨테이너를 더블 클릭하면 안쪽으로 들어갑니다

나가기

Esc 키를 누르면 한 단계 위의 부모 컨테이너로 올라갑니다

직접 선택

깊이 핸들(숫자 버튼)을 클릭하면 중첩된 구조에서 원하는 컨테이너를 바로 선택할 수 있습니다

구조 파악

트리 보기

모든 컨테이너가 부모-자식 관계로 들여쓰기되어 표시됩니다. 현재 선택된 컨테이너가 강조됩니다

바로 이동

트리에서 컨테이너를 클릭하면 에디터에서 해당 컨테이너가 바로 선택됩니다

관리

형제 추가

같은 레벨에 새 컨테이너를 추가합니다. 가로 정렬에서 옆에 칸을 하나 더 만들 때 사용합니다

자식 추가

선택한 컨테이너 안에 새 컨테이너를 추가합니다. 중첩 구조를 만들 때 사용합니다

복제

컨테이너와 안의 모든 내용을 그대로 복사합니다. 같은 형태의 카드를 반복할 때 유용합니다

삭제

선택한 컨테이너를 제거합니다. 안에 있는 모든 내용도 함께 삭제됩니다

이동

드래그앤드롭

레이어 패널에서 컨테이너를 잡아 위·아래로 끌면 같은 레벨 안에서 순서가 바뀝니다

제한

같은 부모의 형제끼리만 순서를 바꿀 수 있습니다. 다른 깊이로 옮기려면 잘라내기/붙여넣기를 사용하세요

가로 정렬

블록들을 왼쪽에서 오른쪽으로 나란히 배치합니다

세로 정렬

블록들을 위에서 아래로 쌓아 배치합니다

그리드 2~4열

같은 크기의 칸으로 균등하게 나눕니다 (예: 2칸, 3칸, 4칸)

벤토

칸마다 크기를 다르게 지정할 수 있는 자유로운 격자 레이아웃입니다

가로/세로

블록을 가로 또는 세로 한 방향으로 나열합니다. 가장 기본적인 배치 방식입니다

그리드

정해진 열 수만큼 칸을 나누고, 블록을 순서대로 채워 넣습니다

벤토

블록마다 차지하는 칸 수를 자유롭게 정할 수 있어, 대시보드나 포트폴리오 같은 레이아웃에 적합합니다

너비 — 채우기

부모 영역의 가로를 꽉 채웁니다 (기본값)

너비 — 맞추기

안에 넣은 내용의 크기에 맞춰 너비가 자동으로 조절됩니다

너비 — 고정

원하는 숫자를 직접 입력합니다 (예: 300px, 50%)

높이 — 자동

내용이 늘어나면 높이도 함께 늘어납니다 (기본값)

높이 — 고정

원하는 높이를 직접 입력합니다 (예: 200px)

높이 — 화면

화면 전체 높이만큼 차지합니다

가로 정렬

왼쪽, 가운데, 오른쪽, 균등 배분 등 가로 방향 위치를 정합니다

세로 정렬

위, 가운데, 아래, 늘리기 등 세로 방향 위치를 정합니다

줄바꿈

블록이 한 줄에 다 들어가지 않으면 다음 줄로 넘길지 설정합니다

블록 간격

블록과 블록 사이의 거리입니다. 숫자가 클수록 사이가 벌어집니다 (기본 12px)

안쪽 여백

컨테이너 테두리와 내용 사이의 빈 공간입니다 (기본 16px)

방향별 설정

위·아래·왼쪽·오른쪽 각각 따로 지정할 수 있습니다

음수 오프셋

음수 값을 입력하면 요소가 겹치는 효과를 만들 수 있습니다

뷰포트별

PC·태블릿·모바일에서 각각 다른 값을 지정할 수 있습니다

배경색

단색, 그라데이션, 이미지 배경을 적용할 수 있습니다

배경 효과

투명도 조절, 블러 효과, 오버레이 색상을 추가할 수 있습니다

테두리

색상, 두께, 둥근 모서리 정도를 설정합니다

구조 보기

컨테이너가 어떻게 중첩되어 있는지 트리 형태로 보여줍니다

컨테이너 추가

같은 레벨에 형제 컨테이너를 추가하거나, 안쪽에 자식 컨테이너를 추가합니다

복제

현재 선택된 컨테이너를 내용까지 그대로 복사합니다

삭제

선택된 컨테이너를 삭제합니다. 안에 있는 내용도 함께 제거됩니다

이동

레이어를 클릭하면 해당 컨테이너로 바로 이동하여 선택됩니다

기본 개념

깊이 번호

최상위 컨테이너는 깊이 0, 그 안에 넣으면 깊이 1, 또 그 안에 넣으면 깊이 2입니다

깊이 핸들

컨테이너 왼쪽 상단의 숫자 버튼이 현재 깊이를 표시합니다. 클릭하면 해당 컨테이너를 선택합니다

제한 없음

깊이에 제한은 없지만, 3단계 이내로 유지하는 것을 권장합니다. 너무 깊으면 구조가 복잡해집니다

탐색

안으로 진입

컨테이너를 더블 클릭하면 안쪽으로 들어갑니다. 깊이 핸들의 숫자를 클릭하면 해당 컨테이너를 직접 선택합니다

밖으로 나가기

Esc 키를 누르면 한 단계 위의 부모 컨테이너로 올라갑니다. 반복해서 누르면 최상위까지 이동합니다

레이어 패널

전체 중첩 구조를 트리 형태로 보여줍니다. 원하는 컨테이너를 클릭하면 바로 이동합니다

활용 팁

역할 분리

바깥 컨테이너는 전체 레이아웃(방향·크기)을 담당하고, 안쪽 컨테이너는 개별 영역의 스타일(배경·테두리)을 담당하면 관리가 쉽습니다

자식 크기

부모가 가로 정렬일 때, 자식 컨테이너의 flex 값으로 비율을 조절합니다. 예: flex 2와 flex 1이면 2:1 비율로 나뉩니다

드래그앤드롭

순서 변경

레이어 패널에서 컨테이너를 잡아 위·아래로 끌어 놓으면 순서가 바뀝니다

같은 레벨만

같은 부모 안의 형제 컨테이너끼리만 순서를 바꿀 수 있습니다. 다른 깊이로 이동하려면 잘라내기/붙여넣기를 사용하세요

내용 보존

이동할 때 컨테이너 안의 모든 내용(텍스트, 이미지, 중첩 컨테이너 등)이 그대로 유지됩니다

기타 조작

복제

레이어 패널의 복제 버튼을 누르면 컨테이너와 모든 하위 내용이 그대로 복사됩니다

형제 추가

같은 레벨에 빈 컨테이너를 새로 추가합니다

자식 추가

선택한 컨테이너 안에 새 컨테이너를 추가합니다. 중첩 구조를 만들 때 사용합니다

밑줄

탭 아래에 밑줄이 표시됩니다. 깔끔하고 심플한 기본 스타일입니다

기본

탭에 테두리와 배경이 적용됩니다. 블록감 있는 디자인입니다

알약

둥근 알약 모양의 탭 디자인입니다

탭 크기

내용에 맞추기 / 균등하게 나누기 / 기본 크기 중 선택합니다

위

콘텐츠 위에 가로로 배치됩니다 (기본값)

아래

콘텐츠 아래에 가로로 배치됩니다

왼쪽

콘텐츠 왼쪽에 세로로 배치됩니다

오른쪽

콘텐츠 오른쪽에 세로로 배치됩니다

기본 상태

선택되지 않은 탭의 글자색과 배경색입니다

마우스 올림

마우스를 탭 위에 올렸을 때 바뀌는 색상입니다

선택된 탭

현재 보고 있는 탭의 글자색, 배경색, 밑줄/테두리 색상입니다

탭 영역 배경

탭 버튼들이 있는 전체 영역의 배경색입니다

접기/펼치기

이미 선택된 탭을 다시 클릭하면 콘텐츠를 접을 수 있습니다

처음에 접힌 상태

문서를 열었을 때 탭 콘텐츠가 접혀 있는 상태로 시작합니다

탭 아이콘

각 탭 버튼에 아이콘을 표시할 수 있으며, 위치와 크기도 조절 가능합니다

탭 추가

사이드바의 "새 탭 추가" 버튼을 클릭합니다

탭 삭제

탭 버튼의 X 아이콘을 클릭합니다 (최소 1개는 남아야 합니다)

이름 변경

탭 버튼을 더블클릭하면 바로 이름을 수정할 수 있습니다

1

/컨테이너를 입력하고, 가로 정렬 프리셋을 선택합니다

2

왼쪽 컨테이너에 이미지를 삽입합니다. /이미지로 삽입할 수 있습니다

3

오른쪽 컨테이너에 설명 텍스트를 작성합니다

4

비율 조절: 이미지 컨테이너의 flex 값을 2, 텍스트를 3으로 설정하면 2:3 비율이 됩니다

팁

부모 컨테이너의 세로 정렬을 "가운데"로 설정하면, 이미지와 텍스트가 세로 중앙에 맞춰집니다

1

/컨테이너를 입력하고, 그리드 3열 프리셋을 선택합니다

2

각 칸에 이미지와 제목 텍스트를 넣습니다

3

카드 느낌을 주려면 각 자식 컨테이너에 배경색과 둥근 모서리(8~12px)를 설정합니다

4

부모 컨테이너의 블록 간격으로 카드 사이 여백을 조절합니다 (16~24px 권장)

팁

항목이 많으면 레이어 패널의 "형제 추가" 버튼으로 카드를 빠르게 늘릴 수 있습니다

1

/컨테이너를 입력하고, 벤토 프리셋을 선택합니다. 프리셋마다 다른 배치가 적용됩니다

2

각 블록의 colSpan(가로 칸 수)과 rowSpan(세로 칸 수)을 설정합니다. 12열 기준으로 4는 1/3, 6은 1/2, 8은 2/3에 해당합니다

3

메인 콘텐츠는 크게(8열×2행), 보조 콘텐츠는 작게(4열×1행) 설정하면 시각적 위계가 생깁니다

4

행 높이를 설정하면 일정한 격자감이 생깁니다. 50~80px 사이로 설정해보세요

팁

벤토 프리셋은 총 10종이 준비되어 있습니다. 원하는 프리셋을 선택한 뒤 colSpan/rowSpan만 미세 조정하면 됩니다

1

바깥 컨테이너: /컨테이너로 세로 정렬 프리셋을 선택합니다. 높이를 화면으로 설정합니다

2

히어로 영역: 레이어 패널에서 자식 추가 버튼을 눌러 안쪽 컨테이너를 만듭니다. 배경 이미지를 설정하고, 높이를 고정 50%로 합니다

3

히어로 안에 제목 텍스트를 넣고, 정렬을 "가운데 / 가운데"로 설정합니다

4

콘텐츠 영역: 형제 추가로 두 번째 컨테이너를 만들고, 가로 정렬로 변경하여 본문과 사이드바를 나란히 배치합니다

팁

구조가 복잡해지면 레이어 패널을 항상 열어두고 작업하세요. 현재 위치를 시각적으로 확인할 수 있습니다