#8-5. About, Index 페이지 만들기
잡지 뷰 사이트 만들기
참고사이트를 보면 사이트 관련 소개를 하는 About 페이지, 그리고 스토리들을 한 곳에 모아 리스트로 보여주는 Index 페이지가 있습니다. 이번 내용은 이 두 페이지 제작에 대한 것입니다.
1. About 페이지
먼저 완성된 모습을 보면 이렇습니다.
콘텐츠 영역의 배경색과 푸터의 색이 동일합니다. 1/2 + 1/2 칼럼으로 한쪽에는 텍스트들, 한쪽에는 사진을 두면 되는 구조입니다. 사람 리스트는 참고사이트와 달리 저는 모바일에서도 2 칼럼으로 유지되도록 해봤습니다.
로우(섹션)의 배경은 Design에서 특정 색으로 지정해 주면 언제든 바꿀 수 있습니다. 푸터의 색과 동일한 것으로 변경해 줬습니다.
모바일에서도 칼럼이 한 줄로 늘어서지 않고 2 칼럼을 유지하려면, 칼럼 설정에서 모바일 화면일 때 1/2를 유지하라고 설정만 해 주면 됩니다. (css로 width: 50%가 적용됨)
끝으로 1/2 + 1/2 반반으로 칼럼을 나눴지만 디자인대로 영역을 제한(최대 500px)하려면, 칼럼 디자인 설정에서 최대 넓이를 500px로 제한을 해 주면 됩니다.
양쪽 칼럼이 나뉘고 영역이 지정이 됐다면, 다음으로는 원하는 텍스트나 이미지로 이 부분을 언제든 편집할 수 있습니다.
> https://oks-dev.tk/photomagazine/about/
2. Index 페이지
1/3 + 1/3 + 1/3 세 개의 칼럼으로 나눈 레이아웃에서 오른쪽 스토리 목록에 마우스를 올려보면 왼쪽 영역에 대표 이미지들이 바뀌면서 표시되도록 해야 하는 페이지입니다. 전체 배경색이 다른 페이지들과 달리 녹색 계열(#949980)로 표시됩니다.
먼저 전체 배경색의 변경은 이 페이지를 위해 헤더, 푸터, 본문 색 조합을 따로 만들 필요 없이, 페이지의 css를 추가해서 적용이 가능합니다. (!important로 속성을 지정하면 더 높은 우선권이 있음)
참고사이트의 구조를 살펴보니 왼편에는 이미지들이 따로 모여 있고, 오른쪽 리스트에 마우스를 올렸을 때 해당 링크의 정보와 왼쪽 이미지의 정보를 비교해서 맞는 이미지를 노출하는 것으로 판단을 했습니다. 만약 이대로 구현을 하자면 왼쪽 그리드 따로 오른쪽 그리드 따로 만들고 비교를 해야 하고...
조금 다르게 생각을 해서 저는 왼쪽에는 Custom HTML 요소로 공간만 만들어 두고, 오른쪽에는 그리드 요소로 스토리들 목록을 표시할 때 이미지도 같이 포함이 되도록 해봤습니다. 단 이미지는 숨김 처리를 하고요.
이제 오른쪽 1/3 두 개의 칼럼에는 Grid 요소를 넣어서 스토리 리스트를 표시할 수 있습니다.
왼편에 있는 img 태그는 현재 src(이미지 경로) 정보가 없는 상태입니다. 오른쪽의 리스트들에는 이미지가 보이진 않지만 실제로는 각 스토리 리스트 아래쪽에 이미지가 포함돼 있습니다. 그러면 이제 src 주소를 마우스를 올린 리스트에서 복사해서 저 왼쪽 html src 부분에 복사만 해 줄 수 있으면 될 듯싶습니다.
생각한 대로 되는지 jQuery 구문을 찾아서 적용을 해 봤습니다. active 클래스는 리스트 밖으로 아예 나가면 이미지를 다시 숨기기 위한 스위치 역할을 합니다.
스크립트 적용 후 테스트를 위해 리스트 하나에 마우스를 올려보니 원하던 src 주소 복사가 잘 되는 것으로 확인됩니다.
여기까지 하면 Index 페이지도 완료가 되었습니다.
> https://oks-dev.tk/photomagazine/index/
이제 스토리 및 뉴스 콘텐츠의 종류에 따라 서로 다른 편집 방식으로 콘텐츠를 만들기만 하면 되는 전체적인 사이트의 구조가 완성된 것으로 보입니다. 특히 스토리 편집 시에는 페이지 빌더를 활용해서 공통된 구조의 템플릿들을 저장 및 활용할 수도 있고, 또는 특정 스토리는 전혀 다른 레이아웃의 것도 만들어 낼 수도 있습니다.
테마의 장점과 특징을 이용해서 이번에도 따라 해보고 싶은 사이트를 어느 정도 제 모습을 갖추게 만들어 본 듯합니다.
끝.
