ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • css : content, counter
    컴터/css 2010. 5. 11. 15:18
    오늘 발견한 css, content, counter 괜찮고 유용할듯..
    http://trio.co.kr/webrefer/css2/generate.html


    <!DOCTYPE HTML>
    <html>
    <head>
    <title>HTML5 Demo</title>
    <meta charset="UTF-8">
    <style type="text/css">
        #log1:after{ content:'->after Tag'; }
        #log2:hover:before { content:'->hover:after Tag' open-quote; }   
        #log3:hover:after { content:'->hover:after Tag' open-quote close-quote; }/*open-quote | close-quote | no-open-quote | no-close-quote */
        #log4:hover:before { content:open-quote; }   
        #log4:hover:after { content:close-quote; }   
        #log5:before {   content: "Chapter " counter(chapter) ". ";   counter-increment: chapter 1;   /* chapter를 1 증가. 숫자표기 안하면 default 1*/ }
        #log5:hover:before {   content: "Chapter " counter(section) ". ";   counter-reset: section 5;   /* 항목을 5 으로 설정. 숫자표기 안하면 default 0*/ }
        #log6:before {   content: "Chapter " counter(bb) ". ";   counter-increment: chapter 1 aa4 bb 10;   /* chapter를 1 증가. 숫자표기 안하면 default 1, 여러개를 쓸수 있다..*/ }
        #log6:hover:before {   content: "Chapter " counter(aa) ". ";   counter-reset: section 5 cc 6 aa 8;   /* 항목을 5 으로 설정. 숫자표기 안하면 default 0*/ }
        #log7:hover:before {   content: "Chapter " counter(chapter, disc) ". ";   counter-increment: chapter 1;   /* 항목을 5 으로 설정. 숫자표기 안하면 default 0..스타일: upper-latin|upper-roman|hebrew|disc|none*/ }
    </style>
    </head>
    <body>

        <div id="log1">log1</div>
        <div id="log2">log2</div>
        <div id="log3">log3</div>
        <div id="log4">quote</div>
        <div id="log5">number</div>
        <div id="log6">number2</div>
        <div id="log7">number style</div>

    </body>
    </html>


    IE에서는 <!DOCTYPE HTML> 꼭 선언되어 있어야 함.. 저 선언이 아니고라도 일반적인 것으로도 됨
    선언하면 ie8도 css3을 약간을 할수 있음(first-child 라등가..;;)

     



    댓글 2

Designed by Tistory.