brunch

You can make anything
by writing

C.S.Lewis

by oksambari Sep 08. 2024

#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'에 등록을 해 놓으면, 이후 테마 옵션이나 페이지 구성 시 연결되어서 편리함)


이 설정값은 언제든 변경할 수 있고, 페이지 구성 시 모두 연결이 되기 때문에 더 편리한 쪽으로 수시로 값을 변경하면서 작업을 하게 됩니다. 







테마 옵션 설정까지 했다면 준비 과정이 완료됩니다. 

다음으로는 가장 기본이 되는 골격인 헤더와 푸터를 제작하는 과정입니다. 



계속... 


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari