#12-1. 세로형 헤더 만들기
미니멀 디자인 워드프레스 포트폴리오 홈페이지
참고 템플릿의 디자인을 먼저 확인해 보겠습니다.
넓이 50% 50%로 좌측에는 로고와 사이트 설명, 메뉴, 그리고 카피라이트와 소셜 링크들이 표시됩니다. 브라우저 개발자 도구를 통해 구조를 보면 css의 grid라는 속성을 사용한 거로 보입니다. 좌측 헤더 영역은 오른쪽의 콘텐츠가 길어서 스크롤이 될 때에도 계속 고정된 상태로 표시됩니다. 스크롤 시 한쪽이 고정되는 것은 높이를 화면 높이인 100vh로 고정하고 'position: sticky;'라는 css 속성을 적용했기 때문입니다. 헤더의 내용들이 표시되는 안쪽 여백은 사방으로 24px의 padding이 적용돼 있습니다.
모바일 사이즈의 뷰포트에서는 grid 개수가 1개로 바뀌고, 높이가 100vh에서 auto로 바뀌면서 콘텐츠만큼만 나오는 헤더 구조로 바뀌어 표시됩니다.
이제 위와 같은 디자인을 주어진 환경(Impreza Theme)을 가지고 어떻게 표시를 할지 고민을 할 차례입니다.
1. 헤더 50% / 콘텐츠 영역 50% 만들기
우선, Impreza Theme에는 헤더를 마음대로 만들 수 있는 헤더 빌더가 있습니다.
pc 화면 사이즈에서는 헤더를 'Vertical'로, 태블릿 이하 모바일 기기 사이즈에서는 헤더를 'Horizontal'로 설정을 하면 화면 크기에 따라 헤더를 세로 또는 가로로 쉽게 만들 수 있습니다. 단, 헤더 영역의 넓이를 현재는 px나 rem이라는 단위로만 지정을 할 수 있게 돼 있어서 % 넓이를 바로 적용하긴 어려운데, 이건 대신 css를 몇 줄 추가하는 것으로 해결이 가능한 문제입니다. (차후 테마 버전 업 시 % 넓이도 적용되면 좋을 것 같음)
헤더 빌더를 이용해서 설정하는 수치나 옵션들은 결국은 화면이 만들어질 때, css 정의들로 준비가 됩니다. 즉, css를 하나하나 직접 적어서 적용할 것을 마우스나 키보드를 이용해서 사용자가 쉽게 적용할 수 있게 만든 것이죠. CSS(Cascading Style Sheets)는 의미에서 알 수 있듯이 위에서 아래로 순차적으로 적용이 되는 특성이 있는데, 미리 적용된 정의가 있더라도 필요시 재 정의해 주면 최종 작성한 것이 적용이 됩니다. (옵션에 의해 적용된 300px 대신 50% 넓이 적용)
앞서 체크했던 참고 사이트의 구조(css grid 속성으로 구조 표시)와 조금 다르게, Impreza 테마는 콘텐츠의 영역을 좌측에서 특정 수치만큼 공간을 비우는 방식으로 만들어져 있습니다. 헤더를 세로로 만들 때 지정된 수치가 연결되어서 자동으로 css가 작성이 되는데, 여기도 css 재 정의를 통해 50% 넓이만큼 왼쪽을 띄운 다음 표시되도록 하였습니다. (모바일 메뉴가 나오기 전 992px까지)
추가 CSS 정의는 테마 옵션 > Custom Code에서 작성할 수 있습니다.
@media (min-width:992px) {
.l-header {
width: 50%;
}
.l-body {
padding-left: 50%;
}
}
여기까지 하면 헤더가 50%, 오른쪽에 올 실제 본문 넓이도 50%가 되도록 하는 것이 적용됩니다.
2. 헤더 요소들 표시 (로고, 설명글, 메뉴, 카피라이트 등)
이제 헤더 안에 들어갈 내용을 표시할 차례입니다.
참고용 템플릿의 디자인상 pc와 모바일의 헤더 모양이 거의 같습니다. (모바일에서는 로고 아래 콘텐츠들이 메뉴 버튼으로 펼쳐짐) 단순 메뉴만 표시되는 경우라면 헤더 빌더로 구조를 구성하면 되겠지만 메뉴를 클릭 시 조금 복잡한 구조를 표시해야 하는 경우 저는 Impreza의 특성을 살짝 응용해서 적용을 합니다.
Impreza 테마는 'Reusable Block'이라고 해서 페이지 빌더를 가지고 만들어 놓은 블록들을 메뉴에 등록해서 표시할 수 있는 방법을 제공합니다. 경험상 페이지 빌더로 만들면 헤더 빌더를 가지고 내용을 구성하는 것보다 조금 더 직관적이고 익숙하게 편집을 할 수도 있고, 차후 직접 운영을 하는 관리자도 내용을 조금 더 쉽게 수정할 수 있게 할 수 있는 장점이 있습니다.
요약 :
블록으로 전체 화면 높이에 들어갈 화면 요소들을 구성하고 > 이걸 워드프레스의 메뉴로 등록 > 이제 헤더 빌더에서 연결하면 끝.
태블릿 이하 모바일 화면 사이즈에서는 메뉴에 연결된 콘텐츠가 바로 표시되는 게 아니라, 햄버거 메뉴를 클릭 시 내용이 펼쳐지도록 설정할 수 있습니다. (좌측 로고, 오른쪽 메뉴 -> 메뉴를 누르면 블록의 내용 표시)
헤더를 좌측에 50%의 넓이로 그리고 화면 높이를 꽉 차게 1번에서 이미 설정을 했으니, 안에 들어갈 콘텐츠의 영역의 영역만 잘 정의하면 되겠습니다. 디자인대로 pc 화면에서는 최소 높이를 100vh로 적용했고, 모바일에서는 auto 높이로 콘텐츠의 내용만큼만 높이를 갖게 했습니다. 상하좌우 패딩도 디자인대로 24px을 설정해 줍니다.
내용을 두 덩이로 묶은 이유는 카피라이트가 있는 내용은 아래쪽에 붙게 하기 위함입니다. css를 적용하기 쉽도록 'pc-left'라는 아이디를 섹션에 지정했고, css의 flex 속성을 이용해서 두 덩이의 콘텐츠가 위아래 끝으로 알아서 붙도록 해 줍니다. (어드민 로그인 시 바가 생기는 높이를 적용해 주면 더 굿)
3. 메뉴 동작 처리
서브 메뉴가 있는 경우 메뉴를 클릭하면 서브 메뉴들이 표시되었다가 다시 클릭하면 닫히는 동작이 적용돼야 합니다.
먼저 표시될 메뉴를 구성합니다. (main-menu)
부모 메뉴에는 font icon으로 위아래 화살표가 표시되도록 했습니다.
만들어진 메뉴를 헤더용 블록에서 'Simple Menu'요소를 이용해서 연결 및 세로형, 서브메뉴까지 모두 표시하도록 설정합니다.
메뉴가 일단 화면에 포함이 되었다면, css와 jQuery를 추가하여, 서브 메뉴가 처음에는 안 보이다가(display:none) 부모 메뉴를 클릭하면 'open' 클래스를 추가해서 서브 메뉴가 보이도록(display:block) 만들어주면 참고사이트와 같은 메뉴 동작을 하게 됩니다. 화살표도 open 클래스가 있고 없고에 따라 보이는 것을 지정해 줍니다.
여기까지 하면 헤더가 완성됩니다.
> http://oks-together.hol.es/minimalgrid/about/
레이아웃을 잡는 데에는 다양한 css 적용 방법이 있습니다. 이 중에 Impreza 테마의 구조적 특성을 활용하여 헤더 50%, 본문 50%의 구조를 비교적 쉽게 적용할 수 있었습니다. 헤더에 들어갈 내용도 '재 사용 블록'이라는 일종의 워드프레스 콘텐츠를 만든 다음 메뉴로 연결해서 표시할 수 있어서 내용을 구성하는 것도 마음대로 만들 수 있었습니다. 메뉴 동작은 jQuery, css로 보였다 안 보였다를 적용하여 구현 가능합니다.
다음으로는 포트폴리오들을 작성하고 목록으로 표시하는 과정으로 이어지면 될 듯합니다.
계속...
