워드프레스 사용자정의 CSS 사용하기

오늘은 워드프레스 CSS 사용법에 대해 알아보죠..

 

워드프레스 테마에 있는 CSS를 수정할 때는 테마의 스타일시트 파일을 수정해도 되죠.. 하지만, 워프 블로그를 운영하면서 자주 느낀 부분은, 테마의 파일 자체를 수정하는 것은 그리 좋지는 않다는 것입니다.

 

물론, 개인 최적화를 위해 어쩔 수 없는 경우가 있기는 하지만, 파일 자체를 건드는 것은 우리같은 개발자가 아닌 사람의 입장에서는 코드가 꼬이거나 이래서 복구가 불가능한 경우가 종종 생기더군요..

 

스타일 시트도 마찬가지 입니다.

 

스타일시트 역시, 파일 자체를 수정하는 것 보다는 워드프레스 자체에서 제공하고 있는 사용자정의 CSS 기능을 활용해 필요할 때마다 새로운 CSS를 넣고 사용하는게 좋다는 생각입니다.

 

여기서 또하나.. 스타일 시트는 본문에서 바로 적용할 수도 있죠.. 이를 인라인 스타일 방식(Inline Styling) 이라고 합니다. 예를들어 <h2 style="color=green"> 뭐 이런 식이죠.. 하지만, 이런 식은 웹표준에 맞지 않는 방식이라고 하더군요.. 저도 최근에 안 부분인데 스타일 시트는 인라인의 방식으로 사용하지 않고 별도의 스타일 시트에서 스타일을 적용해 사용하는게 웹표준에 맞다고 합니다.

 

아무튼, 사용방법은 아래와 같습니다.

 

외모 > CSS 편집 > 원하는 스타일시트를 입력 > 스타일시트 저장을 하시면 되겠습니다.

 

위의 스타일 시트는 소제목의 모양을 바꾸기 위해서 <H2> 태그의 속성을 바꾸기 위해서 추가한 스타일 시트 입니다. <H2> 속성 자체를 파일에서 바꿀 수도 있지만, 이렇게 따로 스타일 시트를 정의내려 주면 다른 부분에 영향을 주지 않으면서 Class를 나누어 내가 원하는 용도로 사용할 수 있죠..

 

참고로 소스는 아래와 같습니다.

.titlemoon {
 color: #7f94d4;
 font-size: 18pt;
 vertical-align: text-bottom;
}

 

이제 <h2> 태그의 속성값으로 class를 주고 사용하면 되겠습니다.

 

본문으로 가 보죠.. 아래와 같이 표로 구성된 소제목의 글자 속성값을 주었습니다.

 

<h2 class="titlemoon">소제목 스타일</h2>

 

 

그럼, 아래와 같이 출력이 됩니다. 색상이나 글자 크기 등이 원래의 <h2> 값과 달라졌습니다.

핵심은 워드프레스 외모의 CSS편집 화면으로 가서, CSS를 정의내려 주고 사용할 때 class 값을 주어 CSS를

사용하면 된다는 것입니다.

 

웹표준에 맞는 블로그가 노출에도 유리한 만큼 가급적 인라인 방식의 스타일시트 사용은 자재하시길 권해 드리면서 오늘 이야기.. 이만 줄일까 합니다.