brunch

매거진 IMPREZA 테마 활용

라이킷 10 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 18. 2021

#7-3. 그리드 선을 이용한 페이지 퍼블리싱

그리드 디자인 사이트 만들기

이전 과정까지 기본 레이아웃을 설정과, 헤더와 푸터 제작이 완료됐습니다. 다음으로는 메인 페이지와 기타 페이지들을 제작해 보면서 페이지 빌더를 이용해서 최대한 간편하게 화면을 만들기 위한 방법을 찾는 과정을 진행해 봤습니다.

1. 메인 페이지 첫 번째 섹션

화면 높이를 꽉 채우는 'Full Height Row'로 섹션을 넣었습니다. 그다음 가운데에는 최대 높이 300px의 이미지 또는 슬라이드를 넣을 수 있는 안쪽 Row를 넣어줬습니다.

화면에 표시할 요소를 다 표시가 됐다면 이제 등장 효과를 넣을 수 있습니다. css를 적용하기 위해 'main-gradient'라는 ID 이름을 지정해 줬습니다.

등장 효과 적용을 위해서는 작동 시점을 알려줄 수 있는 class가 html 요소에 넣어지는 동작(script에 의해)이 필요합니다. 그다음 css로는 원래의 상태, 그리고 변경된 클래스가 있는 상황에서의 상태 두 가지를 정의해 줘야 합니다.

등장 효과 적용 순서는 이렇습니다.

1. 이미지가 있는 섹션의 넓이가 0에서 100%로 변경됩니다. (1px 만큼만 보이고 나머지는 가려진 상태)

2. 섹션을 가리고 있던 :before, :after의 영역 높이가 0으로 변경됩니다.

3. 헤더와 그리드 선이 마지막으로 등장합니다.

효과에 대한 스타일 정의는 페이지의 css로 추가했습니다.

페이지 로드 후 body 태그에 클래스를 넣는 부분, 그리고 가운데 inner row에 중간에 트랜지션이 완료된 것을 체크하고 그리드 선에 클래스를 넣는 부분은 jQuery 코드로 처리했습니다.

2. 메인 - ABOUT 바로가기 섹션

1/3 + 2/3의 구조를 활용한 구조입니다. 오른쪽 슬라이드 위에 마우스를 올리면 전체가 버튼으로 동작합니다. 모바일에선 슬라이드 다음에 텍스트들이 나와야 합니다.

페이지 빌더를 이용해서 화면을 퍼블리싱하면 이런 식으로 편집이 가능합니다.

원리는 이렇습니다.

섹션 내에 칼럼 구조를 1/3 + 2/3 + 1/3로 3개를 넣었습니다. 오른쪽 칼럼에 슬라이드를 넣으면 사진의 크기에 의해 영역을 차지하게 됩니다. 그러면 왼쪽 타이틀 아래로 공간이 생기게 되는데, 그쪽으로 아래의 1/3 크기의 칼럼이 들어가도록 위치를 강제(absolute)하게 됩니다. 모바일에서는 칼럼의 순서대로 나오면 되므로 static 상태로 다시 바꿔주면 자연스럽게 순서대로 요소들이 나열됩니다.

슬라이드 전체를 덮는 바로가기 링크가 동작해야 합니다. 슬라이드 구조 위에 링크를 넣으려면 슬라이드가 들어있는 칼럼 자체에 링크를 넣으면 되겠습니다.

링크 동작과 더불어 마우스를 올렸을 때 호버 효과와 글자가 표시되게 하는 부분은 css를 이용해서 구현했습니다. (참고사이트의 효과 그대로)

3. 메인 - SHOP 바로가기 섹션

1/2 + 1/2 칼럼 구조가 사용되는 곳입니다.

2개의 칼럼을 넣는 경우에는 가운데 쪽으로 사이 공간이 필요합니다. 매번 칼럼에 마진으로 공간을 넣어도 되지만 이후에는 공간을 신경 쓰지 않기 위해 css로 미리 규칙을 정해 놓으면 더 편리합니다.

공통된 css이므로 테마 옵션의 Custom Code 부분에 css를 추가했습니다. (1/2+1/2 구조일 때에만 적용)

바로 위에는 각 칼럼의 패딩과 마진 기본 값을 0으로 바꿔주는 코드를 넣었습니다.

참고로, 테마의 기본 스타일 정의에는 로우를 여러 칼럼으로 나눌 때 요소 끝선이 정렬되도록 하는 스타일 정의가 돼 있습니다. 그런데 지금 구축 중인 사이트에서는 그리드 끝선과 화면 요소가 딱 붙는 스타일이므로 아예 이런 고려사항들을 다 빼버리는 조치를 한 겁니다. (테마 문서 참조)

※ 사이트에서 사용되는 버튼들은 테마 옵션을 통해 미리 정의를 해 놓고 사용을 하면 편리합니다.

4. ABOUT - 2/3 칼럼의 최대 넓이 지정, 테이블 만들기

참고사이트 디자인을 보면, 메인 페이지 외 일반 페이지들에서는 오른쪽 2/3 칼럼에 있는 콘텐츠의 넓이를 최대 800px로 제한하고 있습니다. 이렇게 하면 화면이 계속 커지더라도 같은 모습으로 표시가 가능합니다. 화면이 작아지면 자연스럽게 2/3 그리드 선 안에 콘텐츠가 있게 됩니다.

저는 넓이를 제한하고자 하는 칼럼에 클래스만 넣으면 최대 800px로만 표시가 될 수 있도록, css로 미리 약속을 해 놓고 사용해봤습니다.

칼럼으로 테이블 만들기

테이블 한 줄을 Inner 로우 하나로 넣고, 배경색과 위아래 보더 라인은 css로 추가를 했습니다.

각 로우의 칼럼은 모바일에서도 칼럼 구조가 유지되도록 설정할 수 있습니다.

여기까지 하면 섹션을 칼럼으로 나누고, 넓이를 제한하고, 테이블을 만들고 하는 공통된 부분들은 완성이 됩니다. 나머지는 이미지, 텍스트, 버튼 추가에 대한 부분들을 고려해서 페이지 작업들을 하면 되겠습니다.

> http://oks-together.hol.es/grid-3/

다음으로는 사업장의 모습을 소개하는 PHOTO 페이지에 갤러리를 넣는 부분을 정리해 보려고 합니다. 참고사이트에서는 이 부분을 별도의 php 페이지로 개발을 한 것으로 보이는데, Impreza의 경우 이미지에도 카테고리를 지정할 수 있는 방법이 있어서 필터형 갤러리로 표시가 가능합니다.