간격과 정렬

「왜 이만큼 벌어지지」 「왜 가운데로 안 가지」는 대부분 어느 층에서 정하는 값인지를 착각해서 생깁니다. 이 편집기에서 간격을 정하는 곳은 세 층입니다.

이 문서와 엮인 도구: 블록 에디터 · 색상 대비 검사기. 옆에 열어 두고 따라 하시면 빠릅니다. 다른 도구는 도구 목록에 있습니다.

간격은 세 층에서 정해집니다

순서를 지키면 손이 덜 갑니다. 먼저 페이지에서 전체 기본값을 잡고, 튀는 섹션만 섹션 층에서 손보고, 그래도 안 맞는 한 자리만 블록 층에서 고칩니다. 반대로 블록마다 하나씩 맞추기 시작하면 나중에 전체를 조금 넓히고 싶을 때 전부 다시 만져야 합니다.

세로 여백은 갭 블록으로

블록 사이를 벌리는 가장 단순한 방법은 여백(갭) 블록입니다. G 를 누르면 100px 짜리가 하나 들어갑니다.

높이를 바꿀 때 자주 걸리는 곳이 여기입니다.

선택한 갭에서 쓰는 숫자 프리셋은 이렇습니다.

단위는 px 입니다. 프리셋에 없는 값은 오른쪽 속성 패널의 슬라이더나 숫자 칸에 직접 넣습니다.

같은 숫자키가 두 가지 일을 합니다

1~8 은 지금 무엇을 골랐느냐에 따라 다르게 동작합니다.

• 갭 블록을 골랐으면 → 위 표대로 높이가 바뀝니다
• 텍스트 블록을 골랐으면 → 1 H1 · 2 H2 · 3 H3 · 4 본문 으로 종류가 바뀝니다
• 텍스트를 편집하는 중이면 → 그냥 숫자 글자가 입력됩니다

제목 크기를 바꾸려고 눌렀는데 문장에 「3」이 찍혔다면 아직 편집 모드입니다. Esc 로 빠져나온 뒤 다시 누르세요.

좌우 정렬

블록을 고른 상태에서 ⌥A 왼쪽 · ⌥S 가운데 · ⌥D 오른쪽입니다. 기준은 그 블록이 들어 있는 섹션이라, 섹션 좌우 패딩을 바꾸면 정렬 위치도 함께 움직입니다.

섹션 안의 블록을 전부 한 번에 맞추고 싶으면 섹션을 고른 뒤 오른쪽 패널의 Bulk Align 을 씁니다.

그래도 안 맞을 때 보는 순서

1. 지금 뭘 골랐는지 확인합니다. 오른쪽 패널 맨 위에 대상 이름이 적혀 있습니다 — 「Section 01」인지 「Text Block」인지. 바꾸려던 대상과 다르면 값을 엉뚱한 층에 넣고 있는 겁니다.
2. 오른쪽 패널의 Inspector 탭을 폅니다. 눈에 안 보이는 빈 블록이나 높이 0 짜리 갭이 껴 있는 경우가 많습니다.
3. 페이지 층의 값을 봅니다. 섹션마다 여백이 똑같이 이상하면 범인은 섹션이 아니라 페이지입니다.
4. 이미지라면 패딩 예외를 떠올립니다. 위의 안내 상자를 다시 보세요.
5. ⌘Z 로 되돌리고 한 번에 하나씩 바꿔 봅니다. ⌘⇧Z 로 다시 갈 수 있습니다.

화면이 좁으면 패널을 접습니다

오른쪽 패널이 캔버스를 가리면 ⌘\ 로 접습니다(⌘⌥\ · ⌘⇧\ 도 같은 동작입니다 — 접을 패널이 하나뿐이라 셋을 구분하지 않습니다). 접으면 오른쪽 위에 작은 손잡이가 남아 그걸 눌러 다시 폅니다. 캔버스 배율은 오른쪽 위의 − + 와 Fit 으로 조절합니다. 배율은 화면에서 보이는 크기일 뿐이라 내보내는 파일 크기와는 무관합니다.