안녕하세요. 린치핀소프트 한광희입니다.

 

조금 더 우아하고 최적화된 워드프레스 사이트를 위해서 무엇을 해볼 수 있을까요?

답은 “디자인에 관심을 두라!” 입니다. 웹 디자인에서 CSS(Cascading Style Sheets)는 프로그래밍과 조금은 별개로 디자인에만 관여하는 프로그래밍 언어(?) 입니다.

 

<style>

html,body{

position:absolute;

width:100%;

height:100%;

top:0;

left:0;

font-size:1.4em;

}

</style>

위와 같은 코드가 CSS라고 하는데, 이런 CSS 스타일 시트 코드를 이용하여 사이트의 폰트를 지정하거나 색을 바꾸거나 요즘은 2D,3D의 애니메이션 효과를 줄 수 있습니다.

요즘 웹사이트나 모바일 페이지에서 많이 사용하는 네이버의 나눔 글꼴들도 Google의 폰트 CDN(Content Delivery Network) 서비스를 이용하여 CSS로 지정하여 추가 할수 있습니다.

사실 CSS는 어느정도 웹 디자인 또는 퍼블리싱 경험이 있는 분들일수록 유리하지만 그렇지 않더라도 어느 정도 제한적인 상황에서 인터넷을 검색하여 웹 사이트를 개선해볼수 있습니다.

 

이 CSS는 시간을 내어 공부하셔서 이용해도 좋지만 자신에게 필요한 부분들을 웹으로 검색해서 워드프레스 사이트에서 적용해 볼수도 있습니다.

오늘은 이 CSS를 워드프레스에 쉽게 적용하는 방법을 안내해 드립니다.

 

1.플러그인을 이용하여 적용하기

2.이용하는 테마의 기능을 이용하여 적용하기

3.테마나 플러그인을 직접 수정하여 이용하기

CSS를 추가하는 방법은 굉장히 많지만 범용적으로 예를 들어보면 위의 세가지 경우로 CSS를 워드프레스 사이트에 추가 할 수 있습니다.
screenshot-www.linchpinsoft.com 2015-12-20 23-03-06

첫번째 스크린샷은 Jetpack 플러그인의 Custom CSS 기능을 활성화하면 “CSS편집”이라는 메뉴를 이용해 CSS 코드를 추가할수 있습니다. 젯팩 플러그인은 워드프레스를 개발하고 wordpress.com을 서비스하고 있는 오토매틱사에서 개발하고 있는 워드프레스 사이트 운영에 있어서 필수적인 플러그인입니다.
screenshot-www.linchpinsoft.com 2015-12-20 23-07-29

젯팩을 사용하지 않지만 CSS코드만 추가하고 싶은 경우에는 Simple Custom CSS 라는 플러그인을 다운로드하여 설치한 후 외모 -> Custom CSS 라는 메뉴에서 CSS를 추가해주면 됩니다.

위 2번째 스크린샷은 Simple Custom CSS 를 이용한 예입니다.

 

screenshot-sciencewalden.org 2015-12-20 23-05-34

종종 잘 설계되어 있고 많은 편의기능을 제공하는 무료테마나 유료 테마는 테마를 설정하는 메뉴에서 CSS 코드와 JS(자바크크립트 프로그래밍 언어)코드를 삽입 할수 있게끔 구성해 놓습니다.

위는 Newspaper 라는 유료테마의 스크린샷에서도 “CUSTOM CODE”라는 메뉴로 구성하여 CSS 코드를 추가할 수 있게끔 구성해 놓았습니다.

 

마지막으로 워드프레스에서는 외모->테마 편집기 라는 기본적인 메뉴를 통해 테마의 기본적인 파일들을 열람하고 편집까지 해 놓을수 있게 합니다.

특수한 경우에는 테마 편집기를 이용하여 테마나 플러그인에 직접 CSS 코드를 추가 할수 있습니다. 하지만 이는 매우 추천하지 않는 방법으로 테마나 플러그인의 업데이트를 통해 기존에 추가한 CSS 코드가 유실된 위험성이 있습니다.

 

조금 더 우아하고 멋진 워드프레스 사이트를 만들기 위해서 CSS 코드 추가가 필요할때는 플러그인이나 테마에서 지원하는 기능을 고려해보면 좋습니다.