폰트 색상 변경 방법

원하는 색상으로 변경을 하고싶을 때 다음의 위치를 찾아서 변경해보세요. 누락된 부분의 색상을 변경하고 싶으시다면  언제든지 코멘트해주시면 바로 추가하도록 하겠습니다. 설명한다는 것은 어렵군요! 달리 좋은 방법을 생각하지 못하겠고, 게다가 제가 요즘 바빠서 시간을 내기도 힘든 상황입니다. 특정 부분의 색상이나 폰트 등을 다르게 변경하고 싶으시다면, 그 특정 부분을 알려주시면 좀더 자세하게 설명드리느 것이 좀더 수월할 것 같습니다. 아래의 사항이 도움이 될지는 모르겠습니다. 변경하고 싶은 부분을 자세히 지적해주시면 자세히 설명드리겠습니다. 

우선 블로그의 전체에서 링크에 해당되는 색상은 다음과 같이 지정되어 있습니다.

a:link,
a:visited,
a:active {
    color:#000;
    text-decoration: none;
}
a:hover {
    background-color:#ffff00;
}


링크는 검정색이고 마우스오버 시 배경색이 노란색입니다. 각 영역별로 색상을 달리 하시고자 한다면  이 부분을 삭제하세요. 각 영역별 폰트색상은 header, body(alpha, beta), footer 순서입니다.

기본적인 html과 css를 사용하는 방법은

skin.html에서 <div id="header"> ... </div> 안의 폰트 색상을 변경하고자 한다면
style.css에서 #header 부분을 찾아서 color:#111;과 같이 넣어주면 됩니다.

물론 header 전체가 아닌 header-alpha 부분만 폰트색상을 다르게 적용하고 싶다면
style.css에서 #header-alpha 부분에 color:#111;을 수정해주시면 됩니다.



1. header

#header p { color:#ccc; } header의 일반적인 p 태그 속에는 회색으로 되어있습니다.
#header h1 a { color:#f1f1f1; } 헤더의 블로그 제목이 표시되는 블로그 링크는 연한 회색으로 되어있습니다.
#header h1 a:hover { color: #ccc; } 헤더의 블로그 링크에 마우스오버시 회색으로 되어있습니다.


2. body(alpha)

.entry { color:#808080; } 블로그의 본문에 해당되는 부분은 전체 808080 색상이 지정되어 있습니다.
.article a:link,
.article a:visited,
.article a:active {
    color: #b0c4de;
}
.article a:hover {
    background-color:#ffff00;
}

블로그 본문에 링크에 해당되는 부분은 연한 파랑색 그리고 마우스오버시 노란색 배경으로 표시됩니다.

.entry-title h2 a {
    background-color:#ffff00;
    color: #999;
}
.entry-title h2 a:hover {
    background-color:#ffff00;
    color: #000;
}

블로그 글의 제목이 표시되는 부분입니다.

.actionTrail .cnt {
    color: #6b8e23;
}

.actionTrail 부분은 코멘트와 트랙백 펼침/닫힘 링크의 C T의 부분입니다.


3. body(beta)

검색창의 색상을 바꾸고 싶다면

#beta input {
    border:1px solid #ccc;
    background-color: #ffff00;
    color: #000;
    font-size: 11px;
}

#beta input:focus {
    background-color:#fff;
}

노란색 #ffff00으로 된 부분을 변경하시면 됩니다. input:focus는 검색창에 텍스트를 입력하기 위해 클릭했을 때 노란색에서 흰색으로 변하게하는 역할을 합니다.


카테고리 리스트를 변경하고 싶으시다면

#beta .menu ul li a {
    color:#...;
}

#beta .menu ul li a:hover {
    background-color: #...
}

위의 부분을 수정하시면 되고,

#beta .menu .c_cnt {
   color: #999;
   font-size:7pt;
}

#beta .menu .c_cnt 이것은 카테고리의 글수를 표시할 경우 카테고리(n) 숫자 n의 색상을 지정해둔 것입니다.


4. footer

#footer a {
   color:#ccc;
}
#footer a:hover {
    background-color:#ffff00;
}

footer 부분의 링크 색상은 와과 같습니다. 일반 텍스트는

#footer-inner {
    color:#ccc;
}

#footer-inner 전체에 회색 #ccc로 지정해두었습니다. 



사사라삼님의 질문에 대한 답변 내용입니다.

검색- oo에 해달하는글 부분에 대한 폰트 사이즈 변경방법입니다.

oo에 해당하는 글 폰트 크기는 style.css에서

.search-list h3, .searchRplist h3 { } 부분을 찾으신 후 font-size: oo px; 를 추가해주시면 됩니다.

참고 - http://github.com/minordev/layout-project-tistory/blob/master/style.css#L270

그아래 목록의 폰트 크기는

.search-list li, .searchRplist li { } 부분을 찾으신 후 font-size: oo px;를 추가하시면 됩니다.


참고- http://github.com/minordev/layout-project-tistory/blob/master/style.css#L258