#9-1. 기본 레이아웃 설정, 헤더/푸터 만들기
원페이지 웹사이트 만들기
먼저, 사이트의 기본 레이아웃 설정을 위해 디자인된 css 수치들 및 헤더 푸터의 특징을 확인해 보겠습니다.
※ https://yonk-template.webflow.io/ 에서 크롬 개발자 도구로 확인
헤더는 화면의 끝까지 차는 모양으로 상하좌우 투명한 공간을 갖고 있고, 화면을 스크롤해도 계속 고정되는 형태이고, 총 130px의 높이를 갖습니다. 사이트의 메뉴가 표시되는 곳만 흰 배경의 박스 형태가 적용됩니다.
현재 위치 표시를 위한 컬러, 버튼 형태의 메뉴, 하위 메뉴가 열릴 때의 모습도 확인합니다.
맨 아래 푸터 영역을 확인합니다. 흰 배경에 1/2로 두 칼럼으로 나뉜 위쪽 푸터와, 카피라이트 / ToTop / 로고가 나오는 아래쪽 푸터로 나뉩니다.
h1, h2, h3, h6, 기본 폰트의 속성들(폰트, 글자 크기, 자간, 높이, 아래 여백 등)을 확인합니다. 모바일 화면에서의 변화값도 체크합니다.
기본 버튼의 스타일도 확인합니다. 마우스를 올렸을 때 밑줄 표시와 살짝 올라가는 변화가 필요합니다.
다음으로 공간에 대한 설정을 체크합니다. 콘텐츠 영역의 최대 넓이는 1280px, 각 섹션의 위아래 공간은 7.5rem(기본 16px X 7.5배)에서 모바일 화면은 5rem으로 조정, 그리고 칼럼들이 1열로 변경되는 시점은 992px 미만부터입니다.
끝으로 컬러 색들을 확인합니다.
- 기본 글자 컬러 : #000000
- 선(border) 컬러 : #000000
- 강조색 1 : #e48c71
- 강조색 2 : #f1d4ca
- 배경 : #f6efea / #ffffff
1. 기본 레이아웃 설정
확인된 css 관련 기본 수치나 규칙들을 테마 옵션들을 통해 적용합니다. (Impreza > Theme Options) 쉽게 옵션들로 값들을 지정 하지만 실제 화면이 표시될 때에는 테마에서 알아서 css로 변형해서 적용해 줍니다.
2. 헤더 만들기
'Impreza > Headers'에서 사이트를 위한 헤더를 하나 만듭니다. 구조는 간단합니다. 왼쪽에는 로고 이미지, 오른쪽에는 메뉴가 놓이면 되고, 총높이를 디자인대로 130px로 설정했습니다. 콘텐츠의 넓이와 같지 않고 화면 끝까지 좌우로 퍼져서 보여야 하므로 'Full Width'에 체크합니다. 헤더 영역의 배경색은 처음 옵션 설정 시 투명한 상태로 비워둬서 배경이 없는 헤더가 됩니다. 만든 헤더는 테마 옵션에서 연결을 해 줘야 화면에 표시됩니다.
'메뉴' 요소에 대한 설정입니다. 표시될 메뉴는 '외모 > 메뉴'에서 관리할 main-menu를 지정해 줬습니다. 디자인대로 각 메뉴의 간격도 지정했습니다. 메뉴 구성 시 서브 메뉴가 있으면, 테마 개발자가 개발해 둔 '드롭다운 세팅'이라는 버튼이 생기는데, 이 기능을 통해 서브 메뉴의 모양을 결정할 수 있습니다. 디자인대로 표시를 위해 4개의 칼럼으로 꽉 채운 넓이로 서브 메뉴들이 나오도록 했습니다.
이때 서브 메뉴의 최대 넓이는 디자인과 같이 첫 번째 메뉴들의 총넓이를 벗어나지 않아야 하므로, 헤더의 메뉴 설정 시 'Dropdown Width ~~'에 체크를 해서 서브메뉴의 넓이를 제한해 주면 되겠습니다.
이제 화면에 표시될 메뉴들의 규칙이 정해졌다면, 리스트 바깥의 2px의 테두리와 버튼 형태로 만들어야 할 메뉴, 서브 메뉴의 공간 및 구분선 등은 css 정의를 추가해서 적용합니다. (※ 참고 사이트의 디자인 거의 그대로 사용)
모바일에서의 메뉴는 992px 미만부터 나오도록 하고, 오른쪽에서 등장하는 형태로 지정해 줍니다. 그다음 메뉴의 배경색, 각 메뉴 사이 검정 구분선, 공간 등은 css를 추가해서 적용합니다.
!!! 헤더가 고정된 형태인데, 헤더 구성 시 'Sticky' 옵션에 체크를 하지 않은 이유는 이후 섹션을 만들 때 설명하겠습니다.
3. 푸터 만들기
'Impreza > Page Blocks'에서 사이트의 푸터로 쓸 블록 하나를 추가합니다. 헤더와 마찬가지로 푸터도 테마 옵션을 통해 지정이 되어야 화면에 표시됩니다. 푸터 위쪽, 아래쪽 구분은 크게 두 로우(섹션) 요소로 구분을 했습니다.
먼저 위쪽 로우(섹션) 설정에서 공간과 최대 넓이를 기본 사이트 레이아웃과 위아래 공간이 없고 화면 최대폭 이상 끝까지 퍼지게 표시되도록 합니다.
왼쪽 1/2 칼럼은 위아래 공간이 있습니다. 칼럼 설정에서 5rem씩 위아래로 적용 후 Text들을 순서대로 배치했습니다.
오른쪽 1/2 칼럼에는 연속해서 스크롤이 되는 롤링 글이 있습니다.
글자를 롤링시키는 방법에는 css로만 처리하는 방법 / javascript 이용 / jQuery 플러그인 이용 등 여러 방법이 있습니다. 이 중에 페이지 로딩 시 처음부터 글자가 보이고 끊기는 모습이나 이상 동작 없이 표시하는 건 최종 적용한 jQuery 플러그인을 이용한 방식이었습니다. (단 스크롤 방향이 반대)
자식 테마를 이용하면 이러한 효과나 동작을 보완하기 위한 jQuery 플러그인도 쉽게 적용할 수 있습니다.
jQuery 플러그인 파일을 자식 테마의 폴더 한 곳에 업로드 한 다음, 해당 파일이 페이지가 열릴 때 같이 로드될 수 있게 자식 테마의 functions.php 파일에서 연결 및 동작을 시켜줍니다. 그다음 푸터에 'RawHTML' 요소로 적어준 텍스트들을 롤링이 될 수 있도록 플러그인에서 안내하는 사용법을 이용해서 id로 글자들을 연결을 해 주면 무한 스크롤이 되는 롤링 텍스트가 적용됩니다. 이때 롤링되는 텍스트의 글자 크기나 도트의 색 등은 css를 추가해서 적용해 줘야 합니다.
롤링 텍스트 아래 6개의 이미지 그리드는 인스타그램 사진이 연동이 되어야 할 자리입니다. 임시로 6개의 칼럼으로 구성을 했습니다. 참고로 인스타그램을 연동해서 사진을 표시하고, 클릭하면 인스타그램 페이지로 새 창으로 열리게 해 주는 플러그인들이 많습니다. 그중에 저는 이 플러그인이 큰 에러 없이 잘 동작했습니다.
> https://ko.wordpress.org/plugins/instagram-feed/
이제 아래쪽 푸터가 남았습니다. 3개의 칼럼으로 나눠서 각 칼럼에 맞는 요소들을 넣으면 되겠습니다. 이때 TOP 버튼은 테마 옵션에서 버튼 디자인을 미리 만들어서 이용을 하면 되고, 화면 맨 위로 올라가야 하므로 #(문서의 시작)을 링크로 넣었습니다. (!!! 버튼으로 만들어 링크를 주는 이유 : 클릭 시 천천히 스크롤해서 올라가는 효과가 버튼 클래스에 약속 돼 있음)
여기까지 하면 기본 레이아웃 잡기 및 헤더, 푸터 제작까지가 완료됩니다.
> https://oks-dev.tk/singlepage/test/
다음은 각 섹션별로 콘텐츠를 나눠서 배치하고, 메뉴에 각 섹션만 연결하면 되는 과정만 한 번 정도 더 정리하면 될 듯합니다.
계속...
