#15-0. 리뉴얼된 Vogue 따라 만들기
워드프레스 사이트 따라 만들기
지난번 보그 온라인 사이트를 따라 만들기를 해 본 후 디자인이 리뉴얼이 되었네요. 새 사이트는 1600px의 넓어진 콘텐츠 폭과, 심플한 디자인의 목록들이 각이 딱 잡힌 모습으로 바뀐 것 같습니다. 각이 딱 잡혀 있다는 느낌이 왜 드나 했더니, 전체 목록들에서 아이템들의 좌우 간격은 모두 30px로 맞춰져 있었습니다. 본문의 폰트도 Pretendard로 최근 고딕 폰트를 적용해서 깔끔해 보이는 데 한몫을 한 것 같습니다.
따라 만들기는 전체 레이아웃 뼈대만 완성을 하는 걸 목표로 했고(헤더, 푸터, 패션 메인 페이지와 이하 서브 카테고리 페이지들 제작, 그리고 글 상세 페이지까지) 진행했던 순서대로 과정을 한 번 소개해 보겠습니다.
※ 기본 레이아웃 완성본 : https://oks-dev.tk/vmagazine2
공통 CSS 스타일 적용을 위한 테마 옵션 설정
Impreza 테마의 옵션 설정은 디자인과 관련된 주요 스타일들을 정의할 수 있습니다. 여기에 등록된 값이나 설정은 이후 페이지 빌더로 사이트를 구성 시 모두 연결이 되기 때문에 매우 편리합니다.
- 콘텐츠 최대 폭: 1600px
- 로우의 기본 상하 패딩 : 5 rem (16 x 5 = 80px)
- 주요 반응형 화면 사이즈들 : 1366 / 1080 / 768
- 색 구성 : 화이트 / 블랙
- 기본 버튼 디자인 만들기
- 폰트 사이즈: 16px -> 13px(모바일)
- 폰트 종류 : Pretendard (variable 폰트로 등록) / 100 ~ 900까지 정의
(woff, woff2 파일 확장자를 가진 폰트를 'Uploded Fonts'에 등록을 해 놓으면, 이후 테마 옵션이나 페이지 구성 시 연결되어서 편리함)
이 설정값은 언제든 변경할 수 있고, 페이지 구성 시 모두 연결이 되기 때문에 더 편리한 쪽으로 수시로 값을 변경하면서 작업을 하게 됩니다.
테마 옵션 설정까지 했다면 준비 과정이 완료됩니다.
다음으로는 가장 기본이 되는 골격인 헤더와 푸터를 제작하는 과정입니다.
계속...
