언제나 피어있는 꽃

스킨도 스킨이지만, 글씨색 또한 블로그에서 아주 중요한 역할을 하고 있습니다
단순히 강조효과도 가지고있고, 무엇보다 가독성에 도움을 주죠

하지만 종종 실수나 노려서(...), 배경과 글씨색의 높낮이가 크면 눈이 금방 피곤해집니다
검은색 바탕에 흰계열 글씨나 빨간 바탕에 흰색이라던가요

어느 블로그에선 배경색이 검정색이고 글씨색이 짙은 회색이라- _-; 그냥 내용을 메모장에 붙여넣기 해서 읽은 적도 있었습니다


스킨 마법사로 간단하게 바꿀 수 있지만, 여기에선 CSS를 이용한 블로그의 글씨 색 수정을 하도록 하겠습니다


거의 모든 설정은 CSS에서 할 수 있습니다
관리자→스킨→HTML/CSS 편집에서 CSS란을 봅시다


#1 기본 글씨색

블로그의 모든 글씨색을 기본적으로 설정하며, 글을 작성할때도 이 색으로 지정됩니다.
CSS의 최상단에 보면 아래와 같은 소스가 있습니다


강조한 저 부분이 바로 색상 지정 부분입니다.

위의 body { }  안에있는 색상은 블로그 전체의 기본 색상을 지정하는것이며
아래의 4줄(a:link 라던가)는 링크의 블로그 전체의 링크 색상을 지정하는것이죠

블로그 전체의 색상은 말그대로 블로그 전체에 적용됩니다
블로그 타이틀이라던가, 메뉴라던가, 사이드바나 본문등..전부 적용되죠

링크부분은 수가 4개나 됩니다. 간단하게 설명해 보자면

a:link 는 기본 링크
a:visited 는 이미 클릭한 링크
a:hover 는 마우스가 위로 올라갔을때의 링크
a:active 는 클릭했을때의 링크

이죠


#2 색 바꾸기

어느 부분에서 색을 지정해야하는지 알았으므로, 색상 코드만 알면 곧바로 색을 바꿀 수 있습니다
위의 소스에선 색상코드가 모드 #000000 으로 되어있죠? #000000은 검은색을 뜻합니다
앞에있는 샵(#)은 "여기부터 색상 코드다"라는 말과 같죠




위의 그림처럼, 숫자 6자리는 각각 2자리씩 빨강색, 초록색, 파랑색을 가지고있습니다
그래서 RGB값이라고 하며, 아마 많이 들어보셨을겁니다

이렇게 색을 조합하여 다양한 색을 만들 수 있는데, 우리가 뭐 색상코드를 전부 외우는것도 아니고..;
아주 간단하게 색상 코드를 볼 수 있는 방법이 있습니다. 이미지 프로그램을 사용하는것이죠




위의 프로그램은 포토샵입니다
이렇게 자기가 원하는 색상코드를 얻어서, 기존의 색상코드 부분에 넣어주면 바뀌게 됩니다


#3 본문 글씨색

이번엔 본문의 글씨색을 바꿔보도록합시다
본문영역을 찾으려면, .article 로 검색하면 됩니다


처음에 한것과 다를바 없군요. 헌데 연파랑색으로 표시된 부분은 처음봅니다. 백그라운드 컬러?

이 소스는 제 블로그를 기준으로 삼았기 때문이죠^^; 무시하셔도 됩니다
제 블로그에서 본문내부에 사용된 링크에 마우스를 가져가면, 글씨가 빨간색으로 되고 배경이 분홍색으로 됩니다. 이렇게 배경을 넣으려면 background-color 을 넣어주시면 됩니다

#2 에서 봤듯, 원하는 색상코드를 표시된 부분에 넣어주면 됩니다


본문의 글씨색 부분이 없다구요? 없으면 만들면 됩니다(...)
본문의 설정 부분은 article { } 입니다. 이 대괄호사이에 color을 넣어주면 되죠
대괄호{}안에 색 설정을 넣어주면 됩니다


오렌지색으로 된 부분이 추가된 부분입니다
이렇게 해주면, 본문의 글씨 색이 짙은 회색(#F9F9F9)으로 됩니다


#4 댓글 글씨색

이번엔 댓글부분의 색을 설정해볼까요?
댓글 부분은 .comment 로 검색하면 됩니다


어허...또 색상 설정 부분이 없군요. 그냥 깔쌈하게 넣어줍니다


오렌지색으로 된 부분이 추가된 부분입니다
이렇게 해주면, 댓글의 글씨 색이 짙은 회색(#F9F9F9)으로 됩니다


#5 마치며

스킨 마법사는 왠지 무겁고 내키지않아서 저는 CSS로만 수정하고 있습니다
어차피 제 스킨은 스킨 마법사가 적용되지않아요-┏

어쨋거나, 간단하게 블로그 내부의 색상을 바꿔봤습니다
너무 다양한 색을 이용하거나 높낮이가 심한 색을 사용하면 눈이 금방 피곤해지니
다양하거나 높낮이가 높은 색의 사용은 가급적 피하도록합시다