#6-1. 기본 레이아웃 설정, 헤더 푸터 만들기
상점 소개 사이트 만들기
먼저, 참고사이트를 통해 웹사이트 제작을 위해 필요한 기본 정보들을 확인해 봤습니다.
(참고할 웹사이트의 스타일 정보들은 브라우저의 개발자 도구를 열어 보면 확인이 가능합니다.)사이트 콘텐츠 폭 : 1450px (메인 화면은 full width)
섹션(로우) 상하 공간 : 100px / 150px --> 모바일에선 40px / 40px
폰트 종류 : 일본어 폰트라 '아리따 부리'라는 한글 명조체 폰트로 대체
폰트 사이즈 (모바일) : 15px --> 14px
h1~h6 폰트 사이즈 : h2 - 40px / h4 - 28px / h5 - 26px
컬러 조합 : #303030 / #bc1615 (강조색)
모바일 분기점 : 900px
1. 기본 레이아웃 설정
만들고자 하는 웹사이트의 기본 스타일 기준들이 확인됐다면 이제 테마 옵션(Theme Options)에서 설정을 해 줍니다. css 문법으로 위 내용들을 따로 코딩을 할 필요 없이 모두 테마 옵션들로 적용을 할 수 있게 돼 있습니다.
사이트의 콘텐츠 넓이라는 것은, 내 모든 콘텐츠의 최대 넓이를 지정하는 것으로, 간혹 고화질 해상도의 브라우저로 방문한 유저들에게도 디자인이 깨지지 않도록 하는 데 유리합니다.
로우의 기본 공간은 [100px/15px = 약 6.67 rem]으로 설정을 했는데, 여기에는 모바일에서의 공간이나 위아래 차이 나게 설정하는 옵션이 없으므로 차후에 css로 추가 정의를 해 줘야 합니다.
/* 레이아웃 조정 */
@media screen and (min-width:900px) {
.l-section.height_custom {
padding-bottom: 150px;
}
}
@media screen and (max-width: 899px) {
.l-section.height_custom {
padding-top: 40px;
padding-bottom: 40px;
}
}
참고 사이트는 모바일 분기점 외에 나머지 기기 사이즈에 대해서는 고려를 하지 않는 디자인이므로 칼럼이 1열로 변경(stacking)이 되는 시점과 모바일 스크린 넓이만 잘 설정을 하면 되겠습니다. (! stacking 수치는 900px 미만이고, 모바일 화면 기준은 ~까지이므로 899px로 설정)
참고로, 이 분기점을 초반에 설정하는 중요한 이유는 이후 헤더나 푸터, 그리고 각 페이지 제작 시 모두 연결이 되어 사용이 되기 때문입니다.
색상은 헤더, 본문 콘텐츠, 푸터 각 영역별로 나눠서 지정해 놓을 수 있습니다. 이렇게 만든 색은 페이지 빌더로 로우(섹션)를 넣을 때 색 조합을 선택하는 것으로 사용 가능합니다.
마지막 설정으로 Typography가 있습니다. 폰트 관련 설정을 하는 것인데요, 기본 본문에 사용될 폰트, h1~h6과 같은 타이틀에 사용될 폰트를 각각 지정할 수 있습니다. 참고 사이트의 경우 일본어의 명조체 계열을 쓴 것 같은데 비슷한 분위기를 위해 '아리따 부리' 폰트를 웹폰트로 업로드해서 이용을 해 봤습니다. 그리고 중간에 각 섹션의 타이틀에는 고딕형 폰트가 필요해서 'Open Sans'를 하나 더 추가를 했습니다. 이 폰트 설정 또한 차후 화면을 구성하는 모든 작업에서 디자인 설정에 연결되어 작동을 하게 됩니다.
※
테마 옵션에서 바로 설정할 수 있는 구글 폰트들 외에 내가 원하는 폰트를 이용하는 방법을 잠시 정리합니다.
한글 폰트도 검색을 해 보면 좋은 것들이 많이 있습니다.
원하는 폰트를 다운로드한 다음 이걸 웹에서 사용을 하려면, 확장자가 woff, woff2인 파일 형태여야 합니다. woff 파일로 받았다면 테마 옵션 설정에서 바로 업로드 후 이용하면 되고, 만약 이 형태로 제공을 받은 게 아니라면, 온라인 사이트에서 폰트를 웹폰트로 변경해서 이용하면 됩니다. 더 자세한 내용은 테마 문서에 잘 정리돼 있습니다.
> https://help.us-themes.com/impreza/options/typography/#uploaded-fonts
2. 헤더 만들기
이제 기본 규칙들을 설정했으니 헤더를 만들 차례입니다. Impreza > Headers에서 새로 헤더를 하나 추가합니다. 왼쪽에 로고(이미지)가 있고, 오른쪽에는 메뉴가 나오는 구조인데, 중요 체크 사항이라면 헤더는 화면을 스크롤해서 내려가면 늘 고정이 돼야 하므로 Sticky 옵션에 체크합니다. 참고사이트를 보면 처음에는 헤더가 없다가 스크롤해 내려가면 등장해서 고정이 됩니다. 오른쪽 옵션 중 Scroll Breakpoint라는 게 스크롤 시 몇 픽셀을 내려가면 Sticky가 작동하게 할 거냐 결정하는 부분입니다. 다음으로 메인 영역의 높이에서 처음에는 0이었다가, sticky일 때에는 80px로 설정하면 안 보이다 화면을 내리면 보이게 되는 헤더가 됩니다. 모바일 화면(~899px)에선 따로 높이가 60px로 되도록 설정했습니다. 헤더는 화면에 꽉 차는 모양의 것이어야 하므로 'Full Width Content' 옵션도 On으로 변경합니다.
메뉴 편집에서는 연결될 메뉴를 선택해 주고, 간격을 0으로 설정(가운데 구분선은 css로 추가해야 함), 테마에서 설정한 색상에서 수정할 부분만 '색상' 탭에서 조정을 했습니다. 햄버거 모양의 모바일 메뉴가 나오는 시점은 모바일 화면이 되는 899px부터(900 미만)로 설정을 했고 화면을 덮는 풀 화면 메뉴로 적용을 했습니다.
3. 푸터 만들기
Impreza > Page Blocks에서 푸터를 하나 만들었습니다. 로우의 색 조합은 테마 옵션에서 지정해 놓은 컬러 조합을 선택하고, 모든 요소는 가운데 정렬이 되도록 설정한 다음 원하는 화면 요소들을 추가했습니다.
모바일 화면에서는 메뉴가 세로로 늘어선 모양으로 변경이 되어야 합니다. css의 flex의 방향이 변경이 되는 지점인데, 마침 메뉴의 요소 옵션에 지정할 수 있도록 돼 있으니 900px에서 변경되도록 설정했습니다. 나머지 메뉴 사이 ' / ' 구분선이 나오거나 세로일 때 위아래 줄(border)이 나오는 것은 css를 추가해서 처리를 했습니다.
끝으로 만든 헤더와 푸터를 테마 옵션에서 연결을 해 줘야 표시가 됩니다.
적용된 헤더와 푸터 > http://oks-together.hol.es/foodstore/test/
글의 요점은 이렇습니다.
웹사이트에는 모든 곳에 적용될 기준이 되는 스타일 정의들이 있습니다. 이 기준이 있어야 통일된 사이트의 모습들을 만들어 낼 수 있는데 글 초반에 정리를 한 것처럼 이게 엄청 복잡한 부분은 아닙니다. 이제 골격을 만들었으니 다음으로는 실제 안에 들어갈 화면 요소들에 대해서만 고민해서 넣으면 될 차례입니다.
계속...
