콩바구니의 그림일기

오랬만에 새로운 스킨을 만들었습니다. 저번스킨에서, 스크립트 이곳저곳을 뜯어고치고, 디자인을 조금 손본 것입니다.

이 스킨의 특징은 다음과 같습니다.

스킨의 특징

웹표준을 준수합니다. 따라서, 파이어폭스, 사파리, 오페라, 구글크롬 등의 브라우저로 접속하시면, 제가 의도한 기능이 100% 구현 됩니다.
익스플로러는 조금 깨집니다... (그나마 익스플로러8은 좀 났더군요.그래도 완벽하지는 않습니다.)

이번 스킨에서 익스플로러 6 지원을 포기했습니다. 그렇더라도 익스플로러 6에서 접속이 불가능한것은 아닙니다. 컨탠츠로 접근에 무리없습니다. 단지 그뿐입니다.

자동목차 생성기능

• 지원 브라우저 : (ie6 50%, ie7, ie8, firefox, safari, opera, chrome)

오른쪽 상단을 보면  요로코롬 생긴 버튼이 있습니다. 제목태그인 <H1>~<H6> 까지의 태그에 대한 정보를 자바스크립트에서 읽어들어서, 그 INDEX 를 생성하는 기능입니다. 이 버튼을 누르면 페이지 전채의 구조를 한눈에 볼수 있습니다.

 <- 이런식의 목차가 생성됩니다. 목차안의 내용은 전부 책갈피 기능을 하는 하이퍼링크라서, 원하는 위치로 바로 이동할수 있습니다.

익스플로러6이상 작동합니다. 

Color Theme

• 지원 브라우저 : (ie8, firefox, safari, opera, chrome)

5가지 색상의 태마로 변신합니다.

오랜지, 청색, 분홍색, 회색, 녹색, 무작위 선택의 6가지 옵션이 있습니다.

익스플로러8 이상에서 정상작동합니다.

풍선도움말 

• 지원 브라우저 : (ie7 50%, ie8 80%, firefox, safari, opera, chrome)

alt 나 title 속성을 읽어와서 말풍선으로 나타납니다. 팬시툴팁 이라고 할까요.

title 이 있으면 이렇게 나오고,

alt 가 있으면 이렇게 나옵니다.

익스플로러7이상 동작합니다. 익스플로러 7에서는 말풍선의 레이아웃이 조금 깨지는 현상이 보입니다. 좌표도 많이 어긋납니다. 익스플로러8에서는 가로좌표가 어긋나는 현상이 있습니다.

자동각주 기능

• 지원 브라우저 : (ie6 80%, ie7, ie8, firefox, safari, opera, chrome)

<abbr title="용어설명">전문용어</abbr>

본문중에 이러한 마크업이 있으면, 그것을 정리하여 하단에 각주를 그 위치로 가는 하이퍼링크와 함깨 생성합니다. 이 기능은 익스플로러 6에서도 작동합니다.

사이드바 접는 기능

• 지원 브라우저 : (ie7, ie8, firefox, safari, opera, chrome)

이렇게 생긴 버튼을 눌러서 사이드바를 접거나 펼칠수 있습니다. 익스플로러7에서는 잘 작동하지만, 익스플로러8에서는 한번접히면 다시 안펴지는 버그가 있습니다. 아마 배타버전이라서 그런듯 합니다. 호환성뷰모드로 가서 펼치면 접혀진 사이드바를 다시 펼칠수 있긴 합니다. 이 기능은 익스플로러6이하는 지원하지 않습니다.

미투데이 포스팅 지원

• 지원 브라우저 : (ie6, ie7, ie8, firefox, safari, opera, chrome)

미투데이에서 블로그로 보내온 글에 포함된 하이퍼링크의 대상을 동적으로 생성된 IFRAME에 담아서 띄우는 기능이 있습니다.

익스플로러6이상 지원합니다.

테이블 정렬

• 지원 브라우저 : (ie6, ie7, ie8, firefox, safari, opera, chrome)

스프링노트에서 만들어진 테이블 (class 값이 "datatable"인 colspan, rowspan 이 없는 table)을 TD의 값에따라 오름차순 혹은 내림차순으로 정렬하는 기능이 있습니다. 익스플로러6이상 지원합니다. (관련글 : 자바스크립트 테이블 정렬)

다운로드

• 택스트큐브용 : kongbaguniSkin9.zip

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

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

예문

지난번에 만들었던것 에서 여러가지 요소를 추가하여 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. }

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

오늘은 날씨도 꿀꿀하고, 비도 오고, 날도 쌀쌀하고 해서 아르바이트도 하루 쉬고, 집에서 그림이나 그렸습니다. 이런 그림인데요. 옷은 일본 패션잡지를 참고해서 그렸다지요. 제법 괜찮게 완성된듯 합니다.
활발한성격의 언니와, 내성적인 동생 이라는 전형적인(?) 쌍둥이 자매라는 설정을 해봅니다.

여름밤 숲속의 여우 입니다.사실 와콤 튜토리얼 콘테스트에 제출할려고 구상했는데, 주제가 여름환타지 여서, 구미호 그림을 그리고자 했지요. 그래서 달도 2개그리구요. 그랬는데, 막상 튜토리얼을 만들자니, 그림그리는 틈틈히 스샷을 찍어 정리해야하고, 그것에 대한 설명문도 작성해놔야하고.. 아무튼 그림그리는데 집중할수가 없어서 (맥이 자꾸 끊긴달까요) 튜토리얼 작성은 포기하고, 그냥 그림을 완성하는데만 전력을 다했습니다. 

그나저나 배경까지 들어간 일러스트는 굉장히 오랫만에 그려보네요.. ㅎㅎ

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

오랬만에 스킨만들어 배포하네요.ㅎㅎ

티스토리, 테터툴즈에서 사용가능한 스킨입니다.

이 스킨의 특징은 다음과 같습니다.

스킨의 특징

자동으로 생성되는 목차

자바스크립트가 제목태그를 검출하여 목차를 만들어줍니다. 익스플로러6이상. 파이어폭스. 사파리. 오페라. 에서 정상작동합니다.

간단한 라이트박스

가볍고 빠른 라이트박스 기능을 추가했습니다. 이미지를 클릭하면 원래크기의 이미지가 떠오릅니다.

출처 표시기능

인용구문에 대한 마크업인 <blockquote> 에 cite로 출처를 적으면 해당링크가 생성되는 기능이 있습니다.

마크업 사용예

1. <blockquote cite="출처">
2. <p>인용문</p>
3. </blockquote>

abbr 지원

각주를 사용할수 있습니다. 본문에 다음과 같이 마크업을 사용하면 하단에 그것에 대한 설명문이 자동으로 생성됩니다.

1. <abbr title="설명">어려운용어</abbr>

사이드바 접기

사이드바를 접고 펼수 있습니다.

모니터 해상도지원

모니터의 해상도에 상관없이 어떤 해상도의 모니터에서라도 블로그의 내용을 보는데 불편함이 없도록 고려했습니다.

스킨 미리보기

http://kongbaguni.mireene.com/style2/test.html

다운로드

• kongbaguniSkin8.zip
• kongbaguniSkin8-simple.zip

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

삼양라면 구매운동

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

최근 삼양라면 구매운동이 있지요.
저도 이 구매운동에 동참하고자 뭔가 할수있는일이 없을까 궁리하다가. 애니메이션 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
• 비고 : 틈새시장 공략과 환경보호에 앞장선 특화된 제품
• 제품특징 : 스프가 없는 사리전용 면

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

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

메가TV CF공모전에 작품을 냈었는데. 그만 우수상을 받아버렸습니다. 상금이 300만원인데, 제세공과금 22% 제하고 받은 234만원을 작업을 같이한 지인과 반으로 나누니 117만원입니다. 저는 이 작업에서 그림만 그렸습니다. 

액정타블랫을 지르고 돈이 없어서 이번달 통신비를 납부하지 못해 곤란하던차에 이렇게 돈이 들어오니 참 다행스런 일입니다.

이제 상금도 들어왔고. 해서 공모전에 제출했던 작품을 살며시 올려볼까 합니다. 

아래 그림들은. 스케치업에서 배경을 그리고, 포토샵에서 편집을 한후, 바로 인물을 그려넣은것 입니다.

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

Download :kongbaguniSkin7.zip

콩바구니 스킨 7.0 입니다. 6.0 버전의 것에서 레이아웃을 손보고, 큰 그림을 없애서 여러모로 무거웠던 전번스킨보다 많이 가벼워졌습니다.

통상 25번째 스킨이네요. ㅎㅎ

본 스킨의 특징은 다음과 같습니다.

스킨의 특징

웹표준을 준수합니다.

이 스킨은 xhtml1.1 을 준수합니다. w3c의 유효성검사도 통과했습니다.

파이어폭스, 사파리, 오페라 에서 접속하시는것이 좋습니다. 물론. 익스플로러에서 접속하셔도 큰 문제는 없습니다.

새창띄우기를 금지합니다.

스킨상에서 대부분의 링크의 새창띄우기는 없앨수 있지만. 댓글을 쓰거나 할때 생성되는 링크가 문제입니다. 티스토리측에 문의해본적도 있었지만. 부정적인답변만 들었습니다. 그래서 어쩔수없이 자바스크립트를 사용하여 강제로 새창띄우기를 지우는데 이른것입니다. 하지만. 익스플로러가 setAttribute 를 지원하지 않는 관계로, 익스플로러에서는 해당링크가 새창띄우기로 작동하게 됩니다. 따라서 이 기능은 파이어폭스, 사파리, 오페라에서 작동합니다.

새창띄우기 링크는 사용자의 선택성을 저해하기때문에 (해당링크를 새창으로 띄울지, 현제창에서 띄울지, 새탭으로 띄울지 선택할수 없습니다.) 저는 매우 불편하다고 생각하고 있습니다.

에드센스를 위한 단을 마련했습니다

skin.html 의 515번째 줄을 보면

<!--  <div id="ed">
앞뒤의 주석을 제거한후 여기에 광고를 넣습니다.
</div>
-->

이런 내용이 있습니다. 앞뒤의 주석표시 <!--, --> 을 제거하고, 광고코드를 삽입하면 됩니다. 수정없이  그대로 사용하시면 이 스킨은 2단 레이아웃으로 작동합니다.

자동목차생성 기능

6.0버전에서 투입했던 자동목차생성 기능이 이번스킨에도 작동합니다. h1~h6 태그로 재목을 넣으면 자바스크립트가 그 재목을 읽어서 해당위치로 바로가는 링크를 만듬니다. 좌측 상단의 open content 버튼이 바로 그것입니다.

PictureBox

본문에 그림이 있으면 그것을 모아서, 사이드바의 상단에 보여주는 기능입니다. 이번버전에는 전부 6개까지 무작위 추출하여 보여주게 됩니다.  

낙장불입

손님은 한번 단 댓글을 수정하거나 삭재할수 없습니다. 이른바 낙장불입 인셈입니다. 미투데이의 낙장불입정책에 큰 감명을 받아서, 블로그에도 적용해본것이라죠. 

미투데이 포스팅을 위한 스타일 지원

미투데이의 블로그 글배달을 받으면. 스킨에서 그것을 이쁘게 꾸며줍니다. 스프링노트의 포스팅을 위한 스타일도 준비되어있습니다.

스킨 미리보기

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

1. 
   1. 어느날 구름과 해님이 만났어요.
   2. 해님아 마침 잘만났다
   3. 구름아 안녕
2. 
   1. 구름은 해님에게 결투를 신청했답니다.
   2. 결투하자!
3. 
   1. 저기 오는 여행자의 옷을 벗기는 게임이다. 좋지?
   2. 좋아
4. 
   1. 구름은 자신의 특기인 바람으로 여행자의 옷가지를 날려버리고자 했어요
   2. 내 바람이면 저런 옷쯤 날리는거야 식은죽먹기지!
5. 
   1. 헉헉.. 헉헉.. 어떠냐 내 바람이.. 헉 헉 입은옷따위 다 날라갔을걸
   2. 안됐지만 하나도 안날아갔네
6. 
   1. 하지만 실패했습니다. 바람이불자 여행자들은 옷이 날아가지 않도록 더 옷을 더 꼭 껴입었거든요.
   2. 아니. 진짜 하나도 안날아갔네? 오히려 옷을 더 꼭 껴입었잖아? 이럴수가!
7. 
   1. 이제 해님의 차례입니다.
   2. 내 실력을 보여주지
   3. 햇볕은 쨍쨍 모래알은 반짝!
8. 
   1. 후후후
9. 
   1. 해님도 실패했답니다. 여행자들이 오히려 옷을 더 입었기때문에 구름의 승리네요.
   2. 날이 더 더워지거든. 두꺼운옷을 더 껴입으시오.
   3. 이럴수가
   4. 아싸 이겼다

오픈켄버스로. 한 2시간 그렸나요... ㅎㅎ

이벤트파일 다운로드 : 026.oe4

그리는 과정

아래는 포토샵으로 간단한 효과를 줘본것입니다.

일단은 커브값 만 조절했습니다.

밑그림을 스마트 오브젝트로 만들고, 거기에 필터링을 적용합니다. 이렇게하면 원본이 상하지않기때문에 한번적용한 필터를 지우거나 취소하거나 수치를 바꿀수 있어 편리하더군요.

가우시안블러 4.6px opacity:64% mode: normal

가우시안블러 6.6px 66%  mode: Hard light 

다른그림들

A3용지에 스케치하고 팬터치한그림입니다만. 팬선이 별로.. 맘에 들게 나오지 않았습니다. 연습부족입니다. ㅠㅠ

이것은 페인터에서 스케치하고 포토샵에서 날림색칠한것 입니다. 타블렛에서 팬터치하기 어렵더군요. 역시 액정 타블랫이 필요하다고 생각하는 저였습니다. 사고싶은마음은 굴뚝같지만... 근데 가격의 압박때문에 손가락만 빨고 있다지요ㅠㅠ

방구석폐인. 일까요?

이벤트파일 다운로드 : 027.oe4

이벤트파일 다운로드 : 028_마녀.oe4

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

달래는 삼성제국에서 제일 돈이많은  삼성재단 회장의 외동딸이다.  달래는 검은고양이 예삐를 늘 어깨에 얺고다니며. 전용 운전사 돌쇠가 크고 검은 리무진으로 달래의 통학을 돕고있다.  태풍이 부는 어느날. 궂은날씨에도 불구하고 학교에 가던 달래일행. 라디오에서 태풍경보 제난특별방송을 하고있다.  갑자기 차창앞으로 현수막천이 날아와 창문을 가려 운행을 할수없게 되자. 운전사 돌쇠는 차를 새우고 현수막을 치우기위해 차에서 내린다. 그순간 강력한 돌풍이 불어와. 달래와 검은고양이 예삐가  탑승한 검은 리무진은 하늘멀리 날아가버린다. 멀리 달래의 비명소리.

달래가 탄 리무진이 떨어진 곳은. 얼핏 조선시대 같지만. 사실 조선은 아닌 국가의  어느마을. 많은 선행을 배풀어 마을사람들의 존경과 선망을 한몸에 받고있던 어느 성직자의 머리위였다. 성직자는 자동차에 깔려 즉사했고. 낙하에 따른 물리적 충격으로 달래도 정신을 잃었다. 마을사람들은 갑자기 하늘에서 떨어진 검은상자를 이해할수 없었지만. 성직자가 죽은것은 큰일인지라 큰 소동이 났다. 관헌에서 포졸들이 출동하여. 검은상자를 둘러쌌고, 포도대장이 사건을 수사하기위해 파견된다.

한편 정신을 잃은 달래는 꿈속에서 악마를 만단다. 달래가 타고있던 자동차에 꼴보기싫은 성직자 한명이 죽었다며.  달래에게 감사의 표시로 루비반지를 주고는, 잘간직하라고 충고한다. 이윽고 달래가 정신을 차리고. 자신의 뺨을 햟고있던  검은고양이 예삐를 평소처럼 어깨에 얺고.  충격으로 반쯤 고장난 차문을 어렴사리 열고 밖으로 나와보니. 날이저물어 밖은 밤이였고. 보초서던 2명의 포졸중 한명은 자신을 보고 놀라 자빠져 실신을하고,  한명은 "귀 귀신이다!" 외치면서 걸음아 나살려라 도망을 갔다. 달래는 상황을 알수가 없었다.   

5분만에 달래와 예삐는 조총을 든 수십명의 포졸에 포위당하고, 포도대장이 "사람이오? 귀신이오? 사람이면 이름을 대고 귀신이면 물러서시오!" 라고 소리치는것이다.

달래가 뭐라 말하기도전에. 포도대장은 달래를 포박하기위해 달려들었고.  삼성제국 최고의 무도가에게 호신술을 전수받은 달래였지만. 포도대장의 무술실력은 당하내지 못하여 결국 포박당하고 만다.

괴이한물체가  하늘에서 떨어져 성직자를 죽였고. 그 물체에서 괴이한 차림의 소녀가 나왔다는 사실은 하루만에 조정에 보고되었고. 기이한 현상이라면 사족을 못쓰는 임금이 궁금해 죽겠다며 당장 그 소녀(달래)를 궁으로 압송하라 명한다. 궁으로 압송당하던 달래는. 꿈에 만난 악마가 준 반지가 실제로 손가락에 끼워져있음을 보고 놀란다. 그것에 손가락을 대니. 그것의 사용법이 머리속에 들어왔다. 이것은 시리얼번호 343번의 악마의 반지로. 이것을 사용하면 다른어딘가로 순간이동할수있다. 거리제한은 100미터이내고, 육안으로 식별하지 못하는 위치로는 이동할수 없다. 한번발동후 30초동안은 제사용불가능. 사용횟수에 제한 없음. 달래는 그 악마의 무기를 사용하여 탈출에 성공한다.

달래의 자동차에 깔려 죽은 성직자의 동생인 도마 김시습 이라는 자는. 달래가 고의로 형을 죽인것으로 알고 달래에게 원한을 품는다. 종교에 귀의한 몸이지만. 형님을 죽인 간악한 마녀를 용서할수 없다고 다짐하는 그는. 달래를 잡아 죽이기위해 추적행을 개시하고.

달래는 조정에의해 현상수배가 걸렸다.

달래는 동구밖길에서  노래를 잘부르고 싶은 도깨비 꺽쇠를 만난다. 우락부락하고 덩치큰 꺽쇠는 대단한 음치에 소심한성격이다. 우연히 달래가 노래하는것을 들은 꺽쇠는. 달래에게서 노래잘부르는법을 배우기위해 달래를 따라나선다.

울창한숲을 지날때. 달래. 예삐. 꺽쇠는 추락한 우주선을 발견한다. 우주선 안에는.  은빛의 금속피부를 가진. 안드로이드 소녀 미리네가 있었다. 시간여행중 이별에 불시착했다는 안드로이드는. 자신의 주인이 행방불명이라고 한다. 주인을 찾을 단서를 찾기위해 미리네는 달래일행을 따라간다.

깊은 산속을 지나는중. 호랑이 한마리가 나타난다. 달래는 옜이야기를 떠올리고는. "곳감이야!" 소리친다. 사실 이 호랑이는 곳감을 무서워하는 호랑이였다. 그밖에도 무서운게 많았는데. 옥수수도 무섭고. 찐고구마도 무섭고. 꿀밤도 무섭더라는것이다. 달래는 참 기가막혔다. 호랑이는 자기가 무서워하는것을 극복하기위해. 달래 일행을 따라간다.

악마가 건내준 반지가.  조선의 성직자를 토벌할것을 명하고 있었다. 이미 반지를 한번 사용했으므로. 그 명령은 벗어날수 없다. 조선에는 두명의 성직자가 있는데. 한명은 달래의 차에 깔려 죽었으므로 한명이 남았다. 달래는 남은 성직자 한명.  차에 깔려 죽은 성직자의 동생을 죽여야 한다.

아무리 그래도. 자신의 목적을 위해 착한일을 하는사람을 죽여야 하나 하는 의문에 망설이는 달래에게 반지는 그 성직자의 추악한 일면을 편집 짜집기하여 보여준다. 달래는 그 영상을 보고 성직자 도마 김시습을 증오하게 되었다.

반지가 이끄는데로 여행을 하여 결국 도착한곳은 대성당이였다. 성직자가 있는 대성당은. 경건하고, 엄숙하다.  달래일행은 성당에서 은촛대와 성모상을 발견하기는 하지만. 그순간에 성당의 모든 문이 닫혀버린다.  순식간에 수백명의 신도들이 달래일행을 애워싸고. 그들이 성경을 봉독하자. 달래일행은 시끄러워서 도저히 참을수가 없었다. 이때 도깨비 꺽쇠가 나서서 큰소리로 노래를 부른다. 대단한 음치의 그노래를 들은 신도들은. 귀를 감싸고 괴로워하다 기절하고, 달래와 호랑이도 기절했다. 성직자만은 안전했는데. 그는 귓구멍에 귀마게를 하고 있던것이엿다.

성직자는 품에서 핸드건을 꺼내. 기절한 달래를 겨누었다. 방아쇠를 당기는 순간  미리네가 피지컬 실드를 쳐서 총알을 튕겨낸다.

정신을 차린 달래는. 겁쟁이 호랑이가 성직자의 주의를 끄는동안. 반지를 사용하여 성직자의 등뒤로 이동한후. 성직자를 살해하는데 성공한다.

성직자가 죽자. 달래일행은 은촛대를 갖고서.  반지가 이끄는 길로 걸어간다.

반지가 이끄는 길의 끝에는 악마의 성이 있었다.

악마의 성안. - 무섭게 보이는 커다란 흉상의 얼굴이 말할 때 마다  움직이고 거칠고 우렁우렁한 목소리가 들린다. 그앞에 달래 일행은 두려움에 떨고 있다. 마중나온 악마에게 모두 제각기 소원을 말하지만. 악마는 귀담아 듣지 않는다. 다들 실망하고있는 가운데. 검은고양이 예삐가 커텐을 젖힌다. 커텐 뒤에는 작은 꼬마아이가 음성변조 마이크에 대고 이야기 하고 있었다.  꼬마악마는 도깨비에게 노래잘하는 비법 이 적힌 책을 선물하고. 외계에서 온 안드로이드에게는 표창장과 똑딱시계를 주고. 주인은 이미 죽었다는 비보를 전한다. 호랑이에게는 훈장을 준다. 달래의 소원은 집으로 돌아가는것. 악마는 만월의 밤 반지를 사용하면 집으로 돌아갈수 있다고 말한다. 모두들 환호성과 함깨 만세를 외친다. 단 주인을 잃은 안드로이드 미리네만은 침울한 표정이였는데. 달래는 그런 미리네를 그냥 둘수 없어 위로의 말을 전했다.  미리네는 그런 달래의 마음씀씀이에 감동해. 달래를 주인으로 섬기겠노라고 고백했다. 사실 처음 만났을때 부터 달래를 좋아했던 미리네였다. 달래는 미리네에게 주인님은 낮간지러우니 언니라고부르라고 한다.

드디어 만월의 밤. 달래는 가슴에 훈장을 달았지만 여전히 겁쟁이인 호랑이와. 여전히 음치인 도깨비 꺽쇠와 포옹을 하고 일행이 지켜보는 가운대 달래는 반지를 사용했다.  드디어 집에 돌아간다는 사실이 기뻤지만. 그간 모험을 하면서 정들었던 친구들과 해어질것을 생각하니 한편으로는 슬프기도 한 달래였다. 미리내와 양손을 깍지껴 맞잡고. 달래는 고향으로 돌아가기 위한 의식을 행했다.

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

Download: kongbaguniSkin6-goldFish.zip

• 콩바구니스킨 2008년 3월차 버전입니다. 이스킨은 티스토리, 테터툴즈, 텍스트큐브 에서 사용가능합니다.

• 이스킨의 특징은 다음과 같습니다.

  • 낙장불입 손님은 댓글을 달면 수정, 삭재를 할수 없습니다. 댓글을 달때 신중하게 생각하고 달자는 켐페인이랄까요? 
  • 동적으로 생성되는 목록오른쪽 상단에 목록열기 버튼이 있습니다. 이것을 누르면 본문의 제목태그를 검색하여 만든 바로가기 링크목록 이 열리게 됩니다. 목차 인셈입니다.
  • PictureBox 본문에 그림이 있는경우 그중 몇장을 무작위로 뽑아서 그것의 썸네일을 화면의 오른쪽 하단에 배치하는 기능입니다. 그림을 클릭하면 라이트박스로 원래크기의 그림이 뜨게 됩니다.
  • 움직이는 태그구름 태그구름이 움직입니다. 태그구름이 움직이는 방향과 속도를 조절할수 있습니다. 익스플로러에서는 작동하지 않습니다.
  • 움직이는 카테고리 카테고리에 마우스가 올라가면 간단한 애니메이션 효과가 나옵니다. 이것역시 익스플로러에서는 작동하지 않습니다.
  • 멀티백그라운드 CSS3스팩인 멀티백그라운드가 적용되었습니다. 이효과는 아직은 사파리에서만 사용가능합니다.
  • 라이트박스2.0  라이트박스 2.0을 티스토리블로그에서도 사용가능합니다. 티스토리에서 제공하는 라이트박스 플러그인은 이것을 위해 꺼주셔야 합니다.
  • XHTML1.1  이 스킨은 웹표준을 준수합니다.
  • 새창띄우기 금지 새창띄우기 링크는 사용자의 선택성을 제한하는 이유때문에 바르지 않다고 생각합니다. 새창띄우기 링크로 인해 사용자는 해당링크를 현재창에서 띄운다는 선택을 할수 없게 됩니다. 바람직한 링크는 사용자가 그 링크를 현재창에서 볼지, 새탭에서 볼지, 새창에서 볼지 선택할수 있는 링크입니다. <a href="주소">링크이름</a> 로 충분합니다. 그런데 티스토리블로그에는 스킨상에서 새창띄우기를 완전히 없에는것이 불가능합니다. 댓글에 URL 주소를 입력했을경우 나타나는 링크가 그러한데요. 이것의 새창띄우기 속성을 자바스크립트로 제거하였습니다.
  • 주인장 코멘트 식별 티스토리블로그에서 제공하지 않는 기능인 주인장 코멘트 식별 기능을 자바스크립트로 구현. 티스토리에서도 주인장의 코멘트를 구별할수 있게 하였습니다. 이 기능을 사용하기 위해서는 images/java.js 파일의 189번째줄에 다음 밑줄친 부분을  자신의 블로그 주소로 수정해주셔야 합니다.
  1. if (temp[0].parentNode.childNodes[1].childNodes[0].getAttribute("href") == "http://kongbaguni.tistory.com")

스킨 미리보기

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

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

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

최근 지하철에서 크로키한그림입니다.

지하철에서는 세부묘사가 어려운관계로. 대충 특징만 잡고, 나중에 차분하게 덧그린그림도 있고. 그냥 지하철에서 완성해버린 그림도 있습니다.

밑그림에 검정색 모나미 153볼펜을, 체색에 어린이용 자동 색연필 검은색, 빨간색, 녹색, 빨간색 네임펜을 사용했습니다. ㅎㅎ. 

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

스킨 만들면서 사용하기위해 그린 일러스트입니다. 페인터로 그린후 포토샵에서 마무리 한것이라죠.

금붕어와 인어공주라는 주제였습니다.

 이나즈마 킥 입니다. 적당히 번역해서 천둥번개 내려찍기 일려나요? 음. 이제보니 표정이 좀 그렇네요. ;; (사실 이거 모니터 위에 놓여있는 피규어 보고 그린거에요..^^)

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

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

첨부파일을 다운받아 압축을 푸신후 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도입.

슈팅쯔꾸르로 게임을 만들어볼까 해서. 거기에 사용될 케릭터 이미지입니다. 몇시간 삽질끝에 화면에 띄우고 움직이는것까지는 성공했습니다만. 미사일 발사에서 막히네요. ㅠㅠ 이게. 설명서가 없어서 말이죠. 이것저것 건드리면서 해봐야 하는지라.. 은근히 어렵군요. ㅠㅠ

웹표준을 준수하는 콩바구니 티스토리스킨. 2008년 1월자 버전입니다. 어느덧 5.0이네요. 뭐 제맘대로 붙인 버전이긴 하지만요. ㅎㅎ
이번 테마는 녹색 피아노 입니다.ㅎㅎ 레이아웃은 지난번의 그것과 크게 다르지 않습니다.
이 스킨은 파이어폭스. 사파리. 오페라. 넷스케이프. 등에서 좋구요. 익스플로러는 7 이상에서 90%. 익스플로러6 이이나 익스플로러 5.5는 70%정도 익스플로러 5 이하는 접속불가능입니다. 각종 브라우저 에서 테스트를 해봤는데 결과는 다음입니다.

테스트 결과보기

Firefox 2

Firefox 3

Netscape 9

Opera 9.23

Safari 3

Explore 7

Explore 6

Explore 5.5

Explore 5

Explore 4

kongbaguni-piano5_0.zip

스킨 다운로드

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