매번 링크 적을 때마다 귀차니즘 이었는데 .. 이거 딱이네..

스크립트로 페이지를 이동시키는 방법은 링크에 href="링크주소"를 걸어주는 방법보다 중복링크가 많을때 상당히 유용합니다.
js파일에 해당링크를 지정해두고 필요할때 꺼내 쓰기만 하면 되니까요 :)
실로 플래시메뉴를 만들때 이같은 방법으로 링크를 지정하면 플래시 파일의 수정없이 스크립트 파일만 간단히 고칠 수 있어 편리합니다.

아래는 문자를 이용하는 방법과 숫자를 이용하는 방법 2가지 예제가 있습니다.
어느것을 쓰셔도 무방하지만 숫자를 이용하는 방법에는 변수가 항상 숫자여야한다는 점을 주의하셔야합니다.

숫자를 이용하는 방법

문자를 이용하는 방법

오늘 내일 1.0으로 이전하려구 새로운 스킨을 만들고 있는데, ep6번인가?
아마 거기까지 만들고 그후에도 쭈욱 사실 작업은 하고 있었는데.
딱히 머라할만한 디자인 컨셉이 안나와서
만들다 말고 시안작업 좀 하다 말고 한게 여러개 있어.
그 작업을 할때마다 ep07, ep08붙여가면서 작업을 했는데.
다 넘어가버렸고. ep10이 되버렸어.
태터센터에 보니 대세는 블랙계열인가 싶어서.

이름하야.. Anduepoir
엘레가앙슈우 하고~ 앙듀쁘아 하고.. =_=

나두 검정색으로 작업하고 있어.
시안은 다 나와서 psd파일은 됐구.
이제 코딩을 해야하는데.
아마 ep07스킨이, 배포는 하지 않았는데 div를 이용한 무채색 계열 스킨이 있거덩.
div 막상 해보려하니 머리깨지겠더라구.
그냥 좀 복잡하더라도 딱 보면 위치 파악이 되는 table이 아직까진 더 편해.
일단 코딩작업에서 div를 쓰긴하겠지만 아마 코멘트 부분과 방명록 부분은 심히 복잡해져나서 table을 쓸수밖엔.
그게 내겐 더 작업시간을 단축시키는 방법이거덩.

그나저나 1.0.3 태터 나왔는데, 방명록/댓글이 전혀 달수 없는 버그가 있어. 이래서야 어디 1.0으로 가겠나.

=서론
지금껏 7개 정도의 태터 스킨을 만들어보았습니다.
태터를 시작한지는 불과 두어달 밖에 되지 않지만, 처음 태터를 설치하고 태터센터의 스킨게시판을 돌아다니다가,
문뜩 나만의 스킨을 만들어보고 싶어졌습니다. 무턱대고 스킨 제작에 들어갔고 3일여만에 하나의 스킨이 만들어졌습니다.
그게 바로 지금의 태터센터에 올린 ep02스킨 yellowtree 입니다.
해당 스킨을 수정해보신분들은 아시겠지만 소스 정리가 거의 안되어있다는걸 보셨을겁니다.
그후 대략적인 구조라든지, 제작방법을 어느정도 파악하고 나서는 디자인만 잡히고 나면 그외의 코딩에서 치환자적용까지는 하루면 딱이었습니다.

거창하게 제목을 붙이긴했지만 사실상 이 글이 어떠한 도움을 줄수 있을런지는 알수 없습니다.
다만 저처럼 자기만의 스킨을 자기만의 디자인을 위하고 싶은 분들에게,
조금이나마 제작시간을 단축하는데 기여될수 있다면 좋겠지 하는 생각을 가져봅니다.

어디까지나 이건 단순한 가이드 일뿐 제가 제작하는 방식을 설명하는것이므로 정석은 아님을 먼저 말씀드립니다.
따라서 이에 대한 질문이나 그외의 의견을 제외한 태클성 댓글은 삼가해주시길 부탁드립니다.
=내용
그냥 봐도 어느 부분에 어떠한 내용이 들어갈 것인지는 대략 짐작이 가지요.
이전에 우선적으로 알아두어야할것이 태터에서 쓰이는 치환자들 입니다.
이는 태터 doc 페이지를 참고하시기 바랍니다.
http://tatterstory.com/doc/30

치환자에 설명을 드리자면, 태터스킨에서는 링크나 내용을 치환자로 대체합니다.
예를들어 메뉴중 블로그의 초기 페이지로 이동할때 [a href=index.php]처음[/a]
이런식으로 사용을 합니다.
이를 태터에서는 [a href=[ ##_blog_link_## ]]처음[/a]
이렇게 사용을 합니다. 이렇게 함으로 [##_blog_link_##] 부분이 가변적으로 변할수 있으니 활용이 더 쉽게 됩니다.
[##_blog_link_##]라는 부분이 보여지면 태터에서는 DB의 [##_blog_link_##]에 해당되는 내용을 불러와 출력해주게 되는것입니다.


위와 같은 디자인이 완성된후엔 전체적인 레이아웃을 코딩(html작업)을 하면 됩니다.

다만 주의할 사항이 있습니다.

==이미지보기==

태터에서는 header 부분에 있다고 가정하는 메뉴들(태그, 위치로그, 방명록 등)을 클릭했을 때
보여주는 특정영역을 확인하게 됩니다.
예를들어 방명록 페이지에 들어갔을 때에
content부분에 방명록 부분을 뿌려주게 되는데
이 때 작동하는부분의 지정은 로 시작해서 로 끝나는 영역이 보여지게 되는것입니다.
이는 다른 메뉴들이나 sidebar의 각각의 컨텐츠들도 이 형식으로 제어합니다.

다시말해 contents 영역부분에는 위의 스킨 이미지처럼
검색했을때 보여주는 글 - 댓글 부분
위치로그 출력부분,
공지사항 출력부분,
태그 출력부분,
방명록 출력부분,
본문 출력부분
이 모두 들어가게 됩니다.

이는 각각의 출력영역을 표시해주는 치환자 안에 들어가게 됩니다.
< s_tag >
태그출력부분
< /s_tag >

방명록 출력부분
< /s_guest >

이렇게 있다고 하면 태그 메뉴를 클릭해서 보여주는 페이지에서는
< s_tag >
태그출력부분
< /s_tag >

만 작동하고
< s_guest >
방명록 출력부분
< /s_guest >
의 부분은 보여지지 않게 됩니다.

이 처럼 전체 본문은 < s_t3 > 와 < /s_t3 >로 감싸집니다.
위의 header, content, sidebar, footer모두 s_t3 안에 들어가게 되는겁니다.

반복되는 구문영역은 table이나 td 혹은 div로 둘러주시면 좋습니다.
예를들어 sidebar의 태그클라우드 출력부분을 설명하자면.
<table>
   <tr>
       <td>
           <s_random_tags ><a href="[ ##_tag_link_## ]" class="[ ##_tag_class_## ]">[ ##_tag_name_## ]</a>&< /s_random_tags>
       </td>
   </tr>
</table>
이런식으로 둘러주시면 됩니다.
혹은 table을 div로 해주시면 더 간단해지죠.
<div>
  <s_random_tags ><a href="[ ##_tag_link_## ]" class="[ ##_tag_class_## ]">[ ##_tag_name_## ]</a>&< /s_random_tags>
</div>

한가지,
특정 이지윅에디터나 특히 나모5.0 버전대 웹에디터를 이용하시는 분들은 작업시 치환자들이 임의로 변경되버리는 경우가 발생될수 있습니다. 특히 하단 페이지리스트 부분의 s_paging 의 변경이 잦습니다. 정확한 이유는 알수 없으나 이지윅에디터 프로그램 이용시 참고하세요.

=컨텐츠별구현=
전체적인 메뉴에대한 구현방식 설명입니다.
< s_t3 >
< /s_t3 >
이 사이에 쓰이는 내용은 태터의 모든 폼이 작동되게 됩니다.
따라서 이 치환자로 둘러싸인 내용안에 모든 태터의 치환자들이 들어갑니다.

<!--글검색결과출력부분-->        
< s_list >
< /s_list >

<!--댓글검색결과출력부분-->        
< s_rplist >
< /s_rplist >

<!--태그리스트출력부분-->
< s_tag >
< /s_tag >

<!--위치로그출력부분-->        
< s_local >
< /s_local >

<!--방명록-->        
< s_guest >
< /s_guest >

<!--보호되어있는글출력-->        
< s_article_protected >
< /s_article_protected >

<!--공지사항출력-->
< s_notice_rep >
< /s_notice_rep >

<!--본문(블로그)내용출력-->
< s_article_rep >
< /s_article_rep >

<!--페이징바-->
< s_paging >
< /s_paging >

<!--검색어입력폼-->
< s_search >
< /s_search >

이렇습니다. 각각의 출력부분 안에 하위로 추가적인 출력 치환자들이 더 있습니다만,
어떻게 설명을 해야할지 고민중..

=Postscript=
추가적으로 더 작성할 내용이 있습니다.
나중에 더 추가 할께요.

Writer profile

LonnieNa 입니다.
http://www.needlworks.org
여러분과 나의 세상에 바라보는 시선을 달리합니다.

http://ilmol.com/wp/2005/06/09/25/

요 게시물을 보면 느낌을 알거야.
나두 동감하는 부분 table로 배치는 정말 복잡하게 늘어나는 소스들.
그 예가 바로 태터 1.0에 기본 스킨 두개의 비교
xhtml로 작성된 스킨과 table로 이뤄진 html스킨을 비교해보면
소스 크기가 엄청나게 줄은걸 알수 있지.

div로 바꿔볼래.
대략적으로 이해는 했는데.
많이 어색하네.
막상 < div > < / div > 막 하다보니 어디서부터가 영역인지 까먹기 쉽상..
table에서는 tr td만 알면 50%는 먹고 가는건데.

일단 간단히 스킨이라도 만들어 보면 알겠지 모.

근데 드림위버에서 div 삽입 단축키는 없나?
일일이 하드코딩을 해야만 하는게야?

우선 해외우편 붙이러 우체국에 좀 다녀오구.

요즘 떠들석 하지.
웹2.0이다 웹표준이다~
더불어 IE7까지 나오는 시점에서.
FF유저는 늘어가고 있고.

아직 웹 표준이 먼지 잘 몰라.
사실 나는 아직까진 table이 더 편한건 사실이야.
table은 단순히, 그니까 표를 그릴때만 써야하고
배열은 div를 써야한다는거지.

하지만 나에겐 아직까지도 div를 이용하려면 css에 의존도를 더 높여야하는거구. 지금껏 내가 작업한 웹페이지들은 css의존도가 현저희 낮아.
모르겠어 단순히 css파일이 늘어나긴하지만 그걸 상단에서 미리 읽어들임에 본 페이지는 div 배열로 소스크기가 줄어 가볍게 느껴진다는게 과연 얼마나 많은 차이를 보일지는 정말 내 생각에는 미지수 일뿐이야.

웹 표준을 지키자 라고 말한것일뿐인데.
몇몇 사람들은 안지키면 죽는건줄 안다.
그냥 IE로 봐서 보이는대로 FF에서도 제대로 보인다면 지금으로서는 만족할만한것 아닌가?
FF의 Validator까지 하면야 좋겠지만.. 많이 어렵더라는..
익숙치 않아서 그렇겠지. 처음의 습관이 그러니깐.

하지만 내가 말하고자 하는건. 웹표준만이 정석은 아니다 라는 생각이야.
모든 유저에게 바르고, 쉽게 가볍게 다가갈수 있는 웹을 만들면 당연 좋지.
그치만 지금에 와서 안하면 죽는다? 그건 아니다라는거지.

모 사이트에서 너무 감정적인 글을 보고 몇자 적어봤어.
어디까지나 모로가든 서울만 가면 되는거 아닌가?
늦게 가건 쉽게가건 그건 그 때 그때 해결하면되는거니깐.
내가 너무 안일한 생각인거야?

웹 표준을 우리가 따지기에 앞서 지금껏 IE와 FF등 외의 타 브라우저들의 호환성이 짙게 달라졌다는것 그 자체부터가 잘못됐다고 보거든?

그래~ 내 지금의 블로그도 FF에서 재대로 안보여.. 이렇게 말하면 대책없는거지?

테이블이 늘어나는 경우
(td style="word-break:break-all;")

이미지로 인해 깨지는 테이블이 늘어나는 경우
테이블넓이에 따라 이미지만 보여준다.
(table style="table-layout:fixed;")

<!-- //최상위 체크 로직(chars로 넘긴 값이 있다면 true) function containsCharsOnly(input,chars) { for (var inx = 0; inx < input.value.length; inx++) { if (chars.indexOf(input.value.charAt(inx)) == -1) return false; } return true; } //최상위 체크 로직(chars로 넘긴 값이 있다면 false) function containsChars(input,chars) { for (var inx = 0; inx < input.value.length; inx++) { if (chars.indexOf(input.value.charAt(inx)) != -1) return true; } return false; } // 숫자 체크 function isNum(input) { var chars = "0123456789"; return containsCharsOnly(input,chars); } //이름체크 function nameCheck(input){ var chars = '0123456789~!#$%^&amp;amp;amp;amp;*()_-+=|{}[]<>,./?@'; return containsChars(input,chars); } // 전화 번호 Check function isPhoneCheck(input) { var chars = "0123456789( ).-,<>{}[]_~"; return containsCharsOnly(input,chars); } // 영문 판별 function isPhoneCheck(input) { var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; return containsCharsOnly(input,chars); } // 영숫자 판별 function isPhoneCheck(input) { var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; return containsCharsOnly(input,chars); } // 입력값이 숫자,대시(-)로 되어있는지 체크 function isNumDash(input) { var chars = "-0123456789"; return containsCharsOnly(input,chars); } // 입력값이 숫자,콤마(,)로 되어있는지 체크 function isNumComma(input) { var chars = ",0123456789"; return containsCharsOnly(input,chars); } // 입력값이 사용자가 정의한 포맷 형식인지 체크 // 자세한 format 형식은 자바스크립트의 ''regular expression''을 참조 function isValidFormat(input,format) { if (input.value.search(format) != -1) { return true; file://올바른 포맷 형식 } return false; } /** * 입력값이 이메일 형식인지 체크 * ex) if (!isValidEmail(form.email)) { * alert("올바른 이메일 주소가 아닙니다."); * } */ function isValidEmail(input) { // var format = /^(\S+)@(\S+)\.([A-Za-z]+)$/; var format = /^((\w|[\-\.])+)@((\w|[\-\.])+)\.([A-Za-z]+)$/; return isValidFormat(input,format); } /** * 입력값이 전화번호 형식(숫자-숫자-숫자)인지 체크 */ function isValidPhone(input) { var format = /^(\d+)-(\d+)-(\d+)$/; return isValidFormat(input,format); } // 콤마 없애기 function removeComma(input) { return input.value.replace(/,/gi,""); } // 문자 변환 함수 function alterString(str,before,after) { var returnStr = ""; for(i = 0; i < str.length; i++) { value = str.charAt(i); index = before.indexOf(value); if(index >= 0) value = after.charAt(index); returnStr += value; } return returnStr; } // 소 --> 대문자 변환 함수 function ToUpper(arg) { var str1 = "abcdefghijklmnopqrstuvwxyz"; var str2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; return alterString(arg,str1,str2); } // 대 --> 소문자 변환 함수 function ToLower(arg){ var str1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var str2 = "abcdefghijklmnopqrstuvwxyz"; return alterString(arg,str1,str2); } // 반각 문자를 전각문자로 function convert2ByteChar(x_char) { var x_2byteChar = ""; //컨버트된 문자 var c = x_char.charCodeAt(0); if(32 <= c && c <= 126) { //전각으로 변환될수 있는 문자의 범위 if(c == 32) { //스페이스인경우 ascii 코드 32 x_2byteChar = unescape("%uFFFC"); } else { x_2byteChar = unescape("%u"+gf_DecToHex(c+65248)); } } return x_2byteChar; } // 10진수를 16진수로 function gf_DecToHex(x_dec) { var x_Hex = new Array(); var x_serial = 0; var x_over16 = x_dec; var x_tempNum = 0; while(x_dec > 15) { var x_h = x_dec % 16; //나머지 x_dec = parseInt(x_dec/16); //몫 x_Hex[x_serial++] = (x_h > 9 ? String.fromCharCode(x_h + 55) : x_h); //16진수코드변환 } //마지막은 몫의 값을 가짐 x_Hex[x_serial++] = (x_dec > 9 ? String.fromCharCode(x_dec + 55) : x_dec); //16진수코드변환 //몫,나머지,나머지,..... var retValue = ""; for(var i=x_Hex.length ; i>0 ;i--) { retValue += x_Hex[i-1]; } return retValue; } // input box에 space, &nbsp;등 만으로 넣고 장난 칠때 이들 문자 뺀 길이를 통해 유효성 체크한다... function CheckStr(strOriginal, strFind, strChange){ var position, strOri_Length; position = strOriginal.indexOf(strFind); while (position != -1){ strOriginal = strOriginal.replace(strFind, strChange); position = strOriginal.indexOf(strFind); } strOri_Length = strOriginal.length; return strOri_Length; } // 체크 박스에 체크가 되어 있으면 true function checkValidator(str) { if(str.checked) return true; else return false; } // 비밀번호는 4자 등 최대 최소 길이를 파람으로 주고 처리... function checkLength(str,minLng,maxLng){ var ckstr = str.value.length; if (parseInt(ckstr) < parseInt(minLng) || parseInt(ckstr) > parseInt(maxLng)) return false; return true; } // 숫자만 받아서 아니면 메세지 보여 주는 function onlyNumber(objEv) { if(!isNum(objEv)){ alert("숫자만 입력가능합니다."); objEv.value = ""; objEv.focus(); return; } } // 숫자를 체크하다가 6자 등 원하는 만큼 이동후 다음 input 박스로 이동 시키는... function goJump(fname, len, goname){ onlyNumber(fname); if (document.all[fname].value.length == len) document.all[goname].focus(); } // 주민등록번호 체크 로직 function check_ResidentNO(str_f_num,str_l_num){ var i3=0 for (var i=0;i<str_f_num.length;i++){ var ch1 = str_f_num.substring(i,i+1); if (ch1<'0' || ch1>'9') i3=i3+1; } if ((str_f_num == '') || ( i3 != 0 )) return false; var i4=0; for (var i=0;i<str_l_num.length;i++){ var ch1 = str_l_num.substring(i,i+1); if (ch1<'0' || ch1>'9') i4=i4+1; } if ((str_l_num == '') || ( i4 != 0 )) return false; if(str_f_num.substring(0,1) < 4) return false; if(str_l_num.substring(0,1) > 2) return false; if((str_f_num.length > 7) || (str_l_num.length > 8)) return false; if ((str_f_num == '72') || ( str_l_num == '18')) return false; var f1=str_f_num.substring(0,1) var f2=str_f_num.substring(1,2) var f3=str_f_num.substring(2,3) var f4=str_f_num.substring(3,4) var f5=str_f_num.substring(4,5) var f6=str_f_num.substring(5,6) var hap=f1*2+f2*3+f3*4+f4*5+f5*6+f6*7 var l1=str_l_num.substring(0,1) var l2=str_l_num.substring(1,2) var l3=str_l_num.substring(2,3) var l4=str_l_num.substring(3,4) var l5=str_l_num.substring(4,5) var l6=str_l_num.substring(5,6) var l7=str_l_num.substring(6,7) hap=hap+l1*8+l2*9+l3*2+l4*3+l5*4+l6*5 hap=hap%11 hap=11-hap hap=hap%10 if (hap != l7) return false; return true; } // 바이트 구하기 function getByteLen(str){ return(str.length+(escape(str)+"%u").match(/%u/g).length-1); } // url 가져오기 function getUrlAddress(){ var pageUrl = document.location; pageUrl = new String(pageUrl); return pageUrl.substring(0,pageUrl.lastIndexOf("/")); } // 오른마우스 금지, 나중에 해당 주석 풀고 사용 function rightbutton(e){ if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)) return false; else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)) { alert("죄송합니다!! 정보무단복제를 막기 위하여 오른쪽 마우스 사용을 허용하지 않습니다."); return false; } return true; } //document.onmousedown=rightbutton; // 컨트롤 키 금지, 나중에 해당 주석 풀고 사용 function checkCtl(){ if (document.all){ if(event.keyCode==17) { alert("죄송합니다!! 컨트롤키 사용을 허용하지 않습니다."); return false; } } } //document.onkeydown = checkCtl; function setCookie(name,value) { document.cookie = name+"="+escape(value)+";path=/;domain=.kkaok.pe.kr;"; } function setCookie(name,value, expires) { document.cookie = name + "=" + escape(value) + "; path=/; expires=" + expires.toGMTString(); } function getCookie(Name) { var search = Name + "=" if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면 offset = document.cookie.indexOf(search) if (offset != -1) { // 쿠키가 존재하면 offset += search.length // set index of beginning of value end = document.cookie.indexOf(";", offset) // 쿠키 값의 마지막 위치 인덱스 번호 설정 if (end == -1) end = document.cookie.length return unescape(document.cookie.substring(offset, end)); } } } //문자 바꾸기, 사용법 var str = 문자열.replaceAll("a", "1"); String.prototype.trim = function(){ return this.replace(/(^\s*)|(\s*$)/gi, ""); } String.prototype.replaceAll = function(str1, str2) { var temp_str = ""; if (this.trim() != "" && str1 != str2) { temp_str = this.trim(); while (temp_str.indexOf(str1) > -1){ temp_str = temp_str.replace(str1, str2); } } return temp_str; } //-->

head 부분에 script src로 삽입시키면 되겠지.