brunch

매거진 IMPREZA 테마 활용

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by oksambari Dec 27. 2022

#12-4. 메인 페이지 슬라이드 만들기

미니멀 디자인 워드프레스 포트폴리오 홈페이지

참고 템플릿(Feather)의 메인 페이지를 체크해 보겠습니다.

화면 오른편 50% 콘텐츠 영역을 꽉 채우면서 높이는 브라우저의 높이 전체(100vh)인 형태로 슬라이드가 표시됩니다. 배경색은 각각의 프로젝트 대표색으로 채워지고, 안쪽의 이미지는 원래 색이 아닌 필터링된 모습으로 표시가 됩니다. 이미지 바깥쪽으로 제목, 서브 제목, 슬라이드의 현재 위치 표시, 내비게이션이 영역 끝쪽으로 위치하여 표시되고 있습니다. 5개의 포트폴리오가 화살표 클릭으로 또는 자동으로 돌아가며 표시됩니다.

이걸 표현하려면 해야 할 단계는 이렇습니다.

1. 슬라이드가 들어갈 공간 만들기, 캐러셀(carousel) 요소 추가

2. 각 슬라이드 1개의 표시를 위한 '그리드 레이아웃' 만들기

3. jQuery 스크립트를 이용하여 슬라이드 정보 및 스타일 보완

그러면 단계별로 진행해 보겠습니다.

1. 슬라이드가 들어갈 공간 만들기

사이트의 메인 페이지에 해당될 'MAIN'이라는 이름의 페이지를 하나 만듭니다. 간단히 로우 하나를 넣고, 그 안에는 슬라이드 될 콘텐츠를 불러 올 'Carousel' 화면 요소를 하나 넣습니다.

콘텐츠 영역(오른쪽 50%)에 들어간 로우는 화면의 가로 세로를 꽉 채우는 옵션을 설정합니다. (height:100vh, width:100%라는 css style로 적용됨) 공간(padding)에 대한 설정도 모두 0으로 하여, 들어갈 콘텐츠가 로우 상하좌우를 꽉 채울 수 있게 해 주었습니다.

로우 안에는 'Carousel' 요소를 이용해서 최신 포트폴리오(project) 5개를 불러와서 표시되도록 했습니다.

2. 포트폴리오 슬라이드를 위한 그리드 레이아웃 만들기

'Impreza > Grid Layouts'에서 메인 슬라이드용 레이아웃을 하나 만듭니다. 크게 2개의 묶음으로 구조를 계획했습니다. 전체를 감싸는 'wrapper-outside', 가운데 이미지가 표시되는 'wrapper-inside'. 모퉁이에 삼각형이 표시된 요소들은 절대위치를 설정했을 때 표시되는 것으로, wrapper-outside를 기준으로 좌상, 좌하, 우하 위치에 붙도록 위치합니다.

(※ 슬라이드 총 개수, 현재 슬라이드의 번호 표시 부분이 궁금하신 경우에는 아래 글을 참고해 보시기 바랍니다. > https://brunch.co.kr/@oksambari/70 )

가운데 표시될 이미지 부분에 대해 잠시 부가 설명이 필요합니다.

웹화면에 이미지를 표시할 경우 img 태그로 표시하는 경우, 공간을 만들고 백그라운드로 표시하는 경우 대개 두 가지 방법을 사용합니다.

img 태그로 표시는 가로 세로 비율 그대로 줄기 때문에 디자인된 내용과 같이 화면의 최대 높이에서 일정 공간을 다 덮는 이미지를 표시하기가 어렵습니다. 게다가 현재 각 포트폴리오의 대표 사진들의 사이즈는 통일돼 있지 않은 상황이기도 하고요. 이때에는 안쪽 wrapper-inside를 꽉 채우는 배경 이미지로 표시를 하면 해결할 수 있습니다.

이전 글에서, 포트폴리오의 대표색 정보를 가지고 호버 시 배경색을 설정하는 방법을 이용했었습니다. 비슷한 방법으로 wrapper 요소 안에 화면에는 보이지 않는 '이미지'와 'Custom Field(대표색)' 요소를 포함시킨 뒤에 jQuery의 도움을 받아서 이미지와 배경색을 지정하는 방법을 이용하면 될 듯합니다.

Post Image → 이미지의 주소 얻기용

Post Custom Field → 대표색 얻기용

둘 다 'hidden' 클래스를 입력해서 화면에서 숨김(display:none).

그리고 'wrapper-inside'은 다른 요소들(제목, 서브 제목 등)과 겹치지 않으면서 일정 영역을 가질 수 있게 공간 설정을 해 줍니다.

그러면, wrapper-outside의 영역 내에서 중앙에 정렬한 뒤, 일정 영역을 가지고 표시될 이미지를 위한 공간이 마련된 것을 볼 수 있겠습니다. (디자인 설정 → css style을 쉽게 적용하기 위한 방법)

3. jQuery 스크립트를 이용하여 슬라이드 정보 및 스타일 보완

테마의 functions.php 파일에 메인 페이지(front page)에서만 실행될 스크립트를 추가합니다.

jQuery의 each를 사용하면 화면 내에 같은 클래스를 가진 모든 슬라이드에 대해 동작을 추가할 수 있습니다. 그리드 레이아웃을 만들 때 화면에는 안 보이되 추가됐던 이미지, 커스텀 필드에서 대표 이미지의 주소, 대표색의 정보를 얻은 다음, 'wrapper-inside'영역의 백그라운드 색과 이미지로 지정을 해 주는 코드가 되겠습니다.

이때 참고용 템플릿을 보면 이미지가 원래의 색이 아닌 배경색과 짬뽕이 된 듯한 모습으로 표시되는 걸 볼 수 있는데, 이 부분은 css의 filter, mix-blend-mode 두 가지 속성을 이용하면 구현이 되었습니다. (저도 하나 배웠네요)

이미지를 회색 계열로 필터링 → 그 상태로 배경색과 믹스