[메모] 블로그에서 쓰는 사용자 정의 스타일 사용법(style.css)

[목차(도우미)]

내가 블로그에서 사용하려고 블로그용 style.css에 추가 정의한 몇가지 스타일
처음에는 개인 용도로 쓰려고 Syntax에 해당하는 클래스명만 기재했지만 검색에 의한 방문객이 많아지면서 좀더 처음보시는 분들을 위하여 스타일시트(CSS)의 정의예를 추가했습니다.

소스코드블럭

CSS정의예

*.src {border: 1px solid gray; padding: 1em; background-color: /*원하는 색*/#c0e0f0;}


DOM예

<div class="src"> 소스코드 블럭</div>

번호를 쓰는 소스코드블럭

CSS정의

*.writeln {border:1px solid silver;border-left:0;border-right:0;background-color:ButtonFace;color:black;font-family: Courier New, Courier, mono, serif;margin:6px 10px;}
*.writeln ol{list-style: decimal;margin: 0px 0px 1px 45px !important;padding: 0px;}
  *.writeln ol li{background-color:#ffc;border-left: 1px solid gray;color:#333;line-height: 1.2em;list-style: decimal-leading-zero; list-style-position: outside !important;margin: 0 !important;padding: 0 3px 0 10px !important;}


DOM예

  1. <div class="writeln">
  2. <ol>
  3. <li>소스코드 블럭예1</li>
  4. <li>소스코드 블럭예2</li>
  5. </ol>
  6. </div>

표제어

CSS정의

*.subject {background: url(http://cfs.tistory.com/custom/blog/56/566280/skin/images/menubar_bg.gif) repeat-x left top;padding: 5px 0 5px 12px; height: 27px;color:gold;border:1px solid black;}


 DOM예

<div class="subject"> 표제어</div>


목차용 표제어

DOM예

<h2 class="toc"> 목차를 만들 표제어</h2>


글상자

DOM예
<div class="refBox"> 여기에 내용</div>

by 금메달.아빠 on 2010. 6. 12. 00:53