#7-2. 헤더(+색 반전 버튼), 푸터 만들기
그리드 디자인 사이트 만들기
이전까지 기초적인 레이아웃 구조를 만들었다면 이제 모든 페이지에 공통되는 헤더와 푸터를 제작할 차례입니다. 우선 참고사이트의 구조를 파악해 보겠습니다.
헤더
참고사이트에서는 header 태그 바로 위로 좌하단의 고정된 로고가 별도로 들어가 있습니다. 헤더 왼쪽에는 메뉴들이, 오른쪽에는 반전색 적용을 위한 동그라미 버튼이 있습니다. 이 버튼을 클릭하면 화면의 색 조합이 검은색 배경에 흰 글자인 모습으로 반전이 됩니다. 모바일에서는 각 메뉴의 최소 넓이는 없어지고, 대신 메뉴 사이 간격만 일정하게 적용됩니다. 또한 헤더의 공간 및 로고의 사이즈 변화가 있습니다.
푸터
footer 태그 내에 크게 두 그룹으로 나뉘어 화면 요소들이 구성돼 있습니다. 모바일 화면에서는 로고가 공간에 들어가도록 로고 사이즈 조정이 필요합니다. (max-width:44%)
확인된 디자인 고려 사항 및 적용할 기능을 테스트 사이트에는 어떻게 적용을 했는지 정리해 보겠습니다.
1. 헤더 만들기
'Impreza > Headers'에서 사이트에 적용할 헤더 하나를 만듭니다. 좌측에는 메뉴 요소, 오른쪽에는 반전 버튼을 적용하기 위한 a 태그를 표시하기 위해 html 요소를 넣었습니다. 참고사이트와 달리 가운데에는 이미지 요소를 넣었는데 화면이 스크롤되어 헤더가 sticky 상태가 되는 것을 체크하는 기능이 이미 있기 때문에 이걸 이용하기 위함입니다. (※ 위치가 fixed 되어 왼쪽 아래로 이동이 되기 때문에 참고사이트와 달리 헤더 안에 있어도 상관이 없음) 헤더는 상단에 계속 고정이 되도록 Sticky에 체크를 하고, 배경색은 빼기 위해
Transparent에 체크를 했습니다.
메뉴는 외모 > 메뉴에서 관리할 수 있게 연결을 했습니다.
컬러 반전 버튼의 스타일은 css로 따로 정의합니다. 마우스를 올렸을 때 크기가 커지는 효과는 transition을 이용해 표시할 수 있습니다.
이미지의 사이즈는 pc에서는 바닥에 그은 선을 기준으로 왼쪽 한 칸을 넘어가지 않게 cal() 형태로 계산식으로 적어줍니다. 모바일에서는 % 형태로 적어서 영역의 반을 넘기지 않게 해 줍니다. Position 속성으로 이미지의 위치를 fixed로 정의를 하게 되면 이미지는 웹 화면에서 지정된 위치에 놓이게 됩니다. css로 추가 디자인을 적용하기 위해 id를 지어줬습니다.
브라우저에서 테스트 페이지를 열어서 화면을 스크롤하면 헤더에 'sticky'라는 클래스가 추가되는 걸 볼 수 있습니다. 스크롤을 시작하면 로고의 투명도가 0.1(살짝만 보임)로 변경이 되는 부분을 처리하기 위해 css로 sticky 상태일 때의 스타일을 추가합니다.
다시 확인해 본 결과, 이미지가 헤더에 들어 있는 경우 우선 헤더의 z-index를 따르게 되네요. 헤더의 z-index는 항상 클릭이 돼야 하기 때문에 가장 높습니다. 그러므로 헤더 안에 로고 이미지가 있어서 영향을 받을 수밖에 없는 상황입니다. (본문 내용을 볼 때 로고가 콘텐츠 위에 오는 문제)
해결 방법은 로고 이미지를 아예 참고사이트처럼 본문과 별개의 위치로 이동을 하거나, 0.1 투명도로 변경이 되는 것을 아예 숨기는 거로 변경을 해야 했습니다. 후자로 적용을 하는 것으로 하고 저는 css를 수정해서 로고가 콘텐츠 위로 올려져 보이는 부분을 해결했습니다. (로고는 화면 시작과 끝에서만 나옴)
화면의 맨 아래에 도달을 하면 투명해졌던 로고가 다시 원 상태로 보여야 합니다. 이 부분은 jQuery 스크립트로 제어를 할 수 있겠습니다. 이미지에 붙여준 Id 이름을 이용해서 맨 아래 도달했다는 클래스를 넣었다가 아닐 땐 빼면 됩니다.
정리해 보면, 원상태는 화면에 보이다가, 스크롤되면 'visibility:hidden'으로 화면에서 사라지고, 화면 맨 아래 다다르면 'visibility:visible'로 화면에 다시 나타나도록, css선택자와 클래스 조합으로 스타일 정의를 했습니다. 헤더가 sticky 되는지 여부는 이미 있는 헤더의 sticky 체크 기능을 활용했고, 맨 아래 도달 여부만 jQuery 스크립트를 조금 추가해서 체크를 해 줬습니다.
+ 사이트 전체의 색을 반전시키기 +
헤더의 오른쪽에 있는 색 반전을 위한 버튼을 클릭하면 전체 색이 바뀌어야 합니다.
우선 이 전 과정에서 테마 옵션 > Colors에서 Alternate 색 조합들을 헤더, 본문, 푸터 각각 설정을 했었습니다. 색들의 값은 페이지가 열릴 때 변수 형태로 css 정의가 됩니다. 따로 글자에 색을 지정하지 않으면 모두 이 색 변수를 통해 색이 지정되는 방식입니다.
테스트를 위해 로우 컬러 스타일을 'Alternate Content Colors'로 변경 후 페이지를 열어 보면 이 로우에 클래스가 추가되는 걸 볼 수 있습니다. 그러니까 클래스가 각 색 조합 이름으로 추가가 되면 이 로우는 기본 색들이 변경이 될 수 있는 것이지요. 즉, 로우에 클래스가 추가하거나 뺄 수 있으면 글자의 색들이 한꺼번에 변경이 가능하다는 얘기입니다.
이제 색 반전용 버튼(col-switch)이 클릭됐을 때에 동작하는 스크립트만 추가하면 되겠습니다. functions.php 파일을 이용해서 아래와 같이 스크립트 몇 줄을 추가했습니다. 참고로 toggleClass는 특정 클래스를 넣었다 뺐다 하는 역할을 합니다.
기초 레이아웃 세팅 시 본문의 백그라운드 색은 투명하게 처리를 했기 때문에 이건 따로 css 정의를 해서 적용을 해야 합니다.
body {background-color:#f2f2f2;}
body.color-alternate {background-color:#1b1d1c;}
한 가지 아쉬운 부분은 헤더 쪽 컬러 적용인데, 현재는 헤더는 반전색을 클래스로 제어를 하는 방법이 없습니다. 그래서 메뉴의 색도 css로 따로 제어를 했습니다.
body.color-alternate .w-nav.type_desktop>.w-nav-list>.menu-item > a,
body.color-alternate .w-nav.type_desktop>.w-nav-list>.menu-item:hover > a {color:#f0f0f0 !important;}
이제 사이트를 열어 버튼을 클릭해 보면, 전체 색 조합이 반전되어서 잘 표시되는 걸 볼 수 있습니다. Impreza의 경우 테마의 기본 기능 + 약간의 응용을 하면 가능한 방법이었습니다.
2. 푸터 만들기
'Impreza > Page Blocks'에서 푸터로 쓸 페이지 블록을 하나 추가합니다.
참고사이트의 디자인과 같이 2개의 로우(섹션)를 추가했고, 위에는 콘텐츠 넓이만큼의 직사각형 박스가 보이게, 아래에는 ToTop 버튼과, 카피라이트 텍스트를 넣었습니다.
1번 섹션에는 테스트를 위해 배경의 색이 계속 변하는 효과를 적용한 것으로, 만약 참고사이트처럼 이미지 여러 개를 슬라이드로 표시해야 하는 경우, 화면 요소 중 carousel을 사용하거나 다른 콘텐츠로 채울 수 있습니다.
헤더와 푸터를 만든 다음에는 이것들이 각 페이지에서 기본적으로 노출되도록 테마 옵션을 통해 설정합니다. 그다음 페이지를 하나 만들어 열어 보면 헤더와 푸터까지 적용된 것을 볼 수 있습니다.
> 테스트 페이지 : https://oks-dev.tk/grid3/test-2/
다음으로는 그리드 선을 이용해서 콘텐츠를 정렬해서 표시하는 과정이 될 듯합니다.
계속...
