Please Enable JavaScript!
Gon[ Enable JavaScript ]

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

워드프레스

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

 

환경: Wordpress

 

테마는 워드프레스 웹 사이트 디자인입니다. 보통 워드프레스 홈페이지에서 제공하는 무료/유료 테마 중에서 하나를 골라 자신의 웹 사이트 디자인으로 정합니다. 하지만 아무리 마음에 드는 디자인이라도 완벽할 수는 없습니다. 시간이 지날수록 사이트에 자신만의 개성을 담고 싶어 집니다. 완성된 테마를 적용한 이후 수정하는 방법은 2가지입니다. 첫 번째는 테마 디자인을 통한 수정입니다. 테마 디자인은 수정 가능한 항목들을 메뉴로 제공합니다. 웹 페이지 설정 화면으로 쉽게 수정할 수 있습니다. 두 번째는 테마 편집기를 이용한 CSS 수정입니다. CSS 코드값을 직접 수정하는 것입니다. 이 방법은 CSS 문법을 알아야 하기 때문에 초보자들이 접근하기에는 쉽지 않습니다.

 

테마 디자인을 통한 수정

 

자신이 적용한 테마의 디자인을 수정하기 위한 첫 번째 방법은 워드프레스에서 제공하는 테마 디자인 메뉴를 이용하는 것입니다. 테마 디자인 > 사용자 정의하기 선택해서 테마 수정 메뉴 페이지로 이동합니다.

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

 

해당 페이지의 왼쪽에 테마 수정을 위한 메뉴들을 제공하고 있습니다. 테마에 따라 제공하는 메뉴가 다르게 나타날 수도 있습니다. 왼쪽 메뉴들을 이용해 테마를 수정하면 오른쪽 화면에 적용된 디자인이 나타납니다

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

 

CSS 소스 직접 수정하기

 

두 번째 방법은 테마 전체에 적용된 CSS 파일을 적용하는 것입니다. 직접 디자인 코드를 수정하는 것이므로 초보자들은 쉽지 않습니다. 하지만 디테일한 수정이 가능하기 때문에 자유도가 높습니다. 테마 디자인 > 테마 편집기 메뉴를 선택합니다

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

 

테마 편집기 화면에서 스타일시트(style.css) 란으로 갑니다. 아래에 에디터에는 테마에 적용된 CSS 코드가 들어가 있습니다. 해당 코드를 수정하면 테마에 적용된 디자인이 변경되겠죠

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

 

수정이 끝나면 에디터 아래에 있는 파일 업데이트 버튼을 클릭합니다. 그래야 에디터에서 수정한 내용이 반영됩니다

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

 

테마와 관련된 전체 파일 목록을 오른쪽에서 볼 수 있습니다. CSS 가 아닌 자바스크립트를 고치고 싶다면 오른쪽 파일 목록에서 찾아서 선택합니다. 왼쪽 에디터 화면에 소스를 띄우고 수정합니다

워드프레스(Wordpress) 테마 디자인 수정, CSS 수정하는 방법

Posted by 녹두장군

댓글을 달아 주세요