#12-0. 미니멀 디자인 포트폴리오 홈페이지

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

이번 따라 하기는 헤더가 왼편에 있고, 심플하면서도 각 포트폴리오 콘텐츠마다 대표색이 있는 웹사이트 템플릿을 참고하여 진행해 보려고 합니다.  

참고용 템플릿 > webflow의 Feather  

---

참고 템플릿 특징 체크  

1. 헤더로 보이는 왼쪽 구조가 50%, 주요 콘텐츠가 나오는 오른쪽 구조가 50%를 차지하는 레이아웃 (모바일 화면 전까지)

2. 각 포트폴리오마다 대표색이 있고, 메인 페이지, 프로젝트 목록 페이지에서 사용 

3. 포트폴리오 상세 페이지 상단에는 공통된 정보 표시 (website, client, project info), 주 콘텐츠는 사진들(클릭 시 갤러리 형태로 보기) 

---

따라 하기 과정에서 확인할 수 있는 내용들 

1. Impreza의 헤더 빌더를 이용하면 좌측 세로형 헤더 만들기가 가능 

2. 간단한 jQuery 스크립트를 이용하여 요소 위에 마우스 호버 시 배경색 바꾸기 

3. 공통된 포트폴리오의 정보들을 커스텀 필드를 이용하여 간편하게 작성하도록 어드민 편집 화면 준비하기 

 

테스트 사이트 

> https://oks-dev.tk/minimalgrid/

(※ 해외 호스팅이라 첫 로딩이 느릴 수 있습니다.)

---

주요 단계별 적용 내용들은 다음 글들로 이어집니다. 

계속...