brunch

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jan 23. 2022

#10-1. 기본 레이아웃 설정, 헤더/푸터 만들기

온라인 매거진 만들기

사이트를 만들기 위한 기본 설정값들을 참고사이트의 디자인에서 확인 후 테스트용 사이트 테마 옵션을 이용해서 설정합니다.

■ 사이트 레이아웃 : 콘텐츠 최대폭 -1300px / 섹션 상하단 패딩 - 50px / 모바일 고려 화면 사이즈 - 600px까지로 임의 변경 적용

■ 색상 : 기본 - #000000(검정) / 강조 - #ff0000(빨강)

■ 타이포그래피 : 폰트 종류 - Roboto, Roboto Condensed, Pistilli / 폰트 크기 - 기본(16px, weight 300), h2(50px, weight 400)

확인된 정보를 테마 옵션을 이용해서 설정합니다. 많지 않은 약속이지만 사이트 전체가 같은 규칙으로 만들어질 수 있도록 해 주는 데에는 부족함이 없을 듯합니다.

메뉴에는 본문과 다른 폰트가 사용됩니다. 구글 폰트를 하나 더 추가했습니다. 각 카테고리 목록 상단에 제목을 위한 'Pistilli' 폰트는 파일을 업로드해서 추가를 했습니다. (이제 총 3개의 폰트 사용 가능)

먼저 참고사이트를 통해 구조를 파악해 봅니다. header 태그 안에 3층의 구조로 헤더가 구성돼 있습니다.

화면을 스크롤하면 헤더는 고정되고 로고와 메뉴만 나오는 구조로 축소됩니다.

모바일 화면에서는 [메뉴, 로고, 검색]으로 구성된 구조로 변경됩니다.

'Impreza > Headers'에서 헤더 하나를 추가합니다. 헤더 빌더에는 헤더를 상중하 3단계 구조로 만들 수 있게 설계가 돼 있습니다. (웹에서 자주 쓰는 구조)

상중하 구조에서 상, 하는 'Show Area'라는 옵션을 켜면 보이게 됩니다. 여기에 왼편에는 소셜 링크와 오른쪽에는 드롭다운 형태의 메뉴, 그리고 버튼 하나를 추가했습니다.

중간에는 로고 하나를 넣고, 하단에는 메뉴와 검색 기능을 추가했습니다. 상, 중의 구조는 헤더가 고정 상태로 바뀐 'Sticky Area Height'일 때의 높이를 0으로 주면, 화면을 내렸을 때에는 안 보이게 됩니다.

테마 옵션에서 태블릿과 모바일 화면의 사이즈를 설정했었습니다. 해당 화면 사이즈에서는 다른 모습의 헤더를 구성할 수 있습니다.

주 메뉴는 본문과 다른 폰트를 사용합니다. 테마 옵션에서 미리 추가해 놓은 'Roboto Comdensed'를 지정합니다. 햄버거 메뉴 형태로 전환되는 시점은 992px 미만으로 설정을 했습니다.

여기까지 하면 사이트에 사용될 헤더가 완성됩니다.

※

메인 메뉴 구성을 위해서는 먼저 글의 카테고리들이 만들어져야 합니다.

> 그다음 이 카테고리들을 메뉴에 구성합니다.

> 이 메뉴는 헤더를 만들 때 연결이 됩니다.

+ TIP -

워드프레스에서 카테고리를 만들고 관리할 때 한 가지 아쉬운 부분이 있습니다.

카테고리의 정렬 순서가 기본적으로 알파벳순이라는 건데요, 사이트 주 메뉴로 구성할 순서대로 정렬이 되면 관리할 때 조금 덜 번거롭겠지요. 이럴 때는 플러그인을 하나 추가해서 정렬 순서를 바꿔줍니다.

이러면 어드민 환경에서 모든 카테고리들이 이 순서대로 표시가 됩니다. (메뉴 구성 시 / 글 쓸 때 카테고리 선택 / 카테고리들 관리 시)

'Impreza > Page Blocks'에서 푸터를 위한 블록을 하나 추가합니다. 푸터의 색 조합은 테마 옵션에서 미리 세팅된 푸터용 컬러 조합을 사용하고, 왼쪽 오른쪽 여백을 두어 공간이 있게 만들어 줍니다.

푸터에 나오는 메뉴들도 외모> 메뉴에서 관리를 할 수 있게 연결을 했습니다.

이렇게 하면 푸터는 간단히 구성이 완료되겠습니다.

!!!

만들어진 헤더와 푸터는 테마 옵션에서 연결을 해줘야 표시가 됩니다.

적용된 테스트 페이지

다음으로는 더미 콘텐츠들을 만든 다음, 글의 상세 페이지, 목록 페이지를 만드는 과정으로 이어지게 됩니다.

계속...

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