#11-1. 기본 레이아웃 설정, 헤더/푸터 만들기
'펜트하우스'도 워드프레스 사이트
웹은 사이트 전반에 적용되는 기본 규칙들이 있어야 통일된 모습으로 보일 수가 있습니다. 이런 규칙들은 css 코드를 통해 적용이 되는데, 테마에 따라 이걸 옵션 몇 가지만 조정하는 것으로 쉽게 대체해 주기도 합니다. Impreza 테마의 경우도 꼭 필요한 주요 옵션들만 설정을 해 주면 사이트 전체가 공통된 틀 안에서 동작이 되도록 잘 만들어져 있습니다. (이렇게 직관적으로 적용하는 방식은 사실 다른 테마에서는 아직 본 적이 없습니다.)
현재 참고사이트의 주소 하나만 알 수 있는 상황이므로 브라우저의 개발자 도구를 이용해서 필요한 정보를 확인했습니다.
참고로, 최근에는 웹디자인을 전달받을 때 Figma나 zeplin으로 받는 경우가 많아 구축 전 디테일한 정보를 쉽게 얻을 수 있습니다. 이걸 대신해서 역으로 적용된 것들을 개발자 도구를 이용해서 체크해 보는 겁니다.
참고사이트에 적용된 css 정보들 중,
테마 옵션에 적용하기 위해 확인한 정보들을 요약해 보면 이렇습니다.
1. 주 콘텐츠 넓이 : 1302px
2. 칼럼들이 1열로 바뀌는 시점 : 768px 미만
3. 모바일 화면 뷰 : 767px까지
4. 주요 기기 사이즈 : 이건 제 편의상 태블릿은 991px까지, 랩탑은 1366px까지로 나눔
5. 색상 : #fff(흰색), #000(검은색), #7f6642(강조색)
6. 폰트 : Roboto(본문), Playfair Display(H 태그들) / 사이즈는 기본 16px인데 p 태그에 1.125rem을 적용해서 사실 18px / h1(2.812rem) ~ h6(1.3rem)
7. 로우(섹션) 위아래 기본 공간 : (참고사이트는 공간이 수시로 변해서 무의미하지만) 기본 공간은 4rem으로 설정.
이제 이 정보들을 가지고 테마 옵션을 설정합니다.
기본 레이아웃 규칙들이 설정됐으니, 이제 헤더와 푸터를 만들 차례입니다.
헤더 만들기
(※ 참고사이트의 탑 헤더는 제외했습니다.)
참고사이트를 통해 확인한 헤더는 이렇습니다.
[ 로고 / 메뉴 / 검색 ]의 구조로 화면 스크롤 시 고정(sticky)되는 구조이고, 메뉴가 겹치는 시점에서는 모바일 메뉴로 변경되어서 화면을 덮는 메뉴 형태로 표시됩니다. Sticky 상태일 때의 헤더 높이가 110px에서 80px로 변경됩니다.
Impreza > Headers에서 'Header'라는 이름으로 헤더를 하나 만들었습니다.
로고 이미지와 메뉴, 검색 요소를 위치에 맞게 넣었습니다. 스티키 옵션 적용, 높이 변경 값 입력, 콘텐츠 넓이와 상관없이 화면의 끝까지 펼쳐지는 구조이므로 'Full Width Content' 옵션을 켰습니다.
참고사이트의 경우 화면이 조금 줄면 메뉴가 겹치는 현상이 보입니다.
이런 것을 대비하기 위해 1600px 이하에서는 요소 위치를 바꿔서 보완도 가능합니다. 헤더 빌더를 이용하면 각 기기 사이즈별로 헤더의 모양을 마음대로 바꿀 수 있는 장점이 있습니다.
메뉴는 워드프레스의 기본 관리 방법인 '외모>메뉴'에서 구성한 것이 연결되도록 했고, 메뉴들이 로고와 겹치는 시점인 1180px 이하부터는 모바일 메뉴가 표시되도록 설정했습니다.
만들어진 헤더를 테마 옵션을 통해 연결 후 잘 표시되는지 확인해 봅니다.
푸터 만들기
푸터는 상단, 하단으로 나뉘어 있고, 각 줄은 [1/2+1/2] 칼럼으로 나뉘어 있는데 오른쪽 칼럼들은 넓이가 제한되어 오른쪽으로 붙어 있습니다. 모바일 화면에서는 중앙 정렬로 세로로 늘어서게 됩니다.
'Impreza > Page blocks'에서 사이트의 푸터를 하나 만들었습니다. 만든 푸터는 테마 옵션을 통해 연결해야 표시됩니다.
푸터에 들어갈 이미지와 텍스트, 메뉴들을 화면 요소를 추가해서 구성하고, 오른쪽 1/2 칼럼들에는 넓이를 제한해서 오른쪽으로 붙을 수 있도록 'max-25rem'이라는 클래스명을 추가했습니다. 이 클래스를 가진 칼럼들에 css를 추가해서 스타일을 적용합니다. 최대 넓이와 왼쪽 공간에 'auto'를 주면 오른쪽으로 붙게 됩니다.
푸터 상단과 하단의 컬러 조합은 초반에 테마 옵션에서 설정한 것을 적용하면 되겠습니다. (배경색, 본문 글자, H 태그, 링크 색들이 적용)
이제 푸터가 제대로 표시되는지 확인해 봅니다.
※
뉴스레터 가입 부분은 가입 리스트를 어드민 내부에 쌓을지, 외부 서비스를 이용할지 결정 후 적용을 하면 됩니다. 내부에 쌓으려면 'caldera forms'와 같은 폼 플러그인을 사용하면 되고, 외부에 쌓으려면 'mailchimp'와 같은 서비스에 가입 후 안내된 폼 코드를 원하는 위치에 넣으면 되겠습니다.
여기까지 하면 일단 사이트의 기본 골격과, 헤더/푸터가 완성이 된 상태가 됩니다.
> https://oks-dev.tk/logohouse/test/
(※ 테스트 사이트를 해외 호스팅으로 옮겨 놓은 관계로 접속이 느릴 수 있습니다.)
다음으로는 주 콘텐츠를 분류로 나누고, 디자인대로 목록을 만드는 작업이 필요합니다.
계속...
