콩바구니의 그림일기

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

예문

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

이 게임은 자바스크립트를 사용합니다. 자바스크립트를 사용하지 못하는 브라우저는 이 게임을 진행할수 없습니다.

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

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

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

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를 이용한 삼양라면 놀이를 보고 아이디어가 떠올랐습니다. 그것은 삼양라면 그림을 가지고 자바스크립트로 간단한 게임을 만드는것입니다.

게임설명

삼양라면 뽑기놀이

시원하고 얼큰한 대관령 황태라면

• 중량 : 115g
• 제품특징 : 황태 특유의 시원함과 얼큰한 국물 맛이잘 조화된 제품 양파엑기스 및 참깨분말을 면에 조미해 쫄깃하면서 고소한 면발이 특징. 황태와 콩나물, 무, 야채 등을 푸짐하게 넣어 깔끔 하면서 담백한 맛이 일품

국물없는 볶은 짬뽕간짬뽕

• 중량 : 140g
• 제품특징 : 국물없는 매콤한 해물맛의 볶음짬뽕 제품, MSG무첨가 제품으로 신선한 해물맛이풍부 하면서 매콤한 맛이 일품, 기존 비빔면류와 차별화된 프리미엄 라면

라면보다 더 맛있는 라면맛있는 라면

• 중량 : 115g
• 비고 : 겨우살이 추출물과 베타글루칸 등 기능성원료 첨가
• 제품특징 : 60여가지 풍부하고 신선한 재료의 '맛있는' 맛만을 모아놓은 프리미엄 라면
  MSG무첨가 제품으로 각종 건강지향성 재료에서 우러나오는 얼큰하면서도 매운 국물 맛이 일품

진한 육수맛삼양라면

• 중량 : 120g
• 비고 : 국내 최초(63.9.15) 라면으로서 미래의 라면모습을 제시함
• 제품특징 : 진한 육수맛이 함께 어우러져 부드러운맛의 극치를 이룸

고추 양념스프를 별첨한수타면

• 중량 : 120g
• 비고 : 고추 양념스프를 별첨하여 음미할수록 얼큰한 국물 맛을 즐기실 수 있음
• 제품특징 : 손으로 반죽한 것처럼 면발이 쫄깃하고 고춧가루를 별첨으로 넣어 각자의 기호에 맞추어 먹을 수 있는 제품

70가지 원료와 23가지 영양성분이 골고루 들어있는장수면

• 중량 : 115g
• 제품특징 : 곡류식이섬유 및 참깨분말, 겨우살이 추출물, 브로콜리,포고버섯,루이보스티 등 70가지의 정선된 원료를 첨가하여 칼슘,철,인 등의 23가지 영양분이 듬뿍 함유된 기능성 라면

구수한 된장맛이 그리울 때된장라면

• 중량 : 120g
• 제품특징 : 부드러우면서도 쫄깃한 면발에 몸에 좋은 전통 발효식품인 된장과 청국장을 첨가하여 구수하면서도 담백한 맛을내는 제품

깔끔하고 시원한 국물맛이 일품인바지락칼국수

• 중량 : 130g
• 비고 : 기름에 튀기지 않은 논후라잉(Non-Frying) 제품
• 제품특징 : 기름에 튀기지 않은 논후라잉 면(non-frying)으로, 진공포장하여 별도로 첨부한 바지락과 홍합, 멸치를 푹 우려 만든 국물맛이 조화를 이뤄 깔끔하고 시원한 바지락칼국수의 맛을 느낄 수 있는 제품

정통 중화짜장 요리의 맛을 살린짜짜로니

• 중량 : 140g
• 비고 : 새로워진 조리방법으로 인해 한층 더 깊은 짜장의 참맛을 느낄 수 있음
• 제품특징 : 고급 소맥분을 사용하여 면발이 쫄깃쫄깃한 중화풍의 고급면. 정통 중화짜장 요리의 맛을 살린 액상 볶음짜장 소스가 첨가되어 본격 고급짜장으로 창조된 제품

열무김치의 시원한 맛열무비빔면

• 중량 : 130g
• 비고 : 후레이크에 건열무김치를 50%이상 함유
• 제품특징 : 새로워진 열무비빔면.
  더욱 매콤하고 새콤해졌습니다.
  MSG를 첨가하지 않았습니다.
  무더운 여름, 잃어버린 입맛을 살릴 수 있는 제품으로 매콤하고 쫄깃한 맛이 일품. 후레이크 중 건열무김치를 50%이상 함유해서 열무비빔면 고유의 맛을 느낄 수 있는 제품

개운하고 얼큰한대관령 김치라면

• 중량 : 120g
• 비고 : 명실상부한 김치라면의 톱브랜드
• 제품특징 : 생김치를 진공포장하여 첨가하여 개운하고 얼큰한 맛을 내는 제품

쇠고기 육수의 진한맛쇠고기면

• 중량 : 120g
• 비고 : 북한동포 돕기운동의 일환으로 북한에 제공된 제품(97.6.24)
• 제품특징 : 기존의 쇠고기맛면에 스프의 쇠고기분말 함량을 5배 늘리고 우유를 첨가하여 부드러운 맛과 육수의 진한 맛을 증가시킨 제품

새콤하고 달콤한 맛스파게티

• 중량 : 150g
• 제품특징 : 새콤하고 달콤한 맛의 스파게티 소스에 쫄깃한 면발과 마카로니, 풍부한 야채를 더해 담백하고 깔끔한 맛이 일품인 제품

시원한 멸치국물잔치국수

• 중량 : 90g
• 제품특징 : 기름에 튀기지 않은 저칼로리(290Kcal) 제품.
  다시마,가쓰오부시 등을 이용한 담백하면서도 구수한 육수맛이 특징.
  면 위에 뿌려먹는 야채후레이크(고명)가 들어있어 진정한 잔치국수의 맛을 느낄 수 있는 제품. 無MSG

얼큰하고 시원한해물짬뽕

• 중량 : 120g
• 비고 : 고정적인 소비자를 확보한 제품
• 제품특징 : 얼큰하고 시원한 해물맛 짬뽕 라면 MSG무첨가 제품으로 기존 제품보다 더욱 얼큰하고 시원한 맛을 보강한 해물맛이 듬뿍담긴 라면

김치의 맛을 최대한 살린新김치라면

• 중량 : 120g
• 비고 :
• 제품특징 : 푸짐한 김치후레이크로 김치의 맛을 최대한 살린 제품으로 진한 국물맛을 느낄 수 있도록 했다.

면발이 쫄깃하고 얼큰한 맛이 일품인육개장

• 중량 : 120g
• 비고 : 이백냥에서 개선된 제품
• 제품특징 : 풍성한 양념과 얼큰한 맛이 잘 조화됨

기름에 튀기지 않아 깔끔한손칼국수

• 중량 : 100g
• 비고 : 기름에 튀기지 않은 논후라잉(Non-Frying) 제품
• 제품특징 : 손칼국수는 기름에 튀기지 않은 논후라잉(Non-Frying)공법을 통해 제조되었으며, 소맥분을 사용하여 면발이 쫄깃하고 분말스프와 후레이크가 잘 조화를 이뤄 전통 손칼국수 맛을 냄

쫄깃한 면발과 얼큰한 국물맛쌀라면

• 중량 : 120g
• 제품특징 : 쫄깃한 면발과 얼큰한 국물맛을 내는 고급스러운 봉지면으로 시장에서 유일한 제품(쌀 15% 첨가)

진한 사골 곰국맛이 일품인설렁탕면

• 중량 : 110g
• 제품특징 : 사골을 푹 고아 농축시켜 만들어서 진한 맛이 그대로 살아있으며 구수한 국물맛을 느낄수 있는 고급제품

면발이 더울 쫄깃쫄깃하고 부드러운감자라면

• 중량 : 117g
• 제품특징 : 감자라면은 감자가루와 감자전분으로 면을 만들어 감자특유의 맛과 향이 살아있는 제품으로 면발이 더욱 쫄깃쫄깃하고 부드러우며 버섯, 마늘, 건파 등 푸짐한 야채건더기로 국물맛을 내어 얼큰하며 개운한 맛이 특징

튀기지 않은 깔끔한 맛기름에 안튀긴면

• 중량 : 100g
• 제품특징 :기름에 튀기지 않아 느끼하지 않고 부드러운 맛이 특징. 된장,청국장을 사용한 구수하면서도 담백한 국물맛과 쫄깃한 면발이 조화를 이룬 제품.

사리전용사리면

• 중량 : 110g
• 비고 : 틈새시장 공략과 환경보호에 앞장선 특화된 제품
• 제품특징 : 스프가 없는 사리전용 면

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

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

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

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

ver 0.01 : 2008년 1월 27일

주요 업데이트 내용

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

ver 0.02 : 2008년 1월 28일

주요 업데이트 내용

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

ver 0.03 : 2008년 1월 29일

주요 업데이트 내용

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

ver 0.04 : 2008년 1월 30일

주요 업데이트 내용

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

ver 0.05 : 2008년 1월 30일

주요 업데이트 내용

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

ver 0.06 : 2008년 1월 31일

주요 업데이트 내용

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

ver 0.07 : 2008년 2월 3일

주요 업데이트 내용

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

ver 0.1 : 2008년 2월 4일

주요 업데이트 내용

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

ver 0.11 : 2008년 2월 8일

주요 업데이트 내용

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

이번에는 요즘 스킨을 꾸밀때 주로 사용하는 기법중 하나인. 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;
}

#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;
}

#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;
}

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

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

style.zip

여러버전의 익스플로러를 한 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

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

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

그럼 시작합니다.

흔히들 웹상에서 글을 작성할때 위지웍 에디터를 사용합니다. 그런데 그 위지웍 에디터가 문제가 되는것이 본문안에 표현을 위한 요소를 삽입한다는점입니다. 위지웍 에디터를 사용하여 특정문자의 색을 #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;}

웹표준.zip

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

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

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

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

주제뽑기.html

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

등록된 낱말들

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

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

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

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

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

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

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

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

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