brunch

매거진 IMPREZA 테마 활용

라이킷 14 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Jan 08. 2022

#9-2. 각 섹션 만들기, 메뉴와 연결

원페이지 웹사이트 만들기

디자인상 편집해야 할 전체 섹션들을 체크해 보겠습니다. 디자인된 각 섹션을 페이지 빌더를 이용해서 어떻게 구분지어서 편집을 했는지도 미리 소개해 봅니다. 메뉴에서 각 섹션의 이름을 클릭 시 해당 섹션으로 바로가기가 되려면 섹션에 ID가 있어야 합니다.

로우(섹션)에 아이디를 넣는 방법은 로우 편집 버튼을 누른 뒤, '디자인 탭'에서 입력할 수 있습니다. 웹사이트에서 메뉴를 클릭 시 이 아이디로 바로 이동이 되려면 a링크 태그에 '#'+'ID' 형태로 주소를 적어주기만 하면 되겠습니다. (클릭 시 스르륵 smooth 이동이 되는 부분은 따로 개발된 것) 이때 앞에 '/'라는 특수문자를 적은 건 워드프레스의 특성상 원페이지 1개 외에 블로그를 따로 운영한다든지, 서브 메뉴에 있는 TEST 페이지와 같은 다른 페이지로 이동을 할 때도 있게 되는데, 다른 콘텐츠를 보고 있다가 다시 메인 페이지로 돌아갈 수 있게 하기 위한 겁니다. (※ '/' 앞에는 도메인 주소가 생략된 것)

즉 메인 페이지에서는 바로 갈 수 있는 메뉴로 동작을 하다가 다른 페이지에서는 메인으로 돌아갈 수 있는 역할도 하게 만드는 겁니다.

이제 각 섹션별 편집 시 알아야 할 부분들을 정리해 보겠습니다.

1. TOP 섹션

먼저 1/2 + 1/2 형태로 로우를 2개의 칼럼으로 나눈 뒤에 왼쪽에는 텍스트와 버튼을, 오른쪽에는 이미지를 하나 넣으면 되는 구조입니다. 이미 h태그들과 본문 폰트, 버튼 디자인에 대한 약속들이 돼 있기 때문에(테마 옵션 설정) 화면 요소만 선택해서 넣으면 쉽게 구성할 수 있습니다. 이미지는 왼쪽으로 6도가 돌아간 형태를 표현해야 합니다. 이건 css를 추가해서 적용해야 하므로 이미지의 클래스명으로 'rotate-left-6'를 적어줬습니다.

페이지에 적용될 css로 이미지를 왼쪽으로 6도 돌리고 검은 2px 테두리를 두르게 하는 스타일을 추가합니다.

바로 이어지는 섹션에는 지정된 아이디는 없고 강조색 배경의 3 칼럼의 박스 형태의 내용들이 나옵니다. 로우를 칼럼 3개로 나누고 각각의 칼럼을 박스처럼 보이게 하면 되는 구조인데, Impreza 테마의 버전이 8.x가 되면서 이런 형태를 좀 더 쉽게 만들 수 있는 방법이 추가됐습니다. 로우 편집에서 열 관련 설정에 'Add extra padding around columns content'를 체크를 하면 3개의 칼럼이 1280px이라는 최대 폭 안에서 서로 간의 간격(1.25+1.25=2.5rem(디자인된 값))을 가지고 자리를 잡게 되는 것이죠.

※ 이 방법 적용이 처음이라 조금 어려운 경우에는 테마 데모에서 한 조각을 떼어다가 페이지에 붙여 넣은 다음 그걸 이용해도 됩니다. ( ※ 레고 조립하듯 사이트 만들기 > https://brunch.co.kr/@oksambari/12 )

이제 각 칼럼에 배경색과, 공간, 그리고 박스를 둘러주면 디자인대로 표시가 가능합니다. 칼럼 안에는 아이콘 박스, 타이틀, 텍스트를 보이는 순서대로 넣어주면 이 섹션도 완성입니다.

2. ABOUT 섹션

TOP 섹션과 거의 같은 모습인데, 한 덩어리로 있기 위해서 안쪽의 2개의 Inner Row를 넣어서 구성을 하면 됩니다. 모바일 화면에서는 두 Inner Row 모두 [텍스트 + 이미지] 순서가 될 수 있도록 두 번째 안쪽 로우에만 Stacking 시 순서를 바꾸라는 옵션을 추가합니다.

3. MENU 섹션

섹션 안에 탭 메뉴로 전환되는 콘텐츠가 있는 구조입니다. 저도 이번에는 Impreza 테마 데모에서 탭 구조 하나를 복사해서 시작했습니다. 탭 버튼의 모양을 디자인대로 표시하기 위해 css를 추가해서 수정합니다.

각 탭 안에도 안쪽 로우(inner row)를 넣을 수 있기 때문에 섹션마다 디자인대로 2 칼럼의 메뉴를 만들 수 있습니다.

디자인된 각 메뉴 하나를 표시하기 위해서는 flex box 구조를 이용하면 편리합니다.

가로 형태의 박스 하나씩에 그 안쪽으로 세로 형태의 [타이틀, 설명글] + [오른쪽 가격]이 표시가 되는 구조입니다. 각 메뉴는 모두 따로 만들 필요 없이 1개의 박스를 하나 정확히 만든 다음에는 메뉴를 늘릴 때 기존 것을 이용해서 복사해서 추가할 수 있게 됩니다.

4. JOBS 섹션

로우(섹션) 안에 2개의 박스 형태의 칼럼이 나오는 구조입니다. TOP 섹션 만들 때와 마찬가지로 칼럼이 박스 형태가 될 수 있도록 옵션을 추가해서 적용하면 됩니다. 각 칼럼 안에는 크게 3개의 묶음이 존재합니다.

[ 강조색 배경의 이미지와 Job 타이틀이 표시되는 곳 / 일정 공간을 두고 텍스트들이 표시되는 곳 / 끝으로 버튼 ]

구성 시 첫 번째 vertical wrapper 부분에서는 job 타이틀이 이미지 위로 와야 하는 구조인데, 이건 position을 absolute(나를 감싸고 있는 html 태그 안에서 절대 위치 지정)로 좌하단으로 지정을 해 주면 되겠습니다. 모바일 화면에서는 원래 순서대로 그냥 표시를 하라고 'static'으로 변경해 줍니다.

아래쪽 칼럼 넓이를 꽉 채운 버튼은 디자인을 Theme Options에서 미리 만들어두면 편리하게 적용 가능합니다. 버튼 요소 추가 시 서식(디자인)을 지정하고 끝까지 늘려라(Stretch to the full width)라고 지정할 수 있습니다.

여기까지 하면 각 섹션의 구성도 마무리가 됩니다.

> https://oks-dev.tk/singlepage/

+ 헤더의 Sticky 처리

이제 메뉴를 클릭하면 각 섹션이 화면 맨 상단에 위치하는 부분을 체크해 봅니다.

#9-1 과정에서 헤더를 만들 때 헤더가 sticky 되도록 옵션을 설정하지 않았습니다. 만약 설정을 하게 되면 메뉴를 클릭했을 때 스크롤되는 높이에 이 헤더의 높이가 고려되어서 더해집니다. 대부분의 헤더 구조는 배경색이 있기 때문에 이렇게 되는 게 맞는 것이죠. 반면 이 사이트에서는 배경색이 투명한 형태라 똑같이 계산되어서 이동되면 위 섹션이 같이 보이게 되는 문제가 생깁니다.