brunch

매거진 IMPREZA 테마 활용

라이킷 13 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Sep 10. 2024

#15-2. 메인(main) 페이지 만들기 (2)

Vogue 워드프레스 사이트 따라 만들기

지난 글(#15-1)로 여기까지 완성이 됐습니다.

만들었던 그리드를 활용(복사)하여 남은 페이지 구성 방법도 소개해 보겠습니다.

1. 캐러셀 글 목록 레이아웃 만들기

pc 화면을 기준으로 한 번에 총 4개의 글이 보이고, 화살표를 누르면 좌우로 넘어가는 캐러셀 형태의 구조입니다. 사용된 레이아웃은 바로 위쪽의 4개짜리 레이아웃과 같은데, 단 모바일에서도 같은 구조가 유지됩니다. 그럼 앞에서 만들었던 첫 번째 버전의 그리드 레이아웃이면 되겠습니다.

세로로 순서대로 표시될 화면 요소들을 추가해서 구성했습니다.

글 8개를 불러다가 만들어진 레이아웃대로 표시를 한 뒤, 캐러셀로 바꾸려면 어떻게 해야 할까요? 이런 게 가능한 jQuery로 만들어진 플러그인이 있습니다. Impreza의 경우 Owl Carousel이라는 플러그인을 가지고 이걸 쉽게 구현할 수 있게 'Carousel'이라는 요소를 개발을 해 놓아서 간단하게 적용을 할 수 있게 됩니다.

원하는 글을 몇 개를 불러올 것인지, 그리고 원하는 모양(그리드 레이아웃)대로 한 줄에 몇 개를 보일지 그리드 요소와 설정 방법은 비슷합니다. 차이는 아래와 같이 캐러셀과 관련된 내비게이션을 보일지, 자동으로 회전시킬지, 하나씩 이동할지 보이는 전체를 이동할지 등을 옵션으로 선택할 수 있는 부분입니다. 반응형 디자인을 위해 화면 기기에 따라 칼럼 수를 조정해서 보기 좋게 만드는 것도 가능합니다. (OwlCarousel의 옵션들 >)

! 잠깐, 팁이자 테마의 장점을 소개해 드리면, 참고 사이트를 보면 각 글은 사각형 영역 전체가 하나의 버튼처럼 돼 있습니다. A 태그가 최상단으로 묶여 있는 구조라서, 공간에 마우스를 올려도 버튼처럼 클릭이 되는 걸 볼 수 있습니다. 그리드 레이아웃을 만들 땐 각 요소에만 링크를 걸 수 있습니다. 그래서 예전에는 전체를 버튼화 하려면 jQuery로 a 태그를 목록 아이템에 추가하는 코드를 추가하곤 했는데, 이젠 그리드나 캐러셀 요소에서 전체를 덮는 a 링크를 간단하게 넣을 수 있습니다. 바로 파란색 박스의 'Overriding Link'에 링크를 넣는 게 바로 그 기능을 합니다.

두 번째, 테마 개발사에서 개발된 화면 요소들은 모두 테마의 옵션과 연결이 됩니다. 처음 설정한 반응형 기기의 기준점은 자동으로 연결이 되고, 필요시 수정도 가능합니다. 전체 기준점의 수정이 필요할 땐 테마 옵션만 조정하면 된다는 편리함이 있습니다.

캐러셀 구조에서 오른쪽에 이어져 보일 글이 일부 보이게 하려면 owl carousel의 아이템들을 감싸는 태그에 적용된 css overflow 속성을 hidden에서 visible로 바꿔주면 됩니다. 어느 부분인지 찾은 다음 css를 추가하여 속성의 값을 바꿔줍니다. (기본값 변경)

마지막으로 이 섹션에는 높이의 반에 해당하는 회색 백그라운드가 뒤에 있습니다. 섹션 태그 바로 다음에 배경을 덮고 그 위에 캐러셀 글들이 보일 수 있게, css로 (클래스)::before 선택자로 배경을 추가했습니다.

※ 캐러셀 위쪽 화살표 버튼 만들기는 생략했습니다. 임의의 버튼을 만들고 클릭 시 슬라이드가 동작할 수 있는 방법은 이 글을 참고해 보세요 (https://brunch.co.kr/@oksambari/103)

2. 정사각형 이미지의 그리드 레이아웃 만들기

이미지가 1:1 비율로 모바일에서도 모양을 유지(폰트 사이즈와 마진만 바뀜)하는 레이아웃을 만들어야 합니다. 이건 1번에서 만든 것에서 이미지 비율만 바뀌면 끝나네요.

저는 태블릿 기기 정도의 화면에서는 2 칼럼으로 조정을 해 봤습니다. 모바일 기기 화면에서는 아이템 간의 간격을 다르게 설정할 수 있습니다. (최근 테마 버전에 추가)

3. 세로형 카드 레이아웃 만들기 (small)

앞에서 이미 세로형 카드 레이아웃을 완성한 게 있습니다. 이번에도 이걸 복사해서 글자 크기나 간격만 조정하면 금세 완성되는 레이아웃입니다.

참고 사이트는 821px까지 그리드 구조가 보이다가 820px 이하부터 캐러셀 구조로 바뀌어 표시되는 것으로 보입니다. (두 가지 목록을 준비해 놓음)

조금 쉽게 적용을 해 보기 위해 저는 pc용과 모바일용 구조를 따로 만들지 않고, 캐러셀 하나로 적용을 해 봤습니다.

'캐러셀' 요소로 3개의 글을 불러다가 3 칼럼으로 표시를 하면 캐러셀 형태가 아닌 일반 그리드처럼 보이게 됩니다. 1080px 미만의 화면부터는 설정한 대로 2 칼럼으로 바뀌니 그때부터 캐러셀 형태로 바뀌어 표시가 됩니다.

+ 마지막 최신 글 리스트 표시하기

페이지의 마지막 부분에는 최신 글들이 오른쪽 베너와 함께 표시됩니다. 내부 로우를 하나 추가해서 칼럼 두 개를 3/4 + 1/4 크기로 나누고 왼쪽에는 그리드와 위에서 만든 레이아웃을 선택해서 12개의 최신글들이 표시되도록 합니다.

오른쪽 칼럼에는 'Fix this column at the top of a page during scroll' 옵션을 추가하면 오른쪽 베너가 계속 화면에 고정되어서 보이는 효과를 적용할 수 있습니다. (칼럼에 약속된 클래스가 추가되어 css의 'position:sticky'가 적용되게 함)