brunch

매거진 IMPREZA 테마 활용

라이킷 4 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Nov 06. 2021

#4-1. 헤더, 푸터 만들기

IMPREZA 테마로 카카오 블로그 따라 만들기

헤더와 푸터의 구조부터 먼저 확인해 봅니다.

헤더

1. 투명한 상태였다가 화면을 내리면 화면 위에 계속 고정이 되고, 배경색이 투명에서 지정된 색으로 변경

2. 모바일에서는 햄버거 버튼을 누르면 전체 화면을 덮는 메뉴로 변경 (검색 기능도 메뉴 위로 이동)

! 테스트로 구현해 볼 사이트에서는 최대한 쉽게 구현하는 것을 소개하기 위해 원본 사이트의 모바일 메뉴와는 살짝 다르게 구성을 해 볼 예정입니다. > 검색 기능을 분리해서 표시.

만약 검색 기능이 들어 있는 모바일 메뉴를 넣어야 하는 경우에는 화면을 덮는 별도의 블록을 준비하면 됩니다. > https://brunch.co.kr/@oksambari/28 (맨 아래쪽 모바일 메뉴 구조 추가 부분 참조)

푸터

1. 내비게이션이 포함된 위쪽 푸터 구조 + 카피라이트와 패밀리사이트 옵션 메뉴가 있는 아래쪽 푸터 구조

2. 모바일에서는 모두 세로로 이어지는 구조로 표시

(! 패밀리 사이트 옵션 메뉴 표시는 다른 글에서 다뤄본 것이라 생략했습니다.)

이제 파악된 내용을 토대로 헤더와 푸터를 만들어 보겠습니다.

1. 헤더

Impreza 테마의 경우 헤더를 자체 개발된 빌더로 만들 수 있게 돼 있습니다. 메뉴 Impreza > Headers에서 'Add Header'를 클릭합니다. 그러면 빈 화면이 나오는데 + 버튼을 눌러서 요소를 하나씩 넣어도 되지만 좀 더 쉽게 만들기 위해 우상단 템플릿을 클릭해서 비슷한 헤더 템플릿 하나를 사용하면 더 편리합니다.

템플릿에서 네 번째 투명한 헤더를 클릭하면 그에 맞는 헤더 구조가 불러와진 걸 볼 수 있습니다. 헤더가 늘 화면 위에 붙어 있게 되는 'Sticky' 옵션과 'Transparent' 옵션이 이미 적용돼 있고 로고와 메뉴, 그리고 검색 기능까지 들어가 있습니다.

이제 디자인에 맞게 설정을 조금 바꿔줘야겠지요. 디자인상 헤더가 고정 넓이가 아니라 화면에 꽉 찬 형태로 펼쳐져 있습니다. 중간 부분(Main Area) 설정에서 'Full Width Content' 옵션을 켜면 되겠고, 디자인된 헤더 높이 74px을 여기에 지정합니다. 투명에서 Sticky 상태로 됐을 때에도 동일하게 74px을 지정하면 화면을 스크롤해서 내려가면 색만 변하는 걸 볼 수 있게 됩니다. 모바일 헤더 사이즈도 동시에 조정해 봤습니다. 디자인은 모바일에서는 헤더가 55px로 변경이 됩니다.

로고는 테스트라 이미지 대신 텍스트로 넣어봤습니다. 링크는 http부터 다 적는 게 아니라 상대 주소를 적습니다. 테스트용 사이트는 도메인 아래 하위 폴더에 워드프레스가 설치된 형태라 / 아래 주소가 더 있는 것입니다. 보통은 도메인 주소가 열리게 하려면 / 만 적어주면 됩니다.

메인 메뉴를 구성할 차례입니다. 어떤 메뉴 그룹인지 연결을 해서 메뉴 구조는 외모 > 메뉴에서 관리할 수 있게 합니다. 디자인상 메뉴 간 간격은 40px을 반으로 나눠서 각 메뉴의 공간을 주었습니다. 메뉴 폰트 사이즈나 css 디자인과 관련된 것들은 Design 탭에서 설정 가능합니다. 모바일 화면에서는 화면을 덮는 메뉴 구조가 등장하도록 설정할 수 있습니다. 언제 햄버거 메뉴로 변경이 되면서 모바일 메뉴가 나올지 저는 992px 미만 화면에서 나오도록 해 봤습니다. (보통 로고와 메뉴 리스트가 겹치지 않는 사이즈로 설정하면 됩니다) 모바일 메뉴의 형태는 화면을 다 덮는 것으로 설정했습니다.

헤더 구조 파악 시 잠시 설명을 드렸듯이 간편하게 헤더를 구성하는 것을 소개하기 위해 검색 기능이 모바일에서는 메뉴 위가 아니라 분리되어서 헤더를 덮는 구조로 변경이 되도록 설정했습니다. pc에서 태블릿 사이즈까지는 검색 1을 사용하고, 모바일 화면에서는 검색 2를 사용하도록 설정이 가능합니다. 아래 이미지를 보시면 메뉴 구조 아래에 사선 처리된 숨김 영역이 있는 것을 볼 수 있는데 여기 가져다 놓은 요소는 해당 화면 사이즈에서는 숨겨지게 됩니다. 즉, pc 화면에서는 모바일 검색을 숨겨 놓고, 모바일 화면에서는 pc용 검색을 아래로 내려 숨겨 놓으면 되겠습니다.

2. 푸터

푸터는 사이트의 맨 아래 연결이 되는 하나의 블록 개념입니다. 그래서 Impreza > Page Blocks에서 만든 다음 테마 옵션을 통해 연결을 할 수 있습니다.

새 페이지 블록 추가로 'Footer'라는 것을 만들었습니다. 두 섹션이 붙어 있는 구조로 파악이 됐고, 페이지 빌더의 한 요소인 두 Row를 넣어서 구성했습니다.

먼저 위쪽은 헤더와 마찬가지로 화면 전체 넓이로 퍼지는 것으로 설정 후 3/5 + 1/5 + 1/5 세 칼럼으로 나눴습니다. 색 조합은 테마 옵션 > colors에서 설정한 조합이 사용되도록 설정했습니다.

디자인상 각 칼럼은 각각의 공간(패딩)을 가지고 있고 모바일에서는 사이즈가 조정이 되고 있습니다. 이건 각 칼럼 구조 편집 설정에서 적용 가능합니다. (※ Design 탭을 자주 사용할 것인데 css를 직접 코딩해서 넣지 않고 쉽게 넣을 수 있게 테마 개발자가 만들어 놓은 기능입니다.)