#2-3. 리스트 디자인 만들기 - 2
IMPREZA로 KMONG 블로그 사이트 따라 만들기
이번에는 메인 페이지의 아래쪽 각 카테고리 묶음 별 최신 글 리스트와, 오른쪽 사이트의 최신 글 리스트를 만드는 방법을 정리해 봅니다.
1. 오른쪽 최신 글 목록 만들기
이미지가 위에 오고, 이미지 왼쪽 아래에 카테고리 바로가기 버튼이 보이고, 아래로는 타이틀이 나오는 디자인입니다. Impreza > Grid Layouts에서 새 그리드를 하나 추가하는데, 탬플릿에서는 비슷한 구조가 없었습니다.
이미지 위에 뭔가 정보가 노출이 되거나 하려면, 이미지와 정보를 감싸는 부모 요소가 존재를 하면 되는데, Vertical Wrapper를 만들고, 그 안에 이미지와 카테고리가 나올 수 있도록 요소를 추가합니다. 검은 배경의 버튼은 테마 옵션에서 미리 디자인을 할 수 있는데 여기서 불러다 쓸 수 있고, 버튼의 위치는 css 옵션을 이용해서 좌측 하단으로 딱 고정이 되도록 할 수 있습니다.
만들어진 그리드 디자인을 페이지에서 적용해 보면, 2개씩 총 8개의 최신 글이 노출되는 걸 볼 수 있습니다.
2. 주제별로 리스트를 표시하는 디자인 만들기
큰 이미지가 위로 오는 디자인과, 아래에는 이미지가 왼쪽에 오는 디자인이 합쳐져 있는 구조입니다. 그리드를 2가지를 만들어서 배치하는 방법도 있지만, 최대한 간결하게 페이지를 구성하기 위해 위아래 글은 하나의 그리드로 표시를 하되, css로 조정하는 방법을 써봤습니다. 참고로, css로는 정보를 불러오거나 하는 것은 안 되지만, 화면에 나와 있는 요소를 안 보이게 하거나, 위치를 이동시키는 건 가능합니다.
그리드 탬플릿 중 'Blog Classic'을 불러다가 참고 사이트대로 폰트 사이즈나 간격을 조정해서 'top img with tax title author date excerpt'라는 그리드 레이아웃을 하나 만들었습니다.
만든 그리드 디자인을 페이지에 적용을 해 봅니다. 이때 한 곳에 묶여서 보여줄 카테고리들을 선택하면 해당 카테고리의 글들만 표시가 됩니다. 그럼 인터뷰에 해당되는 카테고리들의 최신 글 4개가 디자인대로 표시된 걸 볼 수 있습니다.
아래쪽 2개의 글은 3번째 글부터 적용이 되는 CSS를 추가하여 스타일을 조정해 줄 수 있습니다. 이 페이지에 추가할 css는 빌더의 오른쪽 상단의 톱니 모양의 아이콘을 클릭하여 적용하면 되고, css 몇 줄을 추가한 다음 다시 사이트를 열어보면 3,4번 글은 디자인이 참고사이트와 같이 변경된 것을 볼 수 있습니다.
※ 크몽 블로그에서는 목록 아래에 화살표를 두어서 클릭 시 새 글을 불러오는 기능이 추가돼 있습니다. 이걸 구현하려면 ajax 방식으로 추가 콘텐츠를 불러다 이 공간에 추가하는 개발이 따로 필요하여 이 과정에서는 생략합니다. 대신 더보기 버튼을 두어서 각 카테고리 목록 페이지로 연결하는 방식을 이용할 수도 있습니다.
마지막으로 총 3가지 주제를 나눠서 타이틀 3개와, 그리드 3개를 추가하면 이제 메인 페이지가 완성이 됩니다.
글 리스트에 있는 검은색 배경의 카테고리 정보 표시는 각각 카테고리 목록으로 가는 링크가 설정돼 있습니다. 클릭하게 되면 워드프레스의 목록 페이지 템플릿이 나오게 되는데 Impreza의 경우 목록 페이지들도 탬플릿화 하여 미리 원하는 디자인의 페이지 구조를 만들 수 있습니다. (※ single 포스트 뷰를 탬플릿으로 만든 것처럼) 내용 설명이 살짝 길어질 듯하여 다음 글로 이어가겠습니다.
