ㅇ css] 구구단..?

image area
2012. 11. 29. 17:20
1)
CSS 의 content 기능을 이용한 구구단(블로그 내에서 구현 실패..)입니다.

counter() 와 counter-increment 기능을 어떻게 이용할까..하다가
구구단에 한번 적용시켜봤죠.

스크립트가 있긴 합니다만,
<tr, <td 태그에 class (몇번째줄인가, 몇번째 칸인가..) 를 적용하고, 
안쪽에 <a 태그를 넣는다고 선언하는 기능밖에(?) 없고,

나머지는 css 에서 알아서(?) 계산(?)했다고 보시면 됩니다.

...

2)

<!DOCTYPE>

<style>
  .nn120830_1 { background-color:inherit; border-spacing:3px; }
  .nn120830_1 tr { background-color:inherit; }
  .nn120830_1 tr.l120830_1 td { background-color:#eeeeee; width:30px; height:40px; padding:4px; vertical-align:bottom; counter-increment : nn120830_1; }
  .nn120830_1 tr:first-child td { background-color:#dddddd; vertical-align:top; }
  .nn120830_1 tr td:first-child { background-color:#ddddee; vertical-align:top; }

  .t120830_1 { counter-increment : t120830_2; text-align:right; }
  .t120830_1 a:before { content : counter(t120830_2); }

  .l120830_1 { counter-increment :
    t120830_1
    n120830_1 1
    n120830_2 2
    n120830_3 3
    n120830_4 4
    n120830_5 5
    n120830_6 6
    n120830_7 7
    n120830_8 8
    n120830_9 9
    ;
    text-align:right; }

  n120830_1
  , n120830_2
  , n120830_3
  , n120830_4
  , n120830_5
  , n120830_6
  , n120830_7
  , n120830_8
  , n120830_9
   { text-align:right; }

  .l120830_1 td:first-child a:before { content : " x " counter(t120830_1); }
  .n120830_1 a:after { content : " =" counter(n120830_1) " (" counter(nn120830_1) ")"; }
  .n120830_2 a:after { content : " =" counter(n120830_2) " (" counter(nn120830_1) ")"; }
  .n120830_3 a:after { content : " =" counter(n120830_3) " (" counter(nn120830_1) ")"; }
  .n120830_4 a:after { content : " =" counter(n120830_4) " (" counter(nn120830_1) ")"; }
  .n120830_5 a:after { content : " =" counter(n120830_5) " (" counter(nn120830_1) ")"; }
  .n120830_6 a:after { content : " =" counter(n120830_6) " (" counter(nn120830_1) ")"; }
  .n120830_7 a:after { content : " =" counter(n120830_7) " (" counter(nn120830_1) ")"; }
  .n120830_8 a:after { content : " =" counter(n120830_8) " (" counter(nn120830_1) ")"; }
  .n120830_9 a:after { content : " =" counter(n120830_9) " (" counter(nn120830_1) ")"; }

</style>

<script>
(function () {
  var
    i, j;

  function w() {
    var ar=arguments, arl=ar.length, i;

    for (i=0; i<arl; i++) document.write(ar[i]);
    }

  w('<'+'table class=nn120830_1 >');
    w('<'+'tr><'+'td><a>&nbsp;</a><'+'/td>');
    for (j=1; j<10; j++) {
      w('<'+'td class=t120830_1 ><a>&nbsp;</a><'+'/td>');
      }
    w('<'+'/tr>');

  for (i=1; i<10; i++) {
    w('<'+'tr class=l120830_1><'+'td><a>&nbsp;</a><'+'/td>');
    for (j=1; j<10; j++) {
      w('<'+'td class=n120830_', j, '><a>&nbsp;</a><'+'/td>');
      }
    w('<'+'/tr>');
    }
  w('<'+'/table>');

})();

</script>


...

3)



...

4)
구구단..의 기본 형태는 "덧셈"이라서요,

.l120830_1 에서( <tr 태그에 적용됩니다.. ) 설정한 것 처럼,
새 줄이 나올때 마다(?) 각 항에 해당하는 값을 더하는 형식입니다.
그렇게 css 구구단을 표현할 수 있었던거죠.

..

5)
그런데, 아쉽게도 블로그 내에서는 그냥 표시가 안되네요.
어떻게 해야할지.. 고민좀 해봐야할 것 같습니다.
..라고 적었는데요,

<!DOCTYPE>

요 부분이 <html> 태그 이후에 와서 적용이 안된 문제였군요.. .. 죄송합니다.

-- 새 창에 표현하려던 내용 보여주기.. --

easyBow killofki@.
저작자표시 동일조건

'image area' 카테고리의 다른 글

filter & position in IE8] filter 적용범위에 관한 내용입니다.  (0) 2012.12.06
줄기준 블럭식 배치]..를 Excel 과 붙여넣기용으로 넣어본 Sample.. for IE8  (0) 2012.12.03
다중 스크롤바] ..를 적용해보고 싶었습니다.  (0) 2012.11.28
2진검색형트리] binary tree, insert & print for Web browser..  (0) 2012.11.22
css] :before & :after 의 content 항목에 적용될 a 태그 link 에 대해..  (0) 2012.11.18

Posted by killofki
,



티스토리툴바