블로그스쿨(blog school)





포스팅의뢰 및 제휴 문의

티스토리 사이드바 제목변경 CSS

블로그스쿨 2011.08.21 00:33 조회 수 : 9304

티스토리 사이드바 제목 변경 CSS

 

이 글은 티스토리에 대한 예제이지만.. 이곳에서 나오는 css는 웹이라면 어디든 사용이 가능합니다.

 

사이드바 제목 설정 css

저는 pure 스킨을 사용하는데 pure 스킨은 화려하지 않고 그냥 평범한 스킨입니다. 그러다 보니 대부분의 컬러는 검정색을 사용합니다. 좀더 보기 좋은 스킨이 있지만 각각의 스킨마다 마음에 들지 않거나 변경했으면 하는 부분은 누구나 있기 마련이지요.

특히나 각종 위젯이나 스크립트 코드를 삽입한 블로그의 경우 함부로 스킨을 변경했다가는 그 모든것이 다 날라가게 되고 다시 처음부터 작업을 해야 하는 불상사가 발생할 수도 있습니다.

그래서 마음에 들지 않는 부분을 변경하면서 나와 같은 생각을 가진 사람이 있을것 같더군요.

이번에는 오른쪽 그림처럼 사이드바의 제목부분에 색을 변경하는 방법에 대해서 알아보겠습니다.

상세하고 좀더 포괄적으로 설명을 하려 한다면 포스팅하는 저도 그렇고 지금 이 포스팅에 관심을 가지고 보시는 분도 피곤할것은 뻔한 이치이므로 가장 간단하게 꼭 필요한 기능에 대해서만 설명을 할까 합니다.

 

먼저 사이드바 제목에 사용되는 스타일(CSS)이 무엇인지 알아야 합니다.

skin.html의 사이드바를 표시하는 부분을 보면 알수 있는데 여기서는 사이드바 제목중 하나인  "최근에 올라온 글"을 찾아보면 어떤 스타일을 사용하는지 알 수가 있습니다.

관리페이지의 스킨>HTML/CSS 편집을 클릭해서 "sidebar"를 찾으면 알 수 있습니다.
( 이때 Ctrl + F를 이용하면 빨리 찾는다는 것 아시죠? )

간단하게 한다고 했는데 벌써 복잡해진다는 느낌이 드는 것은 왜일까요? ^^ 그럼 더욱 간단하게..
html/css 편집화면에서 찾은 결과입니다.

 

사이드바에서 사용하는 스타일
  • <div id="sidebar">
  • <h3>최근에 올라온 글 </h3>

 

1. 이제 HTML/CSS 편집화면의 하단박스(style.css)에서 위의 div에서 사용된 "sidebar h3" 을 찾습니다.

style.css의 내용중 sidebar 스타일

2. 찾아보니 위와 같이 작성되어 있네요. 그림에서 사각형 부분의 컬러값을 바꿔주면 됩니다.
   잘 안보이나요?

 

 #sidebar h3

    { font-size:1em;  font-weight:bold; color:#0E86D6; padding-top:20px; margin-bottom:8px;}

 

이제 잘 보이시나요? 저는 원래는 "color:#000" 라고 되어 있던것을 "color:#0E86D6"으로 변경했습니다.
변경시 주의할점은 color:#000 뒤에 있는 세미콜론(;)이 지워지지 않도록 해야 합니다. 세미콜론이 여러가지의 속성값들을 구분해주는 역할을 하니까요.

 

3. 이제 변경했으면 미리보기를 해보신 후 정상으로 바뀌었으면 저장을 하면 끝입니다.

 

쉽게 설명한다고 했는데 쉬웠는지 모르겠습니다. 궁금한점은 댓글로 남겨주세요!

다른 속성 설명
  • font-weight:bold ->글자 굵기를 굵게(bold) 표시하라는 의미
  • padding-top:20px -> 위쪽 공간을 20 픽셀만큼 비우라는 의미
  • margin-bottom:8px ->아래쪽에서 8 픽셀만큼 띄라는 의미


 

서비스 링크

X
Login

브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가 유출될 수 있으니 꼭 로그아웃을 해주세요.

X