1. 행을 놓을 수 있는 자리 여덟 곳

먼저 지도부터 보겠습니다. 한 페이지를 위에서 아래로 잘라 보면 행이 들어갈 수 있는 자리는 이렇습니다.

크게 둘로 나뉩니다.
본문·사이드바 바깥에 있는 자리: ① 헤더 위, ② 서브페이지 상단, ⑦ 서브페이지 하단. 사이트 머리와 꼬리 사이에서 화면 끝까지 펼칠 수 있습니다.
본문 폭 안에 있는 자리: ④ 콘텐츠 상단, ⑤ 콘텐츠 하단. 사이드바가 있으면 사이드바를 뺀 본문 폭만큼만 차지합니다.

③ 메인화면은 ⑤~⑧에서 줄곧 채워 온 홈의 본문이고, ⑥ 사이드바는 지난 글에서 했습니다. 오늘은 ①, ②, ⑤ 셋을 씁니다.
이 자리들은 전부 ⑫에서 한 대로 블록 에디터 → 페이지 목록에서 아무 페이지나 고른 뒤 ‘행 추가’로 만듭니다. 창의 ‘어디에 표시할까요’ 목록이 위 지도 그대로입니다.

2. 헤더 위 알림 띠 — 모든 페이지 맨 위에

가을 오픈 공방 소식은 ⑩에서 팝업과 배너로 알렸죠?! 그런데 팝업은 홈에서만 뜨고, 손님이 한 번 닫으면 끝입니다.
그래서 화면 맨 위에 가는 띠를 하나 더 두겠습니다. 어느 페이지를 열든 보이고, 글을 읽는 데 방해도 안 되는 자리입니다.

블록 에디터에서 ‘공지사항’을 고르고 ‘+ 행 추가’를 누릅니다.

① ‘어디에 표시할까요’에서 ‘헤더 위 (최상단 바)’를 고릅니다.
② 표시 범위는 ‘모든 페이지에’. 알림이니 어디서나 보여야 합니다.
③ 넓이는 ‘와이드 (전체)’로 바꿉니다. ⑤에서 “배경색을 깔 때 쓴다”고 했던 그 와이드입니다. 띠에 색을 깔아 화면 끝까지 채울 생각이라 여기서 씁니다.
칸 수 1칸, ‘만들기’.

만들어지면 오른쪽에 행 편집 패널이 열립니다. 이 자리에만 있는 설정이 하나 보입니다.

① 관리용 제목에 ‘알림 띠’라고 적습니다.
② ‘보지 않기’ 접이식을 펼쳐 ‘“보지 않기” 버튼 표시’를 켜고, 숨김 기간은 1일로 둡니다. 띠 오른쪽 끝에 작은 버튼이 생기고, 손님이 누르면 그 브라우저에서 하루 동안 띠가 사라집니다. 팝업의 ‘보지 않기’와 같은 방식입니다. 이 접이식은 헤더 위 자리를 골랐을 때만 나타납니다.
그 아래 ‘상세 설정’에서 배경 색상을 진한 남색 #153b70으로, PC 내부 여백을 10px 150px 10px 150px, Mobile 내부 여백을 8px 120px 8px 12px으로 넣고 ‘적용’합니다.

오른쪽 여백을 유난히 넉넉하게 준 이유는 뒤에서 보여 드리겠습니다.
이제 빈 칸을 눌러 ‘HTML 직접입력’을 고르고 한 줄짜리 안내를 씁니다. 배경이 진하니 글자는 흰색, 가운데 정렬, 끝에 공지 글로 가는 링크를 답니다. 저장하고 ‘적용’까지 누르면 끝입니다.

사이트 머리보다 더 위, 화면 맨 꼭대기에 띠가 걸렸습니다. 홈, 공지사항, 회사소개 어디를 열어도 같은 자리에 있습니다. 로그인 화면처럼 머리가 없는 화면에만 안 나옵니다.
오른쪽 끝 ‘1일 동안 보지 않기’를 누르면 띠가 사라지고, 새로 고쳐도 하루 동안은 다시 안 뜹니다.

휴대폰에서는 글이 두 줄로 접힙니다. 이때 ‘보지 않기’ 버튼이 오른쪽에 떠 있어서, 여백을 안 주면 글 끝이 버튼 밑에 깔립니다. 처음에 여백 없이 해 봤다가 그렇게 됐습니다. 아까 Mobile 내부 여백의 오른쪽을 120px이나 준 것이 그래서입니다.

3. 서브페이지 상단 — 작업 갤러리에만 머리띠

이번에는 한 페이지에만 붙는 행입니다. 작업 갤러리는 사진만 쭉 나열돼 있어서, 위에 “여기는 어떤 곳이다” 한마디가 있으면 좋겠습니다.
블록 에디터에서 이번에는 ‘작업 갤러리’를 고르고 ‘+ 행 추가’를 누릅니다.

① ‘서브페이지 상단’을 고릅니다. 사이트 머리 바로 아래, 본문과 사이드바보다 위에 들어가는 자리입니다.
② 표시 범위는 ‘이 페이지에만’. 다른 게시판에는 나오지 않습니다.
③ 넓이는 ‘와이드 (전체)’. 연한 배경색을 화면 끝까지 깔겠습니다.

만든 뒤 행 패널에서 관리용 제목을 ‘갤러리 머리’로, 상세 설정의 배경 색상을 #f3eee7, PC 내부 여백을 36px 0 36px 0으로 넣고 적용합니다.
칸에는 HTML 직접입력으로 작은 영문 머리말, 제목 한 줄, 설명 한 줄을 가운데 정렬로 넣었습니다.

사이트 머리 아래, 사진 목록과 사이드바 둘 다보다 위에 띠가 깔렸습니다. 사이드바 폭과 상관없이 화면 끝까지 갑니다. ‘본문 바깥’ 자리라서 그렇습니다.
공지사항이나 자유게시판으로 가 보면 이 띠는 없습니다. ‘이 페이지에만’을 골랐기 때문입니다.

에디터 오른쪽 목록을 보면 이 행에는 ‘전역’ 표시가 없고, 다른 페이지를 고르면 목록에서 사라집니다. 전역 행과 구분하는 방법입니다.

4. 콘텐츠 하단 — 자유게시판에만 이용 안내

마지막은 본문 폭 안에 들어가는 자리입니다. 자유게시판 글 목록 아래에 “글을 쓰기 전에 읽어 주세요” 상자를 붙이겠습니다.
블록 에디터에서 ‘자유게시판’을 고르고 ‘+ 행 추가’.

① ‘콘텐츠 하단’을 고릅니다. 표시 범위는 ‘이 페이지에만’.
② 넓이는 ‘최대넓이’ 그대로 둡니다. 이 자리는 본문 폭 안에 들어가기 때문에 화면 끝까지 펼칠 일이 없습니다.

이번에는 배경색을 행이 아니라 칸에 줍니다. ⑥에서 본 칸 ‘스타일’ 접이식에서 안쪽 여백 20px 24px 20px 24px, 배경 색상 #f7f9fc, 테두리 1, 라운드 12를 넣으면 카드처럼 보입니다. 내용은 HTML 직접입력으로 안내 두 문단입니다.

글 목록과 검색 칸 아래에 안내 카드가 붙었습니다. 3단계의 머리띠와 비교해 보세요. 이 카드는 본문 폭만큼만 차지하고, 옆의 사이드바는 그대로 있습니다.
같은 ‘이 페이지에만’ 행이지만, 서브페이지 상단은 사이드바 위로 가로질러 가고, 콘텐츠 하단은 사이드바 옆에 머뭅니다. 자리를 고를 때 이 차이만 기억하시면 됩니다.

‘콘텐츠 상단’은 같은 자리가 본문 위에 있는 것이고, ‘서브페이지 하단’은 머리띠가 꼬리 위에 있는 것입니다. 오늘 한 둘과 만드는 방법이 똑같습니다.

5. 흩어진 행을 한눈에 — 블록 행 관리

오늘로 행이 꽤 많아졌습니다. 홈에 다섯, 사이드바에 셋, 알림 띠, 갤러리 머리, 이용 안내까지 열한 개입니다.
블록 에디터는 페이지를 하나씩 골라야 보이지만, ‘블록 관리’ → ‘블록 행 관리’에는 전부 한 목록에 나옵니다.

‘출력 대상’ 칸을 보세요. ‘헤더 위 (최상단 바) · 전역’, ‘서브페이지 상단 · 작업 갤러리’, ‘콘텐츠 하단 · 자유게시판’처럼 자리와 범위가 한 줄로 적혀 있습니다.
위의 ‘위치: 전체’ 상자로 자리별로 걸러 볼 수 있고, 상태 스위치로 행을 잠깐 끄거나 오른쪽 연필로 전체 설정을 열 수 있습니다.

“어느 페이지에 뭘 붙여 뒀더라?” 싶을 때는 블록 에디터보다 이 목록이 빠릅니다. 특히 ‘이 페이지에만’ 행은 그 페이지를 열지 않으면 에디터에서 안 보이니, 잊어버리기 전에 여기서 한 번 훑어 두세요.