구분선과 간격 요소

안내 문구와 신청 방법처럼 성격이 다른 내용이 붙어 있으면 어디서 끊어 읽어야 할지 헷갈립니다. 이럴 때 얇은 선을 하나 긋거나 빈 공간을 조금 넣어 주면 내용이 구분됩니다. 에디터의 구분선과 간격 요소는 바로 이 일을 합니다. 이 글에서는 두 요소를 찾는 곳, 넣는 방법, 간격의 높이를 바꾸는 방법을 순서대로 안내합니다.

1. 구분선과 간격은 어디에 있나요

에디터 왼쪽 레일에서 요소 추가(+ 아이콘)를 누르면 요소 패널이 열립니다. 맨 위 레이아웃 카테고리에 2열, 3열, 컨테이너에 이어 구분선과 간격이 있습니다. 요소 패널 자체의 사용법은 별도 글에서 다룹니다.

2. 페이지에 넣기

넣을 섹션의 빈 곳을 눌러 선택한 뒤 구분선이나 간격을 누르면 그 섹션의 맨 아래에 들어갑니다. 원하는 자리에 넣고 싶다면 아이콘을 끌어 캔버스 위에 놓으세요. 두 아이콘 모두 마우스를 올리면 드래그하여 삽입할 수 있다고 안내됩니다.

• 구분선: 내용 영역의 가로 폭을 가로지르는 연한 회색의 가는 선이 들어갑니다. 선 위아래에 여백이 함께 있어서 앞뒤 내용과 적당히 떨어집니다.
• 간격: 눈에 보이는 모양 없이 높이만 가진 빈 공간이 들어갑니다. 처음 높이는 64px입니다.

3. 구분선과 간격, 언제 무엇을 쓸까요

구분선은 눈에 보이는 경계가 필요할 때, 간격은 보이지 않는 여백만 필요할 때 어울립니다. 위 화면처럼 구분선으로 내용을 나눈 뒤 그 아래에 간격을 넣으면, 선과 다음 내용 사이를 원하는 만큼 띄울 수 있습니다.

4. 간격의 높이 바꾸기

간격은 비어 있어서 눈에 잘 띄지 않지만, 캔버스에서 그 자리를 누르면 연보라색 영역으로 표시되고 가운데에 현재 높이(예: 64px)가 나타납니다. 영역 위아래에는 굵은 막대 모양의 핸들이 생깁니다.

높이는 세 가지 방법으로 바꿀 수 있습니다.

1. 핸들 끌기: 위쪽 또는 아래쪽 핸들을 끌면 끄는 동안 높이가 실시간으로 표시됩니다. 위쪽 핸들은 위로, 아래쪽 핸들은 아래로 끌수록 커지며 가장 작게는 8px까지 줄일 수 있습니다.

1. 숫자 직접 입력: 가운데에 표시된 높이 숫자를 누르면 입력칸으로 바뀝니다. 원하는 값을 적고 Enter를 누르면 적용됩니다. Esc를 누르면 입력을 취소합니다.

1. 설정 창과 속성 패널: 요소 툴바의 톱니바퀴(요소 설정 열기)를 누르면 간격 항목 아래에 높이 입력칸과 슬라이더가 나옵니다. 슬라이더는 8px에서 400px 사이를 4px 단위로 움직입니다. 창 아래의 전체 속성 패널 열기 (효과·반응형·HTML) →를 누르면 오른쪽 속성 패널에서도 같은 높이 항목을 쓸 수 있습니다. 속성 패널에는 콘텐츠, 스타일, 효과, 반응형 탭이 있고, 간격의 높이는 콘텐츠 탭에 있습니다.

높이를 100px로 맞추고 저장한 뒤 새로 고침한 화면입니다. 편집 중에 보이던 보라색 표시는 사라지고, 구분선과 다음 내용 사이에 정한 높이만큼의 빈 공간이 남습니다.

5. 복제하고 지우기

간격을 선택하면 오른쪽에 점 세 개 모양 버튼이 나타납니다. 이 버튼을 누르면 요소 설정 열기, 레이아웃 / 간격, 링크 넣기, 요소 복제, 요소 삭제 아이콘이 있는 툴바가 펼쳐집니다. 같은 높이의 간격이 하나 더 필요하면 요소 복제를, 필요 없어졌다면 요소 삭제를 누르세요. 삭제는 확인 창 없이 바로 이루어집니다.

6. 이렇게 활용해 보세요

• 소개 문구와 신청 안내처럼 주제가 바뀌는 곳에 구분선을 넣어 읽는 흐름을 나눌 수 있습니다.
• 섹션과 섹션 사이를 더 띄우고 싶을 때 간격을 넣고 높이를 조금씩 바꿔 보며 알맞은 느낌을 찾아 보세요.
• 요소와 요소 사이가 답답해 보이면 간격을 8px 정도의 낮은 값부터 넣고, 넉넉하게 띄우고 싶은 곳은 높은 값으로 정해 화면에서 비교해 볼 수 있습니다.
• 같은 간격이 여러 곳에 필요하면 한 번 맞춘 뒤 복제해서 쓰면 높이를 다시 정하지 않아도 됩니다.

7. 알아 두실 점

• 간격의 높이는 편집 화면에서 바꾼 뒤 상단의 저장을 눌러야 보관됩니다. 저장한 뒤 새로 고침해도 같은 높이로 열리는 것을 확인했습니다.
• 간격 설정 창과 속성 패널의 제목에는 간격이 아니라 여백이라고 표시됩니다. 같은 요소입니다.
• 구분선은 삽입할 때 정해진 모양(연한 회색 선)으로 들어갑니다.

요소를 넣는 기본 방법은 요소 패널을 다룬 글에서, 컨테이너 사이의 간격과 여백 조절은 별도 글에서 이어서 안내합니다.