case1.
“제가 아무리 막아보았지만 그토록 빠른 이동을 하는 술수는 처음 보았습니다. 결국 전혀 맞설수 없었지요”
무투파의 수장인 기인은 그 소릴 듣고 말했다.
“마치… 발이 땅에서 떨어지지 않고 움직이는 그러한 보법말이더냐?”
“네 맞습니다. 순식간에 저와 거리가 없어지는듯 하다가도 어느새 저편으로 가 있었지요”
수장은 말했다.
“그건 어느 유파의 라이브러리를 사용하는거 같구나. 아마도 애니메이트 초식이었을게다”
작고 상처투성이인 청년은 다급히 물었다.
“저도 그런 기술을 쓸수 있을까요?”
잠시 생각에 잠긴 기인은 자신의 후계를 위해 이 청년을 수하로 들이기로 결정했다.
“너의 실력은 아직 원시코드로 간단한 함수를 호출할 정도일 터. 조금 내공(코어)을 끌어올린 다음 내가 알려주는 라이브러리를 익힐수 있도록 도와주마”

case2.
“들었는가? 자네. 네통에서는 얼마전부터 각 문하생들마다 더미아이디를 하나 더 생성하게 해주는 서비르를 시행하고 있다네”
“물론이지.. 꽤 되었다 하더군”
“내가 아는 친구는 그걸 이용해서 자신의 흔적을 남기지 않는다 하더구만”
“아니… 네통은 문파에 들아갈때 반드시 등록되지 않나?”
“그렇지… 내가 아는 그 친구는 바로 그 부계정으로 문파에 등록해 사용하다가 문파에서 비전을 수급 한 뒤에는 부계정을 바로 삭제한다고 하네. 본계정을 애초부터 숨기고 있던거지..”
“허.. 어찌 그런 생각을…”
“하기사 이젠 네통으로 각 문파의 문하생들이 자신의 라이브러리 비급을 전달하는건 일도 아니니 그다지 나무랄 일도 아닌거 같네”

case3.
‘존’ 대사부가 세운 제이코리파에서는 작은 소동이 일어났다.
“어찌 하여 새로운 라이브러리를 개발하고 있느냐?” 현철 사범이 가인에게 물었다.
“… 저희 라이브러리가 너무 편해서.. 내공정진을 함께 하기가 어렵습니다”
“무슨말이냐”
“쉬운 메소드와 애드온이 많기에 더욱 그러한것이 아닌가 합니다. 속하 제자가 좀더 내공을 연마코자 그런것이니 너그러이 용서해 주십시오”
가인은 대답하면서 자신이 적어놓은 라이브러리를 보여주었고 현철사범은 그 라이브러리를 펼쳐 천천히 읽어내려갔다.
“흠.. 어느때고 간에 mouseleave이벤트를 사용하도록 하고 있느냐?”
“네…”
“좋다, 물론 존사부님의 비급을 수급하기도 좋지만 너 자신의 라이브러리를 만드는것도 좋겠지. 정진하도록 하여라”

case4.
기롼이란 청년은 의기양양해져서 문파로 돌아왔다.
“헤헤 그 거지같은 녀석을 혼내줘서 속이 다 시원하네 흐흐”
같은방 소속인 문하생들에게 자랑하던 중, 결국 어플리케이션 제2사부인 동숙사범에게 자초지종을 들키게 되었다.
“이놈! 어디서 문파의 기술을 쓰고 다니라 했더냐. 너는 아직 그 정도 실력이 아니다!”
프로토파의 사범인 동숙사범이 기롼이를 꾸짖었다.
“우리같은 대 방파에서 괜한 사람을 핍박했다는 소리가 들리면 어쩌려고 그러느냐! 이 일은 ‘샘’ 노사께 이를터이니 넌 스터디방에서 자숙하고 있거라!”
기롼이는 풀이 죽어서 스터디방으로 향했고 프로토파의 비전을 펼쳐 그중에서 getElementsByClassName확장에 대해를 읽어내려갔다.
‘쳇.. 사범님은 구닥다리야. 어차피 이런 메소드도 조금만 지나면 굳이 라이브러리를 호출하지 않아도 될텐데..’

case5.
규영과 을순은 서남지역으로 이동하던중 희안한 광경을 목격했다.
한 무리의 인력들이 한 남자를 둘러싸고 시비를 걸고 있었는데, 가운데 남자는 의연한 태도를 유지하고 있었다.
어느새인가 싸움이 벌어졌고 순식간에 한 남자만이 서 있었으며 불량배들은 모두 나가떨어져 있었다.
규영이 물었다.
“아니..보셨나요? 방금 저 남자가 사용한게 뭔지..”
을순이 대답했다.
“자신을 복제함과 동시에 팔괘에서 나타나게끔하여 마치 3차원의 요소처럼 공격하는것 말이냐”
“네 전 어떤일이 일어났는지도 잘 모르겠습니다”
을순은 조용히 말을 이었다.
“저건 마치 벼락이 지나간 뒤에나 알수 있다는 뜻으로 후뢰시(後雷始) 라는 이름을 가진 기술이지.
서역에서 들어온 기술로서 라이브러리와는 전혀 다른 언어로 만들어진단다.
플렉스라는 파는 그 정점에서 아직도 끊임없는 기술을 개발하고 있다고 들었다.”
규영의 부러워 하는 눈을 보고 을순은 덧붙였다.
“하지만 아무나 쓸수 없는 기술이기도 하지.. 모든곳에서 동등하게 사용하기도 어렵거니와 가장 중요한건 아도브산하에 속한자만이 허락받아 사용한단다. 여튼 우리와 같은 길을 걷고 있는것만은 틀림없지”

그때 저 멀리서 같은 광경을 보고 있던 한 노승이 눈에 띄였으나 순식간에 보이지 않게 되었다.
을순은 그를 놓지지 않으면서 속으로 뇌아렸다.
‘… 더글러스 크록포드경이 나타나다니… 큰 한파가 한번 몰아닥치겠구나…’

input type file에 style입히기

javascript

function initFileUploads(classname,position,size,fakewidth) {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.style.width = 100 + "%";
	fakeFileUpload.style.textAlign = position;
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='filesearch.gif';
	image.style.verticalAlign = 'middle';
	fakeFileUpload.appendChild(image);
	var x = document.getElementsByTagName('input');
	for (var i=0;i<x.length;i++) {
		if (x[i].type != 'file') continue;
		if (x[i].className != classname) continue;
		if (x[i].parentNode.className != 'fileinputs') continue;
		x[i].className = 'file hidden';
		var clone = fakeFileUpload.cloneNode(true);
		x[i].parentNode.appendChild(clone);
		x[i].setAttribute('size',size);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		x[i].relatedElement.className = 'fakeinput';
		x[i].relatedElement.style.width = fakewidth + 'px';
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
		x[i].parentNode.style.textAlign = position;
	}
}

html

<div class="wrap">
	<form action="" method="post">
		<div class="fileinputs">
			<input type="file" class="file" />
		</div>
		<script type="text/javascript">initFileUploads('file','center',40,310);</script>
		<div class="code">
			&lt;script type="text/javascript"&gt;initFileUploads('file','center',40,310);&lt;/script&gt;
		</div>

		<div class="fileinputs">
			<input type="file" class="file2" />
		</div>
		<script type="text/javascript">initFileUploads('file2','left',60,390);</script>
		<div class="code">
			&lt;script type="text/javascript"&gt;initFileUploads('file2','left',60,390);&lt;/script&gt;
		</div>
	</form>
</div>

• *사이트내에서 파일업로드 필드의 가로값이 두개 이상일경우, 각각 클래스로 사이즈를 제어하도록 함
• *실제 input과 가상 input의 사이즈를 비교하기위해 opacity값을 조절해서 비교하면 쉽습니다.

1. 디자인 입힐 input type=”file”에 특정 클래스 지정 (예제에서는 class=”file”)
2. 해당 input을 div class=”fileinputs” 으로 감쌈
3. 스크립트 호출- initFileUploads(classname,size,fakewidth)
4. classname : 지정한 클래스 이름
5. position: 정렬 (left, center, right 사용)
6. size : 실제 input 사이즈 지정
7. fakewidth : 가상으로 보일 input 박스의 width값

미리보기

기본적인 글로벌 네비게이션

javascript

var _d = document;
function getClass(classname, tagname, tarID) {}
function addClass(element,value) {}
function removeClass(element,value) {}

var gnbNavi = function(gnbID, currentNum, subCurrentNum, noscript){
	var wrapper = _d.getElementById(gnbID);
	if (noscript) removeClass(wrapper,noscript);	// 스크립트가 로딩되면 wrapper의 class중 'noscript'를 삭제합니다.

	var menu = getClass('depth1','li',wrapper);
	var menuLink = [];			// 이벤트를 발생시킬 대메뉴의 a들
	var submenu = [];			// 대메뉴의 하위에 위치한 ul들
	var submenuLink = [];		// 서브메뉴의 a들

	var initialize = function(){
		for (var i=0; i<menu.length; i++){
			menuLink[i] = menu[i].getElementsByTagName('a')[0];
			submenu[i] = menu[i].getElementsByTagName('ul')[0];
			if(submenu[i] == undefined){
				submenu[i] = null;
			}
			if(submenu[i]) submenu[i].style.visibility = 'hidden';	// 서브메뉴 'hidden'초기화

			showSubmenu(i);											// 마우스 이벤트에 서브메뉴 show / hide
		}
		if (currentNum) menuLink[currentNum-1].onmouseover();		// 대메뉴 활성화
	};
	var showSubmenu = function(num){
		menuLink[num].onmouseover = menuLink[num].onfocus = function(){
			for(var i=0; i<menu.length; i++){
				var imgEl = menuLink[i].getElementsByTagName('img')[0];
				if(i == num){
					if (menu[i].className.indexOf('visible') == -1) addClass(menu[i],'visible');		// 활성화 된 메뉴에 class추가
					if (imgEl && imgEl.src.indexOf('_on.gif') == -1) imgEl.src = imgEl.src.replace('.gif', '_on.gif');	// 대메뉴 이미지 오버
					if(submenu[i]) {
						submenu[i].style.visibility = 'visible';
						subImgOver(i);								// 보여지는 서브메뉴의 메뉴들에게 이벤트를 지정
					}
				} else {
					removeClass(menu[i],'visible');
					if (imgEl) imgEl.src = imgEl.src.replace('_on.gif', '.gif');
					if(submenu[i]) {
						submenu[i].style.visibility = 'hidden';
					}
				}
			}
		}
	};
	var subImgOver = function(num){
		submenuLink = submenu[num].getElementsByTagName('a');
		for(var i=0; i<submenuLink.length; i++){
			submenuLink[i].onmouseover = function(){
				var imgEl = this.getElementsByTagName('img')[0];
				if (this.className.indexOf('on') == -1) addClass(this,' on');
				if (imgEl && imgEl.src.indexOf('_on.gif') == -1) imgEl.src = imgEl.src.replace('.gif', '_on.gif');
			}
			submenuLink[i].onmouseout = function(){
				var imgEl = this.getElementsByTagName('img')[0];
				removeClass(this,'on');
				if (imgEl) imgEl.src = imgEl.src.replace('_on.gif', '.gif');
			}
			if (subCurrentNum && num == (currentNum - 1)) {				// 서브메뉴 활성화가 지정된 경우 && 현재 보여지는 서브메뉴가 활성화된 대메뉴 일 경우
				var subCurrentMenu = submenuLink[subCurrentNum - 1];
				if(!subCurrentMenu) return;
				var subCurrentImage = subCurrentMenu.getElementsByTagName('img')[0];
				if(subCurrentMenu.className.indexOf('on') == -1) addClass(subCurrentMenu,' on');
				if (subCurrentImage && subCurrentImage.src.indexOf('_on.gif') == -1) subCurrentImage.src = subCurrentImage.src.replace('.gif', '_on.gif');
				subCurrentMenu.onmouseout = function(){
					return false;
				}
			}
		}
	}
	initialize();
}

hml

<div id="gnbmenu" class="noscript">
	<ul>
		<li class="depth1">
			<a href="#">menu01</a>
			<ul class="depth2"><li><a href="#">menu0101</a></li></ul>
		</li>
		<li class="depth1">
			<a href="#">menu02</a>
			<ul class="depth2"><li><a href="#">menu0201</a></li></ul>
		</li>
		<li class="depth1">
			<a href="#">menu03</a>
		</li>
		<li class="depth1">
			<a href="#">menu04</a>
			<ul class="depth2">
				<li><a href="#">menu0401</a></li>
			</ul>
		</li>
		<li class="depth1">
			<a href="#">menu05</a>
			<ul class="depth2">
				<li><a href="#">menu0501</a></li>
			</ul>
		</li>
		<li class="depth1">
			<a href="#">menu06</a>
		</li>
	</ul>
</div>
<script type="text/javascript">
//<![CDATA[
//	gnbNavi(대메뉴ID명, 대메뉴 활성화, 서브메뉴 활성화, js로딩시 제거할 class명);
	gnbNavi('gnbmenu',1,2,'noscript');
//]]>
</script>

• 활성화 된 대메뉴에 ‘visible’ class 추가
• 대메뉴, 서브메뉴에 이미지인 경우 “~.gif”, “~on.gif”로 이미지 변환
• 활성화 된 대메뉴, 서브메뉴 지원 (currentNum, subCurrentNum)
• getClass(), addClass(), removeClass(); 함수 사용
• 서브메뉴 각각의 위치는 css등 이용 권장
• js로딩시 gnbID의 class값 제거 : js없을경우 별도의 디자인 view 가능

미리보기