콩바구니의 그림일기

본문중에 특정 단어를 걸러내서 괄호를 치는 스크립트를 만들어 봤습니다.

예문

지난번에 만들었던것 에서 여러가지 요소를 추가하여 0.2버전입니다.
카드의 위치를 기억한다음 시작하기 버튼을 누르면 게임을 시작합니다.
전부 15쌍의 카드를 찾으면 게임 끝입니다.
카드를 뒤집은 횟수와 경과시간을 알수 있습니다.

자바스크립트로, 카드게임을 만들어 봤습니다.
같은카드가 2쌍씩 존재하는 여러장의 카드를 섞어서, 두장씩 뒤집으며 같은 카드를 찾는 게임입니다. 한장 뒤집을때마다 숫자를 새기때문에, 기록경쟁을 할수도 있습니다.
저는 84번이 최고기록이네요.

테이블을 sort 하는 자바스크립트를 만들어봤습니다.

제가 이번에 만든 스크립트는 _{(언제나 그렇지만)} 인라인스타일, 인라인스크립트를 일체 사용하지 않습니다.
특정 class의 태이블을 오름차순 혹은 내림차순으로 정렬합니다.

순번	제목	작가	출판사
1	감독부적격	Moyoco Anno	대원씨아이
2	수수께끼 그녀 X 1	Ushiba Riichi	학산문화사
3	수수께끼 그녀 X 2	Ushiba Riichi	학산문화사
4	수수께끼 그녀 X 3	Ushiba Riichi	학산문화사
5	미나미가 1	Coharu Sakuraba	북박스
6	미나미가 2	Coharu Sakuraba	북박스
7	미나미가 3	Coharu Sakuraba	북박스
8	미나미가 4	Coharu Sakuraba	북박스
9	미나미가 5	Coharu Sakuraba	북박스
10	극락청춘 하키부 1	Ai Morinaga	대원씨아이
11	극락청춘 하키부 2	Ai Morinaga	대원씨아이
12	극락청춘 하키부 3	Ai Morinaga	대원씨아이
13	극락청춘 하키부 4	Ai Morinaga	대원씨아이
14	극락청춘 하키부 5	Ai Morinaga	대원씨아이
15	극락청춘 하키부 6	Ai Morinaga	대원씨아이
16	극락청춘 하키부 7	Ai Morinaga	대원씨아이
17	극락청춘 하키부 8	Ai Morinaga	대원씨아이
18	현시연 1	Kio Shimoku	북박스
19	현시연 2	Kio Shimoku	북박스
20	현시연 3	Kio Shimoku	북박스
21	현시연 4	Kio Shimoku	북박스
22	현시연 5	Kio Shimoku	북박스
23	현시연 6	Kio Shimoku	북박스
24	현시연 7	Kio Shimoku	북박스
25	현시연 8	Kio Shimoku	북박스
26	현시연 9	Kio Shimoku	북박스

Download

table_sort.zip

Code

javascript

1. function addLoadEvent(func) {
2.     var oldonLoad = window.onload;
3.     if (typeof window.onload != 'function') {
4.             window.onload = func;
5.     }else {
6.         window.onload = function(){
7.             oldonLoad();
8.             func();
9.         }
10.     }
11. }
12. function getElementsByClassName(clsName,parentNode) {
13.  var arr = new Array();
14.  if (parentNode == null) {
15.   var elems = document.getElementsByTagName("*");
16.  } else {
17.   var elems = parentNode.getElementsByTagName("*");
18.  }
19.  for ( var cls, i = 0; ( elem = elems[i] ); i++ ) {
20.   if ( elem.className == clsName ) {
21.    arr[arr.length] = elem;
22.   }
23.  }
24.  return arr;
25. }
26. addLoadEvent(sortTable);
27. function sortTable(){
28.     var body_el = document.getElementsByTagName("body")[0];   
29.     if (!getElementsByClassName("datatable",body_el))return false;
30.     var table_el = getElementsByClassName("datatable",body_el);
31.     for (i=0;i<table_el.length;i++){
32.         table_el[i]._tr = table_el[i].getElementsByTagName("tr");
33.         if (table_el[i]._tr[0].parentNode.nodeName!="THEAD")return false;
34.         for (j=0;j<table_el[i]._tr[0].childNodes.length;j++){
35.             if(table_el[i]._tr[0].childNodes[j].childNodes[0]){
36.                var a_el = document.createElement("a");
37.             a_el.href="#";
38.             table_el[i]._tr[0].childNodes[j].appendChild(a_el);
39.             a_el.appendChild(table_el[i]._tr[0].childNodes[j].childNodes[0]);  
40.                 table_el[i]._tr[0].childNodes[j].className = "button";
41.                 table_el[i]._tr[0].childNodes[j]._number = j;       
42.                 table_el[i]._tr[0].childNodes[j]._switch = false;
43.                 table_el[i]._tr[0].childNodes[j].onclick = function () {
44.                     for (i=0;i<this.parentNode.childNodes.length;i++){
45.                         this.parentNode.childNodes[i].className = "button";
46.                     }   
47.                     if (this._switch == false){
48.                         this._switch = true;
49.                         sortTableABC(this._number,this.parentNode.parentNode.parentNode);
50.                         this.className = "button up";
51.                         return false;
52.                     } else {
53.                         this._switch= false;
54.                         sortTableCBA(this._number,this.parentNode.parentNode.parentNode);
55.                         this.className = "button down";
56.                         return false;
57.                     }   
58.                 }
59.             }
60.         }  
61.     }
62. }
63. function sortTableABC(number,table_el){
64.  var tr_el = table_el.getElementsByTagName("tr");
65.  var txt = new Array();
66.  var txt_int = new Array();
67.  var sum = 0;
68.  for (i=1;i<tr_el.length;i++){
69.      txt[i] = tr_el[i].childNodes[number].childNodes[0].nodeValue;
         txt_int[i] = parseInt(txt[i]);
70.  }
71.  for (i=1;i<txt_int.length;i++){
72.       sum = sum + txt_int[i];
73.  }
74.  txt = txt.sort();
75.  if (sum>0) {
76.      for (i=1;i<txt_int.length;i++){
77.          for (j=1;j<txt_int.length;j++){
78.              if (txt_int[i]<txt_int[j]) {
79.                  var temp = txt_int[i];
80.                  txt_int[i] = txt_int[j];
81.                  txt_int[j] = temp;
82.              }
83.          }
84.      }
85.      txt = txt_int;
86.  }
87.      for (i=1;i<txt.length;i++){
88.          for (j=1;j<tr_el.length;j++) {
89.              if (txt[i]==tr_el[j].childNodes[number].childNodes[0].nodeValue){
90.                  tr_el[i].parentNode.appendChild(tr_el[j]);   
91.              }
92.          }   
93.     }
94. }
95. function sortTableCBA(number,table_el){
96.  var tr_el = table_el.getElementsByTagName("tr");
97.  var txt = new Array();
98.  var txt_int = new Array();
99.  var sum = 0;
100.  for (i=1;i<tr_el.length;i++){
101.      txt[i] = tr_el[i].childNodes[number].childNodes[0].nodeValue;
102.      txt_int[i] = parseInt(txt[i]);
     }
103.  for (i=1;i<txt_int.length;i++){
104.       sum = sum + txt_int[i];
105.  }
106.  txt = txt.sort();
107.  if (sum>0) {
108.      for (i=1;i<txt_int.length;i++){
109.          for (j=1;j<txt_int.length;j++){
110.              if (txt_int[i]<txt_int[j]) {
111.                  var temp = txt_int[i];
112.                  txt_int[i] = txt_int[j];
113.                  txt_int[j] = temp;
114.              }
115.          }
116.      }
117.      txt = txt_int;
118.  }
119.      var txtCBA = new Array();
120.      for (i=1;i<txt.length;i++){
121.          txtCBA[i] = txt[txt.length-i-1];
122.      }
123.      for (i=1;i<txtCBA.length;i++){
124.          for (j=1;j<tr_el.length;j++) {
125.              if (txtCBA[i]==tr_el[j].childNodes[number].childNodes[0].nodeValue){
126.                  tr_el[i].parentNode.appendChild(tr_el[j]);   
127.              }
128.          }   
129.      }
130. }

stylesheet

1. #content_main table.datatable {
2.     border:3px solid #f00;
3.     border-collapse:collapse;
4. }
5. #content_main table.datatable td, #content_main table.datatable th {
6.     border:1px solid #000;
7.     padding:5px;
8. }
9. #content_main table.datatable th{
10.     background:#ffa;
11. }
12. #content_main table.datatable th a{
13.     color:#600;
14. }
15. #content_main table.datatable tr td:nth-child(even){
16.     background:#fee;
17. }
18. #content_main table.datatable tr:nth-child(even) td{
19.     background:#eee;
20. }
21. #content_main table.datatable tr:nth-child(even) td:nth-child(even){
22.     background:#ecc;
23. }
24. #content_main table.datatable tr:nth-child(even) th{
25.     background:#dd9
26. }
27. #content_main table.datatable tbody tr:hover th{
28.     background:#550;
29.     color:#fff;
30. }
31. #content_main table.datatable tbody tr:hover td, #content_main table.datatable tbody tr:hover td:nth-child(even){
32.     background:#990;
33.     color:#fff;
34. }
35. #content_main table.datatable thead th {
36.     background:#faa;
37. }
38. #content_main table.datatable th.button {
39.     cursor:pointer;
40. }
41. #content_main table.datatable th.button:hover {
42.  
43.     background:#fcc;
44. }
45. #content_main table.datatable th.up{
46.     background:url(images/icon09_up_arrow.gif) right center no-repeat;
47.     padding-right:13px;
48.     background-color:#cfc;
49. }
50. #content_main table.datatable th.up:hover{
51.    background:url(images/icon09_up_arrow.gif) right center no-repeat;
52.    background-color:#efe;
53. }
54. #content_main table.datatable th.down{
55.     background:url(images/icon10_down_arrow.gif) right center no-repeat;
56.     background-color:#ccf;
57.     padding-right:13px;
58. }
59. #content_main table.datatable th.down:hover{
60.     background:url(images/icon10_down_arrow.gif) right center no-repeat;
61.     background-color:#eef;
62. }

이 글은 스프링노트에서 작성되었습니다.

삼양라면 구매운동

......
'삼양라면 구매운동’이 누리꾼들 사이에서 확산되고 있다. ‘불매운동’이 아니고 ‘구매운동’이다.
......
이물질까지 나와 물의를 일으켰던 삼양식품 라면에 누리꾼들이 되레 ‘열광’하는 이유는 ‘안티 조중동 운동’과 맥이 닿아 있다. 누리꾼들은 “<조선일보>가 삼양라면만 비판하고 있다”며 ‘안티 조중동 운동’과 연관해 구매운동을 펼치고 있는 것
......

최근 삼양라면 구매운동이 있지요.
저도 이 구매운동에 동참하고자 뭔가 할수있는일이 없을까 궁리하다가. 애니메이션 GIF를 이용한 삼양라면 놀이를 보고 아이디어가 떠올랐습니다. 그것은 삼양라면 그림을 가지고 자바스크립트로 간단한 게임을 만드는것입니다.

게임설명

이것으로 두번째 버전인데요. 첫번째것보다 그림이 커졌습니다. ㅎㅎ
놀이방법은 간단합니다.
번갈아가면서 뽑기 버튼을 누릅니다.
가격이 비싼 라면을 뽑는사람이 승리합니다.
가격이 같으면 중량이 무거운쪽이 승리합니다.
중량도 같으면 하면이름이 더 긴쪽이 승리합니다.
만약 이름의 길이도 같으면 제품 설명이 더 많은쪽이 승리합니다.
만약 서로 같은 라면을 뽑으면, 나중에 뽑은사람이 라면을 다시 뽑습니다.

삼양라면 뽑기놀이

자바스크립트로 작동하는 삼양라면 뽑기 놀이 입니다.
뽑기 버튼을 눌러서, 비싼라면을 뽑는사람이 이기는것입니다.
만약 가격이 똑같으면 중량이 더 무거운사람이 승리입니다.
중량도 같으면, 라면이름이 한자라도 더 긴사람이 승리입니다.

뽑기버튼 누르고 라면내기 시합을 해봅시다.

자바스크립트로 간단한 슈팅게임을 만들수 있지 않을까? 하는 생각이 문득 들었습니다.
가능하더군요. ㅎㅎ

첨부파일을 다운받아 압축을 푸신후 index.html파일을 웹브라우저에서 여시면 됩니다.
이 스크립트는 파이어폭스, 사파리, 오페라에서 잘 작동하지만. 익스플로러에서는 작동하지 않습니다.

ver 0.01 : 2008년 1월 27일

주요 업데이트 내용

1. 주인공의 4방향 움직임 구현
2. 주인공이 칸 밖으로 나갈수 없도록 함
3. 방향에 따라 주인공의 그림이 바뀌도록 함

Play 하기

ver 0.02 : 2008년 1월 28일

주요 업데이트 내용

1. 부드럽게 움직이는 주인공.
2. 주인공 크기를 64*32 에서 64*64의 애니메이션 GIF로 변경. 방향에따라 그림이 바뀌는 효과는 보류.
3. 주인공의 움직임에 따라 배경도 따라 움직이는 기능 추가.
4. 배경그림 변경

Play 하기

ver 0.03 : 2008년 1월 29일

주요 업데이트 내용

1. 주인공의 움직임에. 약간의 버그 수정.
2. 배경이 좌우 상하 4방향으로 움직임.
3. 주인공이 움직이는동안 입력불가모드 적용. 멈추고나서 입력가능해짐.

Play 하기

ver 0.04 : 2008년 1월 30일

주요 업데이트 내용

1. 주인공 그림을 24비트PNG포멧으로 변경.
2. 배경이 입체적으로 움직임.(3중레이어)
3. 배경음악. 효과음 버튼적용.

Play 하기

ver 0.05 : 2008년 1월 30일

주요 업데이트 내용

1. 배경그림을 3중에서 5중으로 업그레이드.

Play 하기

ver 0.06 : 2008년 1월 31일

주요 업데이트 내용

1. 배경음악 . 효과음버튼 제거 (딜레이 문제해결때까지 보류)
2. 알고리즘 제편성. 환경변수 정리작업.
   
3. 8방향 움직임의 구현.

Play 하기

ver 0.07 : 2008년 2월 3일

주요 업데이트 내용

1. 알고리즘 제편성. 환경변수 정리작업.
   
2. 쏟아지는 적군 구현.
3. 간단한 상태창 구현.
4. 진행방향마다 다른 동작의 애니메이션 구현.
   

Play 하기

ver 0.1 : 2008년 2월 4일

주요 업데이트 내용

1. 미사일 그래픽 업그레이드.
2. 난이도 설정 구현.
   
3. 미사일과 충돌 이벤트 구현.
4. 게임오버 이벤트 구현.
5. 잠깐멈춤 기능 구현.

Play 하기

ver 0.11 : 2008년 2월 8일

주요 업데이트 내용

1. 움직임에따라 배경그림위 위치가 틀어지는 버그 해결.
2. 잠깐멈춤시 화면디자인.
3. 마우스좌표를 인식하여 움직이는 UI도입.

Play 하기

이번에는 요즘 스킨을 꾸밀때 주로 사용하는 기법중 하나인. CSS2 의 이미지 대치법에 대한 강좌를 작성해볼까 합니다.
웹표준의 특징중 하나가. 구조,표현, 동작의 분리 인데요. 이미지 대치법은 구조와 표현의 분리에 해당하는 기술이라 하겠습니다.
본 강좌에 사용할 페이지는 다음과 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS2 이미지 대치법</title>
<link rel="stylesheet" media="screen" href="style.css" title="스타일A" />
</head>
<body id="link01">
<div id="header">
<h1> CSS2 이미지 대치법 </h1>
  <div class="menu">
    <ul>
      <li class="button01"><a href="index1.html"> 링크 하나 </a></li>
      <li class="button02"><a href="index2.html"> 링크 둘 </a></li>
      <li class="button03"><a href="index3.html"> 링크 셋 </a></li>
      <li class="button04"><a href="index4.html"> 링크 넷 </a></li>
    </ul>
  </div>
</div>
</body>
</html>

이 파일을 사파리에서 열면 다음과 같이 보입니다.

같은폴더에 style.css 를 작성합니다. 내용은 다음입니다.

@charset "utf-8";
/* CSS Document */
#header .menu li{
    float:left;
    list-style:none;
}

이것을 적용하면 다음과 같이 됩니다.

링크의 버튼을 다음의 50px*50px 크기의 그림으로 대치 하고자 합니다.그러기 위해서 다음의 그림을 준비합니다.

이그림을 같은폴더에 button01.png 로 저장하고 style.css 에 다음 내용을 추가합니다.

#header .menu li a{
    width:50px;
    height:50px;
    display:block;
    background:url(button01.png) top left;
}

링크의 배경에 그림이 들어갔습니다. 이제 글씨를 안보이게 하기 위해 style.css 에 다음 내용을 추가합니다.

#header .menu li a{
    width:50px;
    height:50px;
    display:block;
    background:url(button01.png) top left;
    overflow:hidden;
    text-indent:-1000px;
}

여기서 style.css 에 다음 내용을 추가하여 링크가 작동할때 그림이 바뀌도록 합니다.

#header .menu li a:hover,
#header .menu li a:focus{
    background-position:center left;
}
#header .menu li a:active {
    background-position:bottom left;
}

이제 버튼의 그림을 각각 다음으로 바꾸고자 합니다.

style.css 에 아래의 내용을 추가합니다.

#header .menu li{
    float:left;
    list-style:none;
    margin-left:-2px;
}

#header .menu li.button01 a{
    background-image:url(button02.png);
}
#header .menu li.button02 a{
    background-image:url(button03.png);
}
#header .menu li.button03 a{
    background-image:url(button04.png);
}
#header .menu li.button04 a{
    background-image:url(button05.png);
}

각각 그림이 바뀌었습니다. 이제 한가지더 손보면 끝입니다.
이제까지 사용한 html 파일을 body 의 id 만 다르게 하여 각각 index1.html, index2.html, index3.html, index4.html 로 저장하고 style.css에 다음내용을 추가합니다.

#link01 #header .menu li.button01 a,
#link02 #header .menu li.button02 a,
#link03 #header .menu li.button03 a,
#link04 #header .menu li.button04 a {
    background-position:top right;
}

이것은 링크에서 현제 페이지를 표시하는 스타일시트입니다.
이상입니다.

완성파일은 아래의것을 받으시면 됩니다.참고하시라고 올려둡니다.

여러버전의 익스플로러를 한 PC에 설치하는 방법이 있더군요.
Install multiple versions of IE on your PC 여기서 제공하는 프로그렘을 사용하면. 익스플로러 3 부터 6까지 전버전 설치해볼수 있습니다. 그래서. 익스플로러 7 을 설치하고, 이것 을 실행하여 전버전 설치했습니다. 그런데. 뭐가 문제가 있는지 익스플로러 3은 실행이 안되네요. 아무튼 이제 제컴퓨터에서는 익스플로러 4.01, 5.01 , 5.5, 6 , 7 버전을 테스트 할수 있고. 거기에 넷스케이프 9,파이어폭스 2, 3 그리고 오페라 9.23 또 사파리 3.03 을 실행할수 있습니다.

그래서 그 기념으로 ACID2 test 를 돌려봤습니다.

Microsoft Internet Explorer 4.01

Microsoft Internet Explorer 5.01

Microsoft Internet Explorer 5.5

Microsoft Internet Explorer 6

Microsoft Internet Explorer 7

Netscape 9.0.0.5

Mizila Firefox 2.0.0.11

Mizila Firefox 3 beta2

Safari 3.0.3

Opera 9.23

익스플로러는 전부 피바나피바다네요. ㅎㅎ 파이어폭스는 3 에서 비로소 테스트를 통과하고 있구요.
그런데 최근 개발중인 익스플로러 8이 드디어 ACID2 test 를 통과했다고 합니다. 웹표준이 대수인가! 라면서 웹표준을 따르지 않았던 웹디자이너들. 익스플로러 8 나오면 상당히 고생할듯 합니다. 웹표준에 따르지 않는 구버전의 익스플로러에 맞춘 레이아웃은. 익스플로러 8 에서는 분명히 깨집니다. 대대적으로 웹표준에 맞추어 수정할 필요가 생기는것이죠.

css의 선택자중에 :first-line 이 있습니다. 이것은 단락에서 첫번째 줄의 스타일을 지정하는 가상 선택자 입니다.

제 블로그도 현제 이것을 사용하여 댓글란을 꾸미고 있습니다.

오늘은 스킨을 뜯어고치다가 문득 이런 생각이 들었습니다.
textarea 에도 :first-line 이 통할까?

그래서 아래와 같은 내용을 CSS에 추가했습니다.

textarea:first-line { font-weight:900; color:#f09;}

결과는 다음입니다. 아. 테스트에 사용한 OS 는 윈도우즈 XP 입니다.
익스플로러6 의 textarea 에 :first-line 선택자가 작동하는것을 확인했습니다. 정말 의외입니다.
하지만. IE6 은 p 에 적용한 :first-line 선택자를 인식하지 못하고 있습니다. 참 난감합니다.ㅎㅎ

오늘은 웹표준에 대해 말할까 합니다.

저의 공부가 그렇게 깊지않은 관계로 잘못알거나 오해하고 있는 사실이 있을수도 있겠습니다만.. 괜히 아는척한다고 타박하지마시고 너그럽게 봐주시면 고맙겠습니다. 아 태클걸지 말라는 말이 아닙니다. 제가 잘못알고있는게 있다면 가차없이 지적해주십시오. 감사히 받겠습니다.

그럼 시작합니다.

흔히들 웹상에서 글을 작성할때 위지웍 에디터를 사용합니다. 그런데 그 위지웍 에디터가 문제가 되는것이 본문안에 표현을 위한 요소를 삽입한다는점입니다. 위지웍 에디터를 사용하여 특정문자의 색을 #333333 정도 되는 색으로 바꿨다고 가정합시다. 그것에 대한 마크업은 다음입니다.

저는<span style="color:#33333">만화가</span>지망생입니다

이경우 만약에 스킨을 바꾸거나 했을때 배경이 검정색인 스킨을 사용하면 해당글자가 보이지 않게 되는 문제가 발생합니다. 그림으로 설명하는게 빠르겠네요.

이런식으로 작성했던 글에서

스킨을 바꾸거나 하여 배경이 검정색으로 바뀌면 본문에서 위지웍을 통해 스타일을 지정했던 글귀가 보이지 않게 됩니다.

이러한 글이 한두게면 모르지만.. 상당히 차곡차곡 쌓이고나면 나중에 스킨을 바꾸거나 할때 상당히 골치아파집니다. 수백게가 넘는 글을 일일이 찾아다니면서 보이지않는 글이 보이도록 고쳐야 하니까요. 너무나 귀찮은 일입니다.

그 문제를 해결할 방법이 있습니다. 웹표준을 지키면 됩니다.

한가지 예를 더 들겠습니다.

난중일기

21일 (경신) 맑음. 일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤 파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.

24일 (신유) 맑음. 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사[권준] 가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안[선의문]이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.

25일 (임술) 비가 주룩주룩 내리다 낮에 갰다. 아침에 장계 초안을 수정했다. 늦게 우수사 [이억기] 가 오고 나주 관관[원종의] 도 왔다. 장흥부사 [배홍립]가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.

26일 (계해) 아침에는 맑더니 저물게 비가 내렸다. 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.

상단의 문장을 아래 그림과 같이 꾸미고자 합니다.

티스토리에서 제공하는 위지웍 에디터로 짙은글씨부분에 볼드. 중괄호 [] 안에 이름에 폰트크기를 지정했습니다. 마크업은 다음과 같습니다.

위지웍을 사용한 마크업

<div>
<h3>난중일기</h3>
<p><span style="font-weight: bold;">21일 (경신) 맑음</span>. 일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤

파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.</p>
<p><span style="font-weight: bold;">24일 (신유) 맑음.</span> 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사<font size="1">[권준] </font>가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안<font size="1">[선의문]</font>이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.</p>
<p><span style="font-weight: bold;">25일 (임술) 비가 주룩주룩 내리다 낮에 갰다.</span> 아침에 장계 초안을 수정했다. 늦게 우수사 <font size="1">[이억기]</font> 가 오고 나주 관관<font size="1">[원종의</font>] 도 왔다. 장흥부사 <font size="1">[배홍립]</font>가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.</p>
<p><span style="font-weight: bold;">26일 (계해) 아침에는 맑더니 저물게 비가 내렸다</span>. 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.</p>
</div>

웹표준을 준수하는 마크업은 다음입니다.

웹표준 방식의 마크업

<div>
<h3>난중일기</h3>
<p><strong>21일 (경신) 맑음. </strong>일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤

파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.</p>
<p><strong>24일 (신유) 맑음.</strong> 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사_[권준] 가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안_[선의문]이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.</p>
<p><strong>25일 (임술) 비가 주룩주룩 내리다 낮에 갰다</strong>. 아침에 장계 초안을 수정했다. 늦게 우수사 _[이억기] 가 오고 나주 관관_[원종의] 도 왔다. 장흥부사 _[배홍립]가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.</p>
<p><strong>26일 (계해) 아침에는 맑더니 저물게 비가 내렸다.</strong> 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.</p>
</div>

무슨차이가 있을까요? 웹표준을 준수하는 마크업은 태그안에 표현을 위한요소 (style, width, height, border 등) 을 사용하지 않습니다. 대신 글을 꾸미기 위해서 강조하기<strong> 위첨자<sup> 아래첨자<sub> 기울여쓰기<em> 밑줄<ins> 지우기<del> 등을 사용합니다. 그래서 마크업이 위지웍을 사용해 꾸민 마크업보다 훨씬 알아보기 쉽고 간결합니다.

만약에 이 문장에 강조구문의 색을 빨간색으로,중괄호안 이름을 파란색으로 바꾸어야 한다고 가정합시다. 위지웍을 사용한경우는 마크업이 엄청나게 늘어납니다. 쓸대없는 태그가 완전히 범람하고 있습니다.

위지웍을 사용한 마크업

<div>
<h3>난중일기</h3>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">21일 (경신) 맑음</span><span style="color: rgb(255, 0, 0);">.</span> 일찌기 아침밥을 먹고 나가서 둔전에서 받아들인 벼를 다시 작석하여 새로지은 창고에 쌓은것이 1백 67섬으로, 준것이 48섬이다. 늦게 거제, 고성, 하둥, 강진, 화령포 들이 와서 고성에서 가지고 온 술을 같이 마셨다. 웅천이 저녁에 와서 몹시 취했다. 밤 10시쯤

파하고 돌아갔다. 하천수, 이진 들이 왔다. 방답이 들어왔다.</p>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">24일 (신유) 맑음.</span> 식푸에 나가, 둔전에서 받아들인 벼를 고쳐 작석하는것을 감독했다. 우수사<font size="1"><span style="color: rgb(0, 0, 255);">[권준]</span> </font>가 들어왔다. 오후 4시에 비바람이 크게 일었다. 둔전서 받아들인 벼를 다시 작석한 결과 창고에 들여 쌓은것이 1백 70여섬으로, 준것이 30여섬이다. 난안<font style="color: rgb(0, 0, 255);" size="1">[선의문]</font>이 갈렸다는 기별이 왔다. 비바람으로 인해서 중지했다. 밤새도록 바람이 그치지 않았다. 몸이 노곤했다.</p>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">25일 (임술) 비가 주룩주룩 내리다 낮에 갰다.</span> 아침에 장계 초안을 수정했다. 늦게 우수사 <font style="color: rgb(0, 0, 255);" size="1">[이억기]</font> 가 오고 나주 관관<font style="color: rgb(0, 0, 255);" size="1">[원종의</font><span style="color: rgb(0, 0, 255);">]</span> 도 왔다. 장흥부사 <font style="color: rgb(0, 0, 255);" size="1">[배홍립]</font>가 와서, 수군에 관한 사무를 진행하기 곤란한것은 감사의 처사가 방해된 때문이라고 이야기 했다. 이진이 둔전으로 돌아갔다. 춘절, 복춘, 사화가 본영으로 돌아갔다.</p>
<p><span style="font-weight: bold; color: rgb(255, 0, 0);">26일 (계해) 아침에는 맑더니 저물게 비가 내렸다</span>. 늦게 대청에 나갔다. 여도와 흥양이와, 백성을 침해하는 영리들의 폐단을 이야기 했다. 지극히 놀라운 일이다. 양정언과 영리의 강기경, 이득종, 박취 들을 중죄로 다스리는 동시에 경상도와 전라도의 영리를 잡아 들이라고 명령했다. 경상 수사가 보러 왔다. 이윽고 견내량 복병에서 긴급보고가 왔는데 왜선 1척이 건내량으로부터 들어와서 해평장에까지 이른것을 머무르지 못하게 했다고 했다. 둔전에서 받아들인 벼 2백30섬을 다시 작석한 수가 1백 98섬이라 준것이 32섬이라고 한다. 낙안에게 작별 술을 대접해 보냈다.</p>
</div>

웹표준 코딩의 경우 어떨까요? 본문에 더이상 손댈 필요가 없습니다.
외부로 링크된 CSS에 다음의 내용을 추가하면 끝입니다.

strong {color:red;}
sub {color:blue;}

색깔이 맘에 안들어 바꾸고 싶다 할때도 아래처럼 바꿔주기만 하면 됩니다.

strong {color:yellow;}
sub {color:gray;}

참고하시라고 파일첨부합니다. 예제로 사용된 소스파일입니다.

웹표준을 정의하자면 문서를 구조(html),표현(css),동작(Javascript) 로 분리하는것입니다. 이를 위한 첫단계작업이 바로 Html 에서 표현을 위한 요소일체를 배제하는것입니다. 이런식으로 사이트를 관리하면. CSS를 수정하는 작업만으로 사이트 전체의 디자인을 바꿀수도 있습니다. 또 글을작성할때 복잡한 태그를 사용하지 않아 간편합니다.
얼마나 좋습니까? 웹표준 배우고 싶어지지 않습니까?

공모전 준비용 원고를 하려는데 주제를 어떻게 정햐야할지 도저히 감이 안잡혀서.. 컴퓨터의 도움을 얻고자 간단한 프로그램을 짜보았습니다.

이것은 바로 101 가지의 주제어를 입력해놓고 이중에서 임의로 3가지의 주제어를 뽑아주는 제비뽑기 프로그램입니다.

소스의 23번째줄부터 123번째줄까지의 배열문에 변수를 수정하여 주제어를 수정하거나 추가로 등록할수 있습니다.

다운로드

주제어를 뽑아봅시다. F5를 누르면 갱신합니다.

등록된 낱말들

링크에서 terget="_blank" 의 속성값을 부여하는것이 웹표준에 위배한다고 합니다.

정확히는 xhtml1-strict.dtd 의 규칙에 어긋납니다. 이는 이것이 사용자의 선택권한을 침해하기 때문이라는데요.

그것이 이해가 안간다는 사람도 있었지만.. 저는 수긍이 가더군요.

어떤 링크를 열때 그링크를 새창에서 열지, 그창에서 바로 열지, 새텝에서 열지는 사용자가 선택해야 한다는 것이죠. 시프트클릭은 새창. 가운대버튼은 새텝. 그냥클릭은 현재창. 으로 작동하는 링크가 바람직한 하이퍼링크 랍니다. 하지만 현실은 거의 대부분의 포털에서 제공하는 검색결과에 대한 링크는 그냥클릭 새창(혹은새탭) 가운대클릭 새탭 시프트클릭 새창이죠...

terget="_blank" 를 사용하지 않고 편법으로 자바를 써서 새창으로 띄우는 방법이 있긴 합니다만.. terget="_blank" 를 사용하지 말자는 규칙의 의도가 선택권한의 제한을 두지 않기위해서라는데... 이런 편법으로 다시 선택권한의 제한을 준다면 유효성검사를 통과하는것이 무슨 의미가 있나 싶기도 합니다.

저도 요즘은 클릭하면 무조건 새창으로 새탭으로 띄우는 하이퍼링크때문에 웹브라우징하다보면 어느순간 탭으로 가득차는 화면을 보개 되는경우가 많아. 매우 불편하게 여기고 있는중이라죠.

yahoo.com에 가보면 모든 하이퍼링크에 새창으로 띄우는 코드가 없더군요. 크로스브라우징도 이만하면 완벽하고.. 웹표준도 준수하는것 같고. 참 귀감이 되는 사이트 같습니다.

저 사실 만화가 지망생입니다. 웹 관련 개발자도 아니고. 그쪽에 관한 전공을 한적도 없습니다.
하지만 소싯적 컴퓨터좀 배운게 있어 정보처리기능사 정보기기운용사의 자격증은 가지고 있습니다.
그냥 이것저것 파고마는 얕은지식인지라 전문가들이 보기에 좀 아니다 싶은 면이 있을지도 모르겠습니다.
너그러이 봐주세요 ^^

요즘 CSS를 공부하는 이유는 크게 두가지인데요.

첫번쨰는 블로그스킨을 제 입맛대로 만들고 싶다는것이고..
두번째는 CSS를 사용한 웹에 보다 최적화된 만화의 틀이란것에 대한 연구 때문이라고 해두죠. 단순히 웹상에서보기편하게세로로긴 배열의 만화가 아니라.  웹상에서 움직이는 만화 라고 해둘까요. 간단한 GIF에니매이션을 추가할수도 있을것이고. CSS를 이용하여 좀더 동적이고 재미있는 화면을 꾸밀수 있을것입니다. 제가 아는 모 만화가는 플래시를 통한 구현을 생각하고 계시던데요. 솔직히 플래시는 웹표준도 아니고... 여러모로 접근성이 떨어지잖아요.;; 검색앤진에 노출도 안된다죠.. 뭐 제대로 구현하려면 충분한 공부가 필요하겠지만요..