#15-1. 사이트 헤더, 푸터 만들기
Vogue 워드프레스 사이트 따라 만들기
참고 사이트의 헤더를 먼저 확인해 보겠습니다. 두 가지 모양의 헤더가 있는데, 하나는 메인 페이지에서만 표시되는 로고가 가운데 있는 헤더이고, 그 외 나머지 페이지나 목록 템플릿 페이지에서는 로고가 왼쪽에 있는 헤더입니다. 즉, 헤더를 2개 준비를 해야 합니다.
(메인 페이지용 헤더)
(나머지용 헤더)다음은 푸터입니다. 안에 있는 콘텐츠 영역 위아래로 공간이 있고, 그 안쪽에는 이미지와 메뉴 그리고 텍스트가 간격을 두고 세로로 중앙 정렬이 된 형태입니다.
의도가 확인이 되었으니 이제 Impreza 테마로 한 번 구현을 해 보겠습니다.
헤더(header) 만들기
Impreza 테마는 헤더 빌더를 제공합니다. 그래서 원하는 대로 디자인에 맞게 헤더를 구성할 수 있습니다.
헤더의 이름을 클릭해서 편집 화면으로 들어가 보면 이렇게 생겼습니다.
헤더를 구성할 때에는 크게 상중하로 영역을 구분하고, 그 안에서는 다시 왼쪽, 가운데, 오른쪽으로 3등분을 해서 요소를 놓을 수가 있습니다. 기본적으로 css의 flex 스타일로 요소들이 정렬이 되기 때문에 위치를 임의로 잡거나 하지 않아도 정돈된 모습을 보일 수 있습니다. 즉, 원하는 영역에 두고, 서로 간 떨어진 정도(마진), 그리고 헤더의 전체 높이만 지정해 주면 pc 화면에서의 헤더는 금세 만들 수 있게 됩니다. (보통 가운데 영역에서 주된 요소들을 배치)
(헤더 높이 209px)
(로고와 메뉴 간격은 40px)참고 사이트에 적용된 디자인 수치들을 확인 후 css 값으로 대체가 될 옵션들에 넣어 줍니다. 총높이는 209px이고, 요소들은 서로 떨어진 정도를 마진(margin)으로 약속하고 중앙 정렬 됩니다.
높이 아래 'Center the middle cell' 옵션 체크는 왼쪽 공간에 아무것도 없을 때, 중앙에 있는 요소들이 왼쪽으로 살짝 치우치는 것을 막고 정 중앙에 오게 할 때 사용됩니다.
메뉴 리스트 중 'main-menu'를 헤더 영역 메뉴에 연결하고, 각 메뉴끼리 얼마만큼 떨어져 있을 것인가도 입력해 줍니다.(20px) 로고와 메뉴 사이의 간격은 디자인대로 40px이 되도록 했습니다.
두 번째 헤더는 로고와 메뉴가 세로로 있던 것을 로고를 왼쪽에 두면 되는 것이라, 첫 번째 헤더를 완성 후 복사해서 만들면 편리합니다.
메인 페이지의 헤더와 높이가 차이가 있습니다. 이 값도 수정해 줍니다.
헤더 구성이 완료됐다면, 만들어진 헤더는 테마 옵션의 Layout 설정들에서 연결해 줘야 표시가 됩니다.
전체 사이트에서 표시될 기본 헤더를 설정하는 것이므로 두 번째 만들었던 헤더를 적용합니다.
> https://oks-dev.tk/vmagazine2/header-2/
특정 페이지나 목록 화면에서는 다른 헤더를 보이고자 한다면, 해당 페이지 내 페이지 옵션을 이용해서 헤더를 다른 것으로 대체가 가능합니다. (※ 템플릿 우선순위로 적용될 헤더를, if 비교문을 이용한 연결 구조로 페이지가 준비될 때 설정한 헤더가 나오도록 해 줌)
> https://oks-dev.tk/vmagazine2/header-1/
※ 맨 오른쪽 햄버거 메뉴를 클릭하면 나오는 전체 화면을 덮는 메뉴 화면은 이 글을 참고하면 만들 수 있습니다. > https://brunch.co.kr/@oksambari/126 (풀스크린 검색폼 & 메뉴 만들기)
이번 따라 하기에서는 이 부분은 생략했습니다.
푸터(footer) 만들기
예전에는 푸터는 주로 테마에 있는 옵션으로 모양을 결정하고, 위젯으로 내용들을 구성하곤 했습니다. 최근에는 테마와 빌더들이 많이 좋아져서 이제는 '외모>위젯'이라는 메뉴 자체를 들어갈 일이 거의 없는 거 같네요.
Impreza 개발자들은 푸터 또한 페이지 빌더를 이용해서 구성하고, 헤더처럼 마지막에 테마 옵션을 통해 원하는 푸터가 보이도록 연결 구조를 만들어 놨습니다.
푸터의 편집 화면을 들어가 보면 이렇습니다. 로우(섹션) 하나에 이미지, 메뉴, 텍스트 요소들을 순서대로 넣고, 이것들은 모두 가운데 정렬이 되도록 설정합니다. (섹션에 css로 text-align:center를 준 것과 같음)
메뉴는 '외모>메뉴'에서 만든 'footer-menu'라는 리스트를 연결하고, 위 로고와 아래 텍스트 사이의 간격은 마진(margin)으로 지정을 했습니다.
메뉴들 사이의 세로 구분선은 css를 추가하여 적용할 수 있습니다.
> https://oks-dev.tk/vmagazine2/header-2/ (하단)
여기까지 하면 사이트의 기본 골격이 되는 헤더와 푸터가 완성됩니다. 이제 가운데 영역인 콘텐츠들을 원하는 디자인대로 만드는 과정이 필요합니다.
계속...
