brunch

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jul 08. 2023

#14-1. 헤더, 푸터, 기본 레이아웃 설정

워드프레스 블로그 만들 때 헷갈릴 수 있는 부분들

웹사이트를 만들기 위한 기본 골격을 만드는 과정입니다. 워드프레스를 설치하고, 어드민에서 원하는 테마를 설치했다면 웹의 구조는 잘 몰라도 화면 구성만 신경 쓰면 될 정도로 이미 환경이 세팅이 된 겁니다. (헤더 태그 필수 요소 기재, css 연결, js 연결 등)

참고사이트를 완성되었을 때의 디자인으로 보고 표시될 각종 기준들을 체크한 다음 이번에도 저는 Impreza 테마를 이용해서 사이트를 간편하게 구축해 보겠습니다.

※ 브라우저의 개발자 도구를 이용하면 사이트의 기본 구조들을 확인해 볼 수 있습니다.

- 콘텐츠 최대 가로폭, 반응형 디자인 분기점, 섹션 간 위아래 여백 지정

템플릿의 경우 최대폭 없이 좌우 패딩값으로 여백을 주고 있습니다. 이 경우 화면 해상도가 2000px이 넘어가는 화면에서 사이트를 보면 여백이 의도치 않게 보이게 되는데, 최댓값을 주면 화면이 계속 퍼지는 것을 방지할 수 있습니다.

- 주요 색 조합 : 글자색, 강조색, 마우스를 올렸을 때(:hover) 색 등을 체크합니다.

테스트 사이트에서는 검, 흰 조합을 사용했습니다.

- 폰트 사이즈들 지정

글에서 쓰일 폰트의 기본 크기 20px을 기준으로 h1~h6 태그들의 사이즈는 rem단위로 지정을 해 줍니다. rem은 20px의 몇 배인가를 지정해 주는 사이즈입니다. 계산은 이런 사이트를 이용하면 간편합니다.

- 헤더에 나오는 버튼 스타일 지정

디자인에 맞는 버튼도 원하는 대로 지정해 놓고 어디든 쓸 수 있는 장점이 있습니다.

몇 가지의 설정이 완료되면 이제 워드프레스 어드민 콘텐츠 편집기에서 만든 화면은 위 기준 내에서 표시가 되게 됩니다. (헤더, 본문 콘텐츠, 푸터 등)

헤더에는 로고, 좌측 메뉴들, 우측 메뉴들이 있고, 화면을 내려도 헤더는 계속 고정된 형태입니다. 모바일에서는 메뉴들이 합쳐서 아래로 슬라이드 되어서 나오는 구조로 바뀌네요.

Impreza 테마에서 제공하는 템플릿 메뉴 > Headers에서 사이트를 위한 헤더를 하나 만듭니다. 좌우에 원하는 요소들을 넣고, sticky 옵션을 켠 다음, 헤더 아래에 라인이 표시되도록 했습니다.

메뉴 요소에 리스트 연결하기

헤더 요소에 있는 메뉴의 리스트는 워드프레스 어드민 > 외모 > 메뉴에서 관리할 수 있도록 합니다.

모바일 화면에서의 두 메뉴가 합쳐진 구조를 위해 또 다른 리스트를 만들기보다는 아래처럼 페이지 빌더를 이용해서 둘을 디자인에 맞게 조합해서 표시할 수도 있습니다. (Reusable Block 편집 내용을 헤더의 메뉴 구조에서 불러다 사용이 가능)

메뉴의 현재 위치 표시나, 마우스를 올렸을 때 표시되는 아래쪽 라인 효과도 참고사이트의 css를 참고하여 Impreza > Custom code 부분에 적어줍니다. 헤더는 항상 표시되므로 전체 사이트에 적용할 공통 css는 여기에 적어주면 되겠습니다.

모든 페이지에 공통으로 등장하는 아래 구조를 푸터로 제작하면 되겠습니다. 페이지 빌더를 이용해서 Reusable Block > 'Footer'라는 이름으로 블록을 하나 만듭니다. (형태만 일부 잡았습니다)

사이트의 전체 레이아웃 기준 설정, 헤더, 푸터가 완성이 되었다면 테마 옵션에 만든 헤더와 푸터를 연결하면 끝입니다.

다음은 글의 목록이 보이는 페이지, 템플릿을 준비하는 과정으로 이어집니다.

계속...

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari