반응형

var n4 = (document.layers)?true:false;
var e4 = (document.all)?true:false;

//숫자만입력(onKeypress='return keyCheckdot(event)')
function keyCheck(e) {
if(n4) var keyValue = e.which
else if(e4) var keyValue = event.keyCode
if (((keyValue >= 48) && (keyValue <= 57)) || keyValue==13) return true;
else return false
}

//숫자및돗트입력(onKeypress='return keyCheckdot(event)')
function keyCheckDot(e) {
if(n4) var keyValue = e.which
else if(e4) var keyValue = event.keyCode
if (((keyValue >= 48) && (keyValue <= 57)) || keyValue==13 || keyValue==46) return true;
else return false
}

//공백제거
function Trim(string) {
for(;string.indexOf(" ")!= -1;){
string=string.replace(" ","")
}
return string;
}

//입력검사
function Exists(input,types) {
if(types) if(!Trim(input.value)) return false;
return true;
}

//영문검사+숫자검사(첫글자는 반드시영문)
function EngNum(input,types) {
if(types) if(!Trim(input.value)) return false;
var error_c=0, i, val;
for(i=0;i<Byte(input.value);i++) {
val = input.value.charAt(i);
if(i == 0) if(!((val>='a' && val<='z') || (val>='A' && val<='Z'))) return false;
else if(!((val>=0 && val<=9) || (val>='a' && val<='z') || (val>='A' && val<='Z'))) return false;
}
return true;
}

//영문검사+숫자검사
function EngNumAll(input,types) {
if(types) if(!Trim(input.value)) return false;
var error_c=0, i, val;
for(i=0;i<Byte(input.value);i++) {
val = input.value.charAt(i);
if(!((val>=0 && val<=9) || (val>='a' && val<='z') || (val>='A' && val<='Z'))) return false;
}
return true;
}

//영문검사+숫자검사+'_'
function EngNumAll2(input,types) {
if(types) if(!Trim(input.value)) return false;
var error_c=0, i, val;
for(i=0;i<Byte(input.value);i++) {
val = input.value.charAt(i);
if(!((val>=0 && val<=9) || (val>='a' && val<='z') || (val>='A' && val<='Z') || val=='_')) return false;
}
return true;
}

//영문검사
function Eng(input,types) {
if(types) if(!Trim(input.value)) return false;
var error_c=0, i, val;
for(i=0;i<Byte(input.value);i++) {
val = input.value.charAt(i);
if(!((val>='a' && val<='z') || (val>='A' && val<='Z'))) return false;
}
return true;
}

//숫자만입력
/*
function numberonlyinput() {
var ob = event.srcElement;
ob.value = noSplitAndNumberOnly(ob);
return false;
}
*/

//돈(3단위마다 컴마를 붙인다.)
function checkNumber() {
var ob=event.srcElement;
ob.value = filterNum(ob.value);
ob.value = commaSplitAndNumberOnly(ob);
return false;
}

//한정액(일정금액 이상이 되면 올라기지 않게 한다.)
function chkhando(money) {
var ob=event.srcElement;
ob.value = noSplitAndNumberOnly(ob);
if(ob.value > money) ob.value = money;
return false;
}

//이자율(소수점 사용가능)
function checkNumberDot(llen,rlen) {
if(llen == "") llen = 8;
if(rlen == "") rlen = 2;
var ob=event.srcElement;
ob.value = filterNum(ob.value);

spnumber = ob.value.split('.');
if( spnumber.length >= llen && (spnumber[0].length >llen || spnumber[1].length >llen)) {
ob.value = spnumber[0].substring(0,llen) + "." + spnumber[1].substring(0,rlen);
ob.focus();
return false;
}
else if( spnumber[0].length > llen ) {
ob.value = spnumber[0].substring(0,llen) + ".";
ob.focus();
return false;
}
else if(ob.value && spnumber[0].length == 0) {
ob.value = 0 + "." + spnumber[1].substring(0,rlen);
ob.focus();
return false;
}
ob.value = commaSplitAndAllowDot(ob);
return false;
}

//참조함수
function filterNum(str) {
re = /^\$|,/g;
return str.replace(re, "");
}

//참조함수(컴마불가)
function commaSplitAndNumberOnly(ob) {

var txtNumber = '' + ob.value;
if (isNaN(txtNumber) || txtNumber.indexOf('.') != -1 ) {
ob.value = ob.value.substring(0, ob.value.length-1 );
ob.value = commaSplitAndNumberOnly(ob);
ob.focus();
return ob.value;
}
else {
var rxSplit = new RegExp('([0-9])([0-9][0-9][0-9][,.])');
var arrNumber = txtNumber.split('.');
arrNumber[0] += '.';
do {
arrNumber[0] = arrNumber[0].replace(rxSplit, '$1,$2');
}
while (rxSplit.test(arrNumber[0]));

if (arrNumber.length > 1) {
return arrNumber.join('');
}
else {
return arrNumber[0].split('.')[0];
}
}
}

//참조함수(컴마가능)
function commaSplitAndAllowDot(ob) {

var txtNumber = '' + ob.value;
if (isNaN(txtNumber) ) {
ob.value = ob.value.substring(0, ob.value.length-1 );
ob.focus();
return ob.value;
}
else {
var rxSplit = new RegExp('([0-9])([0-9][0-9][0-9][,.])');
var arrNumber = txtNumber.split('.');
arrNumber[0] += '.';
do {
arrNumber[0] = arrNumber[0].replace(rxSplit, '$1,$2');
}
while (rxSplit.test(arrNumber[0]));

if (arrNumber.length > 1) {
return arrNumber.join('');
}
else {
return arrNumber[0].split('.')[0];
}
}
}

//숫자만가능
function noSplitAndNumberOnly(ob) {
var txtNumber = '' + ob.value;
if (isNaN(txtNumber) || txtNumber.indexOf('.') != -1 ) {
ob.value = ob.value.substring(0, ob.value.length-1 );
ob.focus();
return ob.value;
}
else return ob.value;
}


//바이트검사
function Byte(input) {
var i, j=0;
for(i=0;i<input.length;i++) {
val=escape(input.charAt(i)).length;
if(val== 6) j++;
j++;
}
return j;
}

//팝업메뉴
function popupmenu_show(layername, thislayer, thislayer2) {
thislayerfield.value = thislayer;
thislayerfield2.value = thislayer2;
var obj = document.all[layername];
var _tmpx,_tmpy, marginx, marginy;
_tmpx = event.clientX + parseInt(obj.offsetWidth);
_tmpy = event.clientY + parseInt(obj.offsetHeight);
_marginx = document.body.clientWidth - _tmpx;
_marginy = document.body.clientHeight - _tmpy ;
if(_marginx < 0) _tmpx = event.clientX + document.body.scrollLeft + _marginx ;
else _tmpx = event.clientX + document.body.scrollLeft ;
if(_marginy < 0) _tmpy = event.clientY + document.body.scrollTop + _marginy + 20;
else _tmpy = event.clientY + document.body.scrollTop ;
obj.style.posLeft = _tmpx - 5;
obj.style.posTop = _tmpy;

layer_set_visible(obj, true);
layer_set_pos(obj, event.clientX, event.clientY);
}
function layer_set_visible(obj, flag) {
if (navigator.appName.indexOf('Netscape', 0) != -1) obj.visibility = flag ? 'show' : 'hide';
else obj.style.visibility = flag ? 'visible' : 'hidden';
}
function layer_set_pos(obj, x, y) {
if (navigator.appName.indexOf('Netscape', 0) != -1) {
obj.left = x;
obj.top = y;
} else {
obj.style.pixelLeft = x + document.body.scrollLeft;
obj.style.pixelTop = y + document.body.scrollTop;
}
}


//페이지이동
function move(url) {
location.href = url;
}

//닫기
function toclose() {
self.close();
}

//위치변경
function winsize(w,h,l,t) {
if(window.opener) resizeTo(w,h);
}

//포커스위치
function formfocus(form) {
var len = form.elements.length;
for(i=0;i<len;i++) {
if((form.elements[i].type == "text" || form.elements[i].type == "password") && Trim(form.elements[i].value) == "") {
form.elements[i].value = "";
form.elements[i].focus();
break;
}
}
}

// 날짜,시간 format 함수 = php의 date()
function date(arg_format, arg_date) {
if(!arg_date) arg_date = new Date();

var M = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
var F = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var K = new Array("일","월","화","수","목","금","토");
var k = new Array("日","月","火","水","木","金","土");
var D = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat");
var l = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var o = new Array("전","후");
var O = new Array("오전","오후");
var a = new Array("am","pm");
var A = new Array("AM","PM");

var org_year = arg_date.getFullYear();
var org_month = arg_date.getMonth();
var org_date = arg_date.getDate();
var org_wday = arg_date.getDay();
var org_hour = arg_date.getHours();
var org_minute = arg_date.getMinutes();
var org_second = arg_date.getSeconds();
var hour = org_hour % 12; hour = (hour) ? hour : 12;
var ampm = Math.floor(org_hour / 12);

var value = new Array();
value["Y"] = org_year;
value["y"] = String(org_year).substr(2,2);
value["m"] = String(org_month+1).replace(/^([0-9])$/,"0$1");
value["n"] = org_month+1;
value["d"] = String(org_date).replace(/^([0-9])$/,"0$1");
value["j"] = org_date;
value["w"] = org_wday;
value["H"] = String(org_hour).replace(/^([0-9])$/,"0$1");
value["G"] = org_hour;
value["h"] = String(hour).replace(/^([0-9])$/,"0$1");
value["g"] = hour;
value["i"] = String(org_minute).replace(/^([0-9])$/,"0$1");
value["s"] = String(org_second).replace(/^([0-9])$/,"0$1");
value["t"] = (new Date(org_year, org_month+1, 1) - new Date(org_year, org_month, 1)) / 86400000;
value["z"] = (new Date(org_year, org_month, org_date) - new Date(org_year, 0, 1)) / 86400000;
value["L"] = ((new Date(org_year, 2, 1) - new Date(org_year, 1, 1)) / 86400000) - 28;
value["M"] = M[org_month];
value["F"] = F[org_month];
value["K"] = K[org_wday];
value["k"] = k[org_wday];
value["D"] = D[org_wday];
value["l"] = l[org_wday];
value["o"] = o[ampm];
value["O"] = O[ampm];
value["a"] = a[ampm];
value["A"] = A[ampm];

var str = "";
var tag = 0;
for(i=0;i<arg_format.length;i++) {
var chr = arg_format.charAt(i);
switch(chr) {
case "<" : tag++; break;
case ">" : tag--; break;
}
if(tag || value[chr]==null) str += chr; else str += value[chr];
}

return str;
}

// 해상도에 맞는 크기 사용
function screensize() {
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
}

// 주민등록번호체크( 입력폼 1개)
function check_jumin(jumin) {
var weight = "234567892345"; // 자리수 weight 지정
var val = jumin.replace("-",""); // "-"(하이픈) 제거
var sum = 0;

if(val.length != 13) { return false; }

for(i=0;i<12;i++) {
sum += parseInt(val.charAt(i)) * parseInt(weight.charAt(i));
}

var result = (11 - (sum % 11)) % 10;
var check_val = parseInt(val.charAt(12));

if(result != check_val) { return false; }
return true;
}

// 주민등록번호체크( 입력폼 2개)
function check_jumin2(input, input2) {
input.value=Trim(input.value);
input2.value=Trim(input2.value);
var left_j=input.value;
var right_j=input2.value;
if(input.value.length != 6) {
alert('주민등록번호를 정확히 입력하세요.');
input.focus();
return true;
}
if(right_j.length != 7) {
alert('주민등록번호를 정확히 입력하세요.');
input2.focus();
return true;
}
var i2=0;
for(var i=0;i<left_j.length;i++) {
var temp=left_j.substring(i,i+1);
if(temp<0 || temp>9) i2++;
}
if((left_j== '') || (i2 != 0)) {
alert('주민등록번호가 잘못 입력되었습니다.');
j_left.focus();
return true;
}
var i3=0;
for(var i=0;i<right_j.length;i++) {
var temp=right_j.substring(i,i+1);
if (temp<0 || temp>9) i3++;
}
if((right_j== '') || (i3 != 0)) {
alert('주민등록번호가 잘못 입력되었습니다.');
input2.focus();
return true;
}
var l1=left_j.substring(0,1);
var l2=left_j.substring(1,2);
var l3=left_j.substring(2,3);
var l4=left_j.substring(3,4);
var l5=left_j.substring(4,5);
var l6=left_j.substring(5,6);
var hap=l1*2+l2*3+l3*4+l4*5+l5*6+l6*7;
var r1=right_j.substring(0,1);
var r2=right_j.substring(1,2);
var r3=right_j.substring(2,3);
var r4=right_j.substring(3,4);
var r5=right_j.substring(4,5);
var r6=right_j.substring(5,6);
var r7=right_j.substring(6,7);
hap=hap+r1*8+r2*9+r3*2+r4*3+r5*4+r6*5;
hap=hap%11;
hap=11-hap;
hap=hap%10;
if(hap != r7) {
alert('주민등록번호가 잘못 입력되었습니다.');
input2.focus();
return true;
}
return false;
}

// 비밀번호 체크
function check_passwd(input, input2, min) {
if(!input.value) {
alert('비밀번호를 입력해 주십시오.');
input.focus();
return false;
}
else if(BYTE(input.value) < min) {
alert('비밀번호의 길이가 너무 짧습니다.');
input.focus();
input.value='';
input2.value='';
return false;
}
else if(!input2.value) {
alert('확인비밀번호를 입력해 주십시오.');
input2.focus();
return false;
}
else if(input.value != input2.value) {
alert('비밀번호가 서로 다르게 입력되었습니다.');
input2.value='';
input2.focus();
return false;
}
else return true;
}

//콤마 넣기(정수만 해당)
function comma(val) {
val = get_number(val);
if(val.length <= 3) return val;

var loop = Math.ceil(val.length / 3);
var offset = val.length % 3;

if(offset==0) offset = 3;
var ret = val.substring(0, offset);

for(i=1;i<loop;i++) {
ret += "," + val.substring(offset, offset+3);
offset += 3;
}
return ret;
}

//문자열에서 숫자만 가져가기
function get_number(str) {
var val = str;
var temp = "";
var num = "";

for(i=0; i<val.length; i++) {
temp = val.charAt(i);
if(temp >= "0" && temp <= "9") num += temp;
}
return num;
}

//주민등록번호를 나이로 변환
function agechange(lno,rno) {
var refArray = new Array(18,19,19,20,20,16,16,17,17,18);
var refyy = rno.substring(0,1);
var refno = lno.substring(0,2);
var biryear = refArray[refyy] * 100 + eval(refno);

var nowDate = new Date();
var nowyear = nowDate.getYear();
return nowyear - biryear + 1;
}

//레디오박스 체크검사
function radio_chk(input, msg) {
var len = input.length;
for(var i=0;i<len;i++) if(input[i].checked == true && input[i].value) return true;
alert(msg);
return false;
}

//셀렉트박스 체크검사
function select_chk(input, msg) {
if(input[0].selected == true) {
alert(msg);
return false;
}
return true;
}

//새창띄우기
function open_window(url, target, w, h, s) {
if(s) s = 'yes';
else s = 'no';
var its = window.open(url,target,'width='+w+',height='+h+',top=0,left=0,scrollbars='+s);
its.focus();
}



<?
//셀렉트
function optionlist($optionlist, $getvalue="", $keyfield="key", $valuefield="value") {
foreach($optionlist as $key => $value) {
if($getvalue && $getvalue == ${$keyfield}) $chk = "selected";
else $chk = "";
echo "<option value='{${$keyfield}}' {$chk}>{${$valuefield}}</option>";
}
echo "\n";
}

//셀렉티드
function selected($checkkey, $getvalue="") {
echo "value='$checkkey'";
if($getvalue && $checkkey == $getvalue) echo " selected";
}

//체크드
function checked($checkkey, $getvalue="") {
echo "value='$getvalue'";
if($getvalue && $checkkey == $getvalue) echo " checked";
}

//주민번호 검사
function RegiNum($reginum) {
$weight = '234567892345'; // 자리수 weight 지정
$len = strlen($reginum);
$sum = 0;

if ($len <> 13) { return false; }

for ($i = 0; $i < 12; $i++) {
$sum = $sum + (substr($reginum,$i,1) * substr($weight,$i,1));
}

$rst = $sum%11;
$result = 11 - $rst;

if ($result == 10) {$result = 0;}
else if ($result == 11) {$result = 1;}

$jumin = substr($reginum,12,1);

if ($result <> $jumin) {return false;}
return true;
}

//사업자번호 검사
function comRegiNum($reginum) {
$weight = '137137135'; // 자리수 weight 지정
$len = strlen($reginum);
$sum = 0;

if ($len <> 10) { return false; }

for ($i = 0; $i < 9; $i++) {
$sum = $sum + (substr($reginum,$i,1) * substr($weight,$i,1));
}
$sum = $sum + ((substr($reginum,8,1)*5)/10);
$rst = $sum%10;

if ($rst == 0) {$result = 0;}
else {$result = 10 - $rst;}

$saub = substr($reginum,9,1);

if ($result <> $saub) {return false;}
return true;
}


//글자르기
function cut_str($msg,$cut_size,$tail="...") {
if($cut_size <= 0) return $msg;
$msg = strip_tags($msg);
$msg = str_replace("&mp;quot;","\"",$msg);
if(strlen($msg) <= $cut_size) return $msg;

for($i=0;$i<$cut_size;$i++) if(ord($msg[$i])>127) $han++; else $eng++;
if($han%2) $han--;

$cut_size = $han + $eng;

$tmp = substr($msg,0,$cut_size);
$tmp .= $tail;
return $tmp;
}

// 모든한글의 글자를 출력
function hangul_code() {
$count = 0;
for($i = 0x81; $i <= 0xC8; $i++) {
for($j = 0x00; $j <= 0xFE; $j++) {
if(($j >= 0x00 && $j <= 0x40) || ($j >= 0x5B && $j <= 0x60) || ($j >= 0x7B && $j <= 0x80) || ($j >= 0x00 && $j <= 0x40) ||
(($i >= 0xA1 && $i <=0xAF) && ($j >= 0xA1 && $j <= 0xFE)) || ($i == 0xC6 && ($j >= 0x53 && $j <= 0xA0)) ||
($i >= 0xC7 && ($j >= 0x41 && $j <= 0xA0))) continue;
echo chr($i).chr($j)." ";
$count++;
}
}
echo $count;
}

// 한글검사
function is_han($str) {
if(strlen($str) != 2) return false;

$i = ord ($str[0]);
$j = ord ($str[1]);

if($i < 0x81 || $i > 0xC8 || $j > 0xFE || ($j >= 0x00 && $j <= 0x40) || ($j >= 0x5B && $j <= 0x60) || ($j >= 0x7B && $j <= 0x80) ||
($j >= 0x00 && $j <= 0x40) || (($i >= 0xA1 && $i <=0xAF) && ($j >= 0xA1 && $j <= 0xFE)) ||
($i == 0xC6 && ($j >= 0x53 && $j <= 0xA0)) || ($i >= 0xC7 && ($j >= 0x41 && $j <= 0xA0))) return false;
else return true;
}


// 랜덤값 생성
function random_string($length) {
$randomcode = array('1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
'A', 'B', 'C', 'd', 'E', 'F', 'G', 'H', 'x', 'J',
'K', 'b', 'M', 'N', 'y', 'P', 'r', 'R', 'S', 'T',
'u', 'V', 'W', 'X', 'Y', 'Z');
mt_srand((double)microtime()*1000000);
for($i=1;$i<=$length;$i++) $Rstring .= $randomcode[mt_rand(1, 36)];
return $Rstring;
}


// 디렉토리 리스트
function DirList($path="./") {
$path = opendir($path);
while($list = readdir($path)) if($list != "." && $list != "..") $Arraydir[] = $list;
closedir($path);
return $Arraydir;
}

// 15자리의 유일한 숫자값 만들기
function uniquenumber() {
$temparray = explode(" ", microtime());
$temparray2 = substr($temparray[0],2,5);
$number =$temparray[1].$temparray2;
return $number;
}

// 파일이름과 확장자 분리
function ExplodeFile($filename) {
$filename = strtolower($filename);
$elements = explode('.',$filename);
$elemcnt = count($elements)-1;
if(count($elements)==1) $ext = '';
else $ext = $elements[$elemcnt];
unset($elements[$elemcnt]);
$fname = implode($elements,'');

$fileinfo["name"] = $fname;
$fileinfo["ext"] = $ext;
return $fileinfo;
}

// 그림확장자
function ImageType($filename) {
$webimg = explodefile($filename);

$webext = $webimg["ext"];
$defineexp = array("gif","jpg","png");

$count = count($defineexp);

for($i=0;$i<$count;$i++) {
if($defineexp[$i] == $webext) return true;
}
return false;
}

// 유닉스날짜 포맷
function date_format($unixtime,$format="Y.m.d",$empty="&nbsp;") {
if($unixtime) return date($format, $unixtime);
else return $empty;
}

//YYYY-MM-DD 형식을 유닉스 타임으로
function unix_format($times, $operator="-", $type=true) {
if($type == true) {
$times = trim($times);
$arry = explode($operator,$times);
if(count($arry) != 3) return date_format(0);
$mktime = mktime(0,0,0,$arry[1],$arry[2],$arry[0]);
return date("U", $mktime);
} else {
$formats = "Y{$operator}m{$operator}d";
return date($formats, $times);
}
}

// 주민등록번호 포맷
function jumin_format($juminno, $cutno=3, $des="x", $empty="&nbsp;") {
$juminno = str_replace("-","",$juminno);
if(strlen($juminno) != 13) return $empty;
for($i=0;$i<$cutno;$i++) $x .= $des;
$juminno = substr($juminno,0,13-$cutno).$x;
$juminno = substr($juminno,0,6)."-".substr($juminno,6);
return $juminno;
}

// 홈페이지 포맷
function url_format($url, $ltype=false, $title=false, $other="", $htype="http://", $empty="&nbsp;") {
$url = eregi_replace("http://","",trim($url));
if($url) $url = $htype.$url;
else return $empty;

if($title) $turl = $title;
else $turl = $url;

if($ltype) return "<a href='{$url}' {$other}>{$turl}</a>";
else return $url;
}

// 전송값 초기화
function post_format($str, $type) {
switch($type) {
case "url":
$str = trim($str);
$str = eregi_replace("http://","",$str);
break;
case "num":
$str = trim($str);
$str = str_replace(",","",$str);
break;
}
return $str;
}

// 이메일 포맷
function mail_format($email, $ltype=false, $title=false, $empty="&nbsp;") {
$email = trim($email);
$title = trim($title);

if(!$email && !$title) return $empty;
else if(!$email) return $title;

if($title) $temail = $title;
else $temail = $email;

if($ltype) return "<a href='mailto:{$email}'>{$temail}</a>";
else return $email;
}

// 전화번호 포맷
function tel_format($num1, $num2, $num3, $format="-", $empty="&nbsp;") {
$num1 = trim($num1);
$num2 = trim($num2);
$num3 = trim($num3);

if(!$num1) $num1 = "02";

if($num2 && $num3) return $num1.$format.$num2.$format.$num3;
else return $empty;
}

// 문자 포맷
function text_format($str, $empty="&nbsp;") {
$str = trim($str);
if($str) return $str;
else return $empty;
}

// 새창띄우기
function win_format($title, $url, $target, $width, $height, $scrollbars=1, $empty) {
$title = text_format($title, $empty);
return "<a href='#' onclick=\"open_window('{$url}', '{$target}', {$width}, {$height}, {$scrollbars})\">{$title}</a>";
}

// 나이(주민등록번호를 이용)
function AGE_jumin($lno,$rno) {
$refArray = Array(18,19,19,20,20,16,16,17,17,18);
$refyy = substr($rno,0,1);

$biryear = $refArray[$refyy] * 100 + substr($lno,0,2);
$nowyear = date("Y");
return $nowyear - $biryear + 1;
}

// URL 존재확인
function URL_exists($url) {
$url = str_replace("http://", "", $url);
list($domain, $file) = explode("/", $url, 2); // 도메인부분과 주소부분으로 나눕니다.
$fid = fsockopen($domain, 80); // 도메인을 오픈합니다.
fputs($fid, "GET /$file HTTP/1.0\r\nHost: $domain\r\n\r\n"); // 파일 정보를 얻습니다.
$gets = fgets($fid, 128);
fclose($fid);

if(ereg("200 OK", $gets)) return TRUE;
else return FALSE;
}

// 조사 꾸미기
$array = "뵤 벼 뱌 배 베 보 버 바 비 뷰 부 브 뱨 볘 봐 봬 붜 붸 뵈 뷔 븨 뾰 뼈 뺘 빼 뻬 뽀 뻐 빠 삐 쀼 뿌 쁘 뺴 뼤 뽜 뽸 뿨 쀄 뾔 쀠 쁴 죠 져 쟈 재 제 조 저 자 지 쥬 주 즈 쟤 졔 좌 좨 줘 줴 죄 쥐 즤 쬬 쪄 쨔 째 쩨 쪼 쩌 짜 찌 쮸 쭈 쯔 쪠 쪠 쫘 쫴 쭤 쮀 쬐 쮜 쯰 됴 뎌 댜 대 데 도 더 다 디 듀 두 드 댸 뎨 돠 돼 둬 뒈 되 뒤 듸 뚀 뗘 땨 때 떼 또 떠 따 띠 뜌 뚜 뜨 떄 뗴 똬 뙈 뚸 뛔 뙤 뛰 띄 교 겨 갸 개 게 고 거 가 기 규 구 그 걔 계 과 괘 궈 궤 괴 귀 긔 꾜 껴 꺄 깨 께 꼬 꺼 까 끼 뀨 꾸 끄 꺠 꼐 꽈 꽤 꿔 꿰 꾀 뀌 끠 쇼 셔 샤 새 세 소 서 사 시 슈 수 스 섀 셰 솨 쇄 숴 쉐 쇠 쉬 싀 쑈 쎠 쌰 쌔 쎄 쏘 써 싸 씨 쓔 쑤 쓰 썌 쎼 쏴 쐐 쒀 쒜 쐬 쒸 씌 묘 며 먀 매 메 모 머 마 미 뮤 무 므 먜 몌 뫄 뫠 뭐 뭬 뫼 뮈 믜 뇨 녀 냐 내 네 노 너 나 니 뉴 누 느 냬 녜 놔 놰 눠 눼 뇌 뉘 늬 요 여 야 애 에 오 어 아 이 유 우 으 얘 예 와 왜 워 웨 외 위 의 료 려 랴 래 레 로 러 라 리 류 루 르 럐 례 롸 뢔 뤄 뤠 뢰 뤼 릐 효 혀 햐 해 헤 호 허 하 히 휴 후 흐 햬 혜 화 홰 훠 훼 회 휘 희 쿄 켜 캬 캐 케 코 커 카 키 큐 쿠 크 컈 켸 콰 쾌 쿼 퀘 쾨 퀴 킈 툐 텨 탸 태 테 토 터 타 티 튜 투 트 턔 톄 톼 퇘 퉈 퉤 퇴 튀 틔 쵸 쳐 챠 채 체 초 처 차 치 츄 추 츠 챼 쳬 촤 쵀 춰 췌 최 취 츼 표 펴 퍄 패 페 포 퍼 파 피 퓨 푸 프 퍠 폐 퐈 퐤 풔 풰 푀 퓌 픠";
function lastCon($str) {
global $array;
if(ord($str[strlen($str)-1]) < 128) return false;
$str = substr($str, strlen($str)-2);
if(strstr($array, $str)) return false;
return true;
}
function ul_rul($str) {
return $str.(lastCon($str) ? "을" : "를");
}
function gwa_wa($str) {
return $str.(lastCon($str) ? "과" : "와");
}
function un_num($str) {
return $str.(lastCon($str) ? "은" : "는");
}
function i_ga($str) {
return $str.(lastCon($str) ? "이" : "가");
}

// 도메인 또는 문서가 존재하는지 검사
function exists_url($url, $port="80") {
$fp = @fsockopen($url, $port);
if($fp) return true;
else return false;
}

// 숫자를 한글로 바꾸기
function numtokor($num) {
$text ='';
$d_symbol = array('4' => "만", '8' => "억", '12' => "조", '16' => "경", '20' => "해", '24' => "시", '28' => "양", '32' => "구", '36' => "간", '40' => "정", '44' => "재", '48' => "극", '52' => "항하사", '56' => "아승지", '60' => "나유타", '64' => "불가사의", '68' => "무량대수");
$p_symbol = array('0' => "", '1' => "십", '2' => "백", '3' => "천");
$t_symbol = array('0' => "", '1' => "일", '2' => "이", '3' => "삼", '4' => "사", '5' => "오", '6' => "육", '7' => "칠", '8' => "팔", '9' => "구");

if(substr($num,0,1) == '-') {
$num = substr($num ,1);
$text .= '마이너스';
}
$length_of_num = strlen($num);
if($length_of_num > 72) {
$text = "존재할 수 없는 수치 입니다.";
} else {
//실행
for ($k=0; $k< $length_of_num; $k++) {
$striped_value = substr($num, $k, 1);
$text .= $t_symbol[$striped_value];
$power_value = ($length_of_num - $k -1) % 4;
if ($striped_value <> 0) $text .= $p_symbol[$power_value];
if ($power_value == 0) $text .= $d_symbol[$length_of_num - $k -1];
}
}
return $text;
}

//검색쿼리작성
function querystring($query) {
if($query) {
$queryarray = explode("&", $query);
$count = count($queryarray);

foreach($queryarray as $key => $value) {
$array2st = explode("=", $value);
if($array2st[1]) {
if($querystring) $querystring .= "&".$value;
else $querystring = $value;
}
}

return $querystring;
}
else return "";
}

//페이징
function pagelist($tables, $nowpage, $primarykey , $chartline, $chartpage, $wheres="", $findquery="", $others="", $orders="", $urlquery="", $lastopt=true, $allopt=true, $firstbutton="[처음]", $prebutton="[이전]", $nextbutton="[다음]",$lastbutton="[끝]") {

if($wheres) $wheres = " where {$wheres} ";
if($others) $wheres .= " and {$others} ";

if(!$chartline) $chartline = 10;
if(!$chartpage) $chartpage = 10;

if(intval($nowpage) == 0) $nowpage = 1;
if(intval($nowstep) == 0) $nowstep = 1;

##마지막버튼 유무 체크
if($lastopt) {
$query = "select count(*) count from {$tables} {$wheres} {$others} {$findquery}";
$result = mysql_query($query);
$total = mysql_fetch_object($result);
#총카운트 $total->count;
}

##총검색수
if($allopt) {
$query = "select count(*) count from {$tables} {$wheres}";
$result = mysql_query($query);
$all = mysql_fetch_object($result);
#총검색수 $all->count;
}

##설정값계산
$nowstep = ceil($nowpage/$chartpage);
if($lastopt) {
$allstep = ceil($total->count/($chartpage*$chartline));
$allpage = ceil($total->count/$chartline);
}
$startpage = 1 + ($nowstep-1) * $chartpage;
$endpage = $startpage + $chartpage - 1;

if($lastopt && $endpage > $allpage) $endpage = $allpage;

##다음버튼 유무 체크
$nextline = $nowstep * $chartline * $chartpage;
$nextlimitquery = " limit {$nextline}, 1";
$query = "select {$primarykey} from {$tables} {$wheres} {$others} {$findquery} {$nextlimitquery}";
$result = mysql_query($query);
$nextok = mysql_affected_rows();

##처음버튼 및 이전버튼
if($nowstep > 1) {
$fir = " <a href='$PHP_SELF?$urlquery&nowpage=1'>{$firstbutton}</a> ";
$prepage = $startpage - $chartpage;
$pre = " <a href='$PHP_SELF?$urlquery&nowpage=$prepage'>{$prebutton}</a> ";
} else {
$fir = " <font color='#C0C0C0'>{$firstbutton}</font> ";
$pre = " <font color='#C0C0C0'>{$prebutton}</font> ";
}

##NEXT 버튼 활성화
if($nextok) {
$nextpage = $endpage + 1;
$next = " <a href='$PHP_SELF?$urlquery&nowpage=$nextpage'>{$nextbutton}</a> ";
} else {
$next = " <font color='#C0C0C0'>{$nextbutton}</font> ";
}

##중간페이지
for($i=$startpage;$i<=$endpage;$i++) {
if($i == $nowpage) $pagelist .= " <font color='#6600FF'><b>$i</b></font> ";
else $pagelist .= " <a href='$PHP_SELF?$urlquery&nowpage=$i'>$i</a> ";
}

##끝페이지
if($lastopt && $allstep > $nowstep) {
$lastpage = $allpage;
$last = " <a href='$PHP_SELF?$urlquery&nowpage=$nextpage'>{$lastbutton}</a> ";
} else {
$last = " <font color='#C0C0C0'>{$lastbutton}</font> ";
}


$firstlimit = 0 + ($nowpage-1) * $chartline;
$limitquery = " limit {$firstlimit}, {$chartline}";
$query = "select * from {$tables} {$wheres} {$others} {$findquery} {$orders} {$limitquery}";
$result = mysql_query($query);
while($fetch = mysql_fetch_array($result)) $get[] = $fetch;

$get[0]["count"] = count($get);
$get[0]["page"] = $fir.$pre." [ ".$pagelist." ] ".$next.$last;
if($lastopt) $get[0]["total"] = $total->count;
if($allopt) $get[0]["allto"] = $all->count;

return $get;

}

//업로드
function file_upload($upfile,$upfile_name,$upfile_size,$dir,$newfilename) {
if($upfile_size) {

$is_file = is_file("{$dir}/{$newfilename}");
if($is_file) unlink("{$dir}/{$newfilename}");

move_uploaded_file($upfile, "{$dir}/{$newfilename}");
chmod("{$dir}/{$newfilename}", 0644);

return true;

} else return false;
}

//현재디렉토리
function nowdir() {
global $DOCUMENT_ROOT;
global $PHP_SELF;
$getdir = pathinfo($DOCUMENT_ROOT.$PHP_SELF);
return $getdir["dirname"];
}

Posted by 1010
반응형
구현 환경 : IE5.5 이상

Sample Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>스크롤바의 색상 변경</TITLE>
<style type="text/css">
BODY
{
scrollbar-face-color: #FFFF99;
scrollbar-shadow-color:#000000;
scrollbar-highlight-color: #000000;
scrollbar-arrow-color: #000000;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;     
scrollbar-track-color: #FFFFFF;
}
</style> </HEAD>

<BODY>
<h1>스크롤바의 색상변경</h1>
테스트<br>
테스트<br>
테스트<br>
테스트<br>
테스트<br>
테스트<br>
</BODY>
</HTML>


주요 속성 :
- scrollbar-face-color     : 스크롤바의 바탕색 부분
- scrollbar-shadow-color   : 스크롤바의 선 중 음영 부분
- scrollbar-highlight-colo : 스크롤바의 선 중 하이라이트 부분
- scrollbar-arrow-color    : 스크롤바 화살표 부분

데모 :

- http://www.ihelpers.co.kr/programming/work/scrollbar.html
Posted by 1010
반응형
<PRE>편리한 웹사이트를 위하여 모두 운영하고 있는 사이트에 적용해 보세요.
- accesskey 속성지원 태그<a>,<area>,<input>,<label>,<legend>,<textarea>

- Sample Code<input type=text name=name value="" accesskey=u></PRE>

- Demo - input box

아이디(U) : <INPUT accessKey=u name=name>     * Alt-u 를 눌러 주세요.

-Demo - A tag
Yahoo | Empas | Hanmir |     * 포커스이동후 엔터를 눌러 주세요. <PRE>- 아이헬퍼스 적용사례1. 검색 ( Alt-s를 눌러 주세요. 그럼 검색으로 이동합니다. )2. 로그인 화면</PRE>

Posted by 1010
반응형
<head>
<link rel="shortcut icon" href="http://kr.yahoo.com/favicon.ico">
</head>
Posted by 1010
반응형

<html>
<head><title>Keyboard Event</title>
<meta name="author" content="moyamoya">
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<style type="text/css">
<!--
td {font-family:'굴림체'; font-size:10pt;}
-->
</style>
<script language="JavaScript">
<!--
function getKey(keyStroke) {
 isNetscape=(document.layers);
 eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
 which = String.fromCharCode(eventChooser).toLowerCase();
 alert(which);
}
document.onkeypress = getKey;
// -->
</script>
</head>
<body>
키보드 이벤트... <br>
아무키나 눌러 보세요.
</body>
</html>

Posted by 1010
반응형
이미지 다운 금지... 물론 한계는 있지만 그래도 올려 보았습니다.
<PRE>
<script language="JavaScript1.2">
 var clickmessage="You Cannot save this Image"

function disableclick(e) {
  if (document.all) {
    if (event.button==2||event.button==3) {
         if (event.srcElement.tagName=="IMG"){
                 alert(clickmessage); return false; }
         }
    }
   if (document.layers) {
     if (e.which == 3) {
        alert(clickmessage);
        return false;
     }
    }
}


function associateimages(){
     for(i=0;i<document.images.length;i++){
          document.images[i].onmousedown=disableclick;
     }
     if (document.all){
       document.onmousedown=disableclick
     }else if (document.layers) {
       associateimages()}
 </script>
</HEAD>


<BODY bgcolor=lightyellow>
  <table align=center width=50% border=0 >
      <tr><td> <h3>마우스 오른쪽 버튼을 클릭 해 보세요</h3> </td></tr>
      <tr><td> <img src="img.jpg" border=1> </td></tr>
  </table>
 

</PRE>
Posted by 1010
반응형

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>FIEDSET 예제</title>
<meta name="generator" content="Namo WebEditor FX">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<p><fieldset style="width:200; height:150;border-width:2px;border-color:blue;padding:7pt;" align="center"><legend align="center">나모돌이의
학력</legend></p>
<p>- 나모초등학교<br>- 나모중학교<br>- 나모고등학교<br>- 나모대학교</fieldset></p>
</body>

</html>

Posted by 1010
반응형

onError=""

Posted by 1010
반응형

<img src="" onerror="이미지주소";

Posted by 1010
반응형

<META HTTP-EQUIV="page-enter" content="BlendTrans(Dueation=0.3)">
<META HTTP-EQUIV="page-exit" content="BlendTrans(Dueation=0.3)">

<a href="http://www.naver.com">페이지 이동</a>

Posted by 1010
반응형

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
 <title>RSS 리더기</title>


 <script type="text/javascript">
 // Control
  var txtTimer;
  var lblTimer;
  var refreshTime;
  var rssList;
  var last_modif;

  function timerSet(){
   refreshTime = parseInt(txtTimer.value);

   if(isNaN(refreshTime)){
    alert("숫자기입바람");
    txtTimer.value="";
    txtTimer.focus();
    return;
   }
   lblTimer.replaceChild(document.createTextNode(refreshTime), lblTimer.firstChild );
   refreshXML();
  }

  function refreshXML(){
   clearTimeout(refreshXMLTimer);
   doParse();
   var refreshXMLTimer = setTimeout("refreshXML()", refreshTime*60000 );
   last_modif.replaceChild(document.createTextNode(new Date()), last_modif.firstChild );
  }

  window.onload = function(){
   txtTimer = document.getElementById("txtTimer");
   lblTimer = document.getElementById("lblTimer");
   rssList = document.getElementById("rssList");
   last_modif = document.getElementById("last_modif");
   //timerSet();
   document.getElementById("sendButton").onclick = function (){
    timerSet();
   }
  }


 // RSS Request관련.
  var rssDoc;
  function doParse(){
   if (document.implementation && document.implementation.createDocument){
    try{
     netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
     netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
     netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");
    }catch(e){alert(e);}

    rssDoc = document.implementation.createDocument("", "", null);
    rssDoc.async = false;
   } else if (window.ActiveXObject) {
    rssDoc = new ActiveXObject("Microsoft.XMLDOM");
    rssDoc.async = true;
    rssDoc.onreadystatechange = function (){
     if (rssDoc.readyState != 4) return false;
     rssDocLoad();
     return true;
    }
   } else {
    alert("미지원 브라우져....");
   }

   try{
    var rssAddr = document.getElementById("rssAddr");
    rssDoc.load(rssAddr.value)

    if(rssDoc.readyState==null) rssDocLoad();
   } catch(e) {
    alert(e);
    return;
   }
  }

  function rssDocLoad(){
   tableReset();
   
   var rssTitle = document.getElementById("rssTitle");
   var rssDocsTitle = rssDoc.getElementsByTagName("title").item(0).firstChild.nodeValue;
   var rssDocsLink = rssDoc.getElementsByTagName("link").item(0).firstChild.nodeValue;

   var aEl = document.createElement("a");
   var hrefAttr = document.createAttribute("href");
   hrefAttr.value = rssDocsLink;
   aEl.setAttributeNode(hrefAttr);
   aEl.appendChild(document.createTextNode(rssDocsTitle));
   aEl.target ="_blank";
   rssTitle.replaceChild(aEl, rssTitle.firstChild);


   var itemNode = rssDoc.getElementsByTagName("item");
   var lblProgress = document.getElementById("lblProgress");
   var tbodyEl = document.createElement("tbody");
   
   for(i=0; i<itemNode.length; i++){
    removeWhiteSpace(itemNode[i]);

    var title = "";
    var link = "";
    var description = "";
    var pubDate = "";
    var author = "";
    var category = "";

    for(ix=0; ix<itemNode[i].childNodes.length; ix++){
     var curNode = itemNode[i].childNodes[ix];
     var curNodeVal = curNode.firstChild.nodeValue;
     switch( curNode.tagName ){
      case "title":
       title = curNodeVal;
       break;
      case "link":
       link = curNodeVal;
       break;
      case "description":
       description = curNodeVal;
       break;
      case "author":
       author = curNodeVal;
       break;
      case "category":
      case "dc:subject":
       category = curNodeVal;
       break;
      case "pubDate":
      case "dc:date":
       pubDate = curNodeVal;
       break;
      default:
     }

    }

    var trEl = document.createElement("tr");
    var tdEl;

    tdEl = document.createElement("td");
    tdEl.appendChild(
     document.createTextNode(pubDate.substring(0,10)) );
    trEl.appendChild(tdEl);

    tdEl = document.createElement("td");
    tdEl.appendChild(
     document.createTextNode(title));
    trEl.appendChild(tdEl);

    tdEl = document.createElement("td");
    tdEl.appendChild(
     document.createTextNode(author));
    trEl.appendChild(tdEl);

    tdEl = document.createElement("td");
    var aEl = document.createElement("a");
    var hrefAttr = document.createAttribute("href");
    hrefAttr.value = link;
    aEl.setAttributeNode(hrefAttr);
    aEl.appendChild(document.createTextNode("열기"));
    aEl.target ="_blank";
    tdEl.appendChild(aEl);
    trEl.appendChild(tdEl);

    tdEl = document.createElement("td");
    tdEl.appendChild(
     document.createTextNode(category));
    trEl.appendChild(tdEl);

    tbodyEl.appendChild(trEl);
   }
   rssList.appendChild(tbodyEl);
  }

  function removeWhiteSpace(nodeList){
   var notWhitespace = /\S/
   for (var rwi=0; rwi<nodeList.childNodes.length; rwi++){
    if ((nodeList.childNodes[rwi].nodeType == 3)&&
     (!notWhitespace.test(nodeList.childNodes[rwi].nodeValue))) {
     nodeList.removeChild(nodeList.childNodes[rwi])
     rwi--;
    }
   }
  }

  function tableReset(){
   // 제목만 있다면 지우지 않는다.
   if(rssList.childNodes.length==1) return;

   for(var tri=1; tri<rssList.childNodes.length; tri++){
    rssList.removeChild(rssList.childNodes[tri]);
    tri--;
   }
  }

 </script>
 <style type="text/css">
  table.mainTbl {
   border:1px solid blue;
   background-color:#eaeafa;
   width: 100%;
  }

  table.mainTbl td{
   padding:8px 4px 4px 4px;
  }

  table.mainTbl td.header{
   font-weight:bold;
   border-bottom: 1px solid gray;
  }
  input {
   border:1px solid gray;
   padding: 1px 1px 1px 1px;
  }
 </style>
  </head>
  <body>
 <form action=" ">
        RSS주소: <input type="text" name="rssAddr" id="rssAddr" style="width:350px"/><input type="button" id="sendButton" value="가져오기"/><br/>
 체널: <span id="rssTitle">&nbsp;</span>&nbsp;&nbsp;&nbsp;<br/><br/>
 새로고침은 <input
  type="text" value="1" name="txtTimer" id="txtTimer" style="width:20px"/>분 단위로<input
  type="button" id="btnSet" name="btnSet" value="설 정" onclick="timerSet()"/> (현재 <span id="lblTimer">&nbsp;</span>분 단위로)<br/>
  마지막 읽은 시간 : <span id="last_modif">&nbsp;</span>
 <br/><br/>
 <input type="button" value="새 로 고 침" style="margin-bottom:10px" onclick="javascript:refreshXML();"/>

 <table class="mainTbl" cellpadding="0" cellspacing="0" id="rssList"><tr>
  <td class="header">날짜</td>
  <td class="header">제목</td>
  <td class="header">글쓴이</td>
  <td class="header">원본링크</td>
  <td class="header">카테고리</td>
 </tr></table>
 <br/>
 <div style="text-align:center">by visharp (in <a href="http://okjsp.pe.kr" target="_blank">okjsp.pe.kr</a>)</div>
 </form>
  </body>
</html>

Posted by 1010
반응형

imp system/java fromuser='systme' touser='smbi' file='smbi_20080501.dmp' tables='sbedfp'

exp 한후 imp 시...

fromuser -> touser ... 맞게..

Posted by 1010
반응형

HTML 5에 추가된 새로운 요소 (한글)

구조와 의미

developerWorks
문서 옵션
수평출력으로 설정

이 페이지 출력

이 페이지를 이메일로 보내기

이 페이지를 이메일로 보내기

토론

영어원문

영어원문


제안 및 의견
피드백

난이도 : 초급

Elliotte Harold, 교수, Polytechnic University

2008 년 4 월 01 일

HTML 5는 20세기 이후 처음으로 HTML에 새로운 요소를 추가했습니다. 새 구조 요소로는 aside, figure, section이 있으며 새 인라인 요소로는 time, meter, progress가 있습니다. 또한 새로운 내장 요소로는 videoaudio가 있으며 새로운 대화형 요소로는 details, datagrid, command가 있습니다.

HTML은 1999년 HTML 4를 마지막으로 발전을 멈추었다. W3C는 HTML 기반 문법을 SGML(Standard Generalized Markup Language)에서 XML로 변경하고 SGV(Scalable Vector Graphics), XForm, MathML 등 완전히 새로운 마크업 언어를 개발하는 데 노력을 기울였다. 브라우저 개발업체는 탭과 RSS 리더 같은 브라우저 기능에 초점을 맞추었다. 웹 디자이너들은 CSS와 자바스크립트를 배운 후 기존 프레임워크 상에서 Ajax(Asynchronous JavaScript + XML)를 사용하여 응용 프로그램을 개발하기 시작했다. 하지만 HTML 자체는 지난 8년 동안 아무런 진전도 보이지 않았다.

자주 사용하는 약어
  • CSS: Cascading Style Sheets
  • HTML: Hypertext Markup Language
  • W3C: World Wide Web Consortium
  • XML: Extensible Markup Language

그런데 최근에 이르러 잠자던 사자가 깨어났다. 브라우저 시장에서 주요 3대 주자인 애플, 오페라, 모질라 재단이 WhatWG(Web Hypertext Application Technology Working Group)를 결성하여 기존 HTML을 개선하겠다고 나섰다. 더욱 최근에는 W3C가 이러한 움직임을 감지하고 비슷한 구성원을 모아 차세대 HTML 개발 대열에 동참했다. 결국은 두 대열이 하나로 합쳐지리라 생각한다. 아직까지 구체적인 내용은 논쟁할 여지가 많이 남았지만, 다음 HTML 버전의 전체적인 윤곽은 점차 자리를 잡아가고 있다.

(HTML 5 혹은 Web Applications 1.0이라 부르는) 새 HTML 버전은 1999년 얼음에 동결되었다가 막 해동된 원시인 웹 디자이너들도 금방 익숙해지리라 생각한다. 새 버전은 이름 공간(namespace)이나 스키마(schema)가 없다. 요소를 닫지 않아도 괜찮다. 브라우저는 오류에 관대하다. p는 여전히 p이고 table은 여전히 table이다.

그렇지만 동시에 막 해동된 웹 디자이너들은 다소 혼란스럽고 새로운 요소도 접하게 된다. 그렇다. div 같은 옛 친구는 그대로지만 section, header, footer, nav가 새롭게 등장했다. em, code, strong도 그대로지만 meter, time, m이 생겨났다. imgembed도 그대로 사용하지만, 이제 videoaudio도 있다. 그러나 해동되었던 원시인이라도 조금만 꼼꼼히 들여다 보면, 새로운 요소가 그리 새로운 개념은 아니라는 사실이 드러난다. 대다수는 1999년에도 필요했으나 존재하지 않았던 요소일 뿐이다. 기존 요소와 비교하면서 살펴보면 새 요소를 배우기가 전혀 어렵지 않다. 오히려 Ajax나 CSS보다 이해하기 더 쉽다.

마지막으로, (HTML과 마찬가지로 1999년에서 멈춘) 윈도우 98이 돌아가는 300MHz 노트북에서 새 HTML 페이지를 띄워보면 Netscape 4나 Windows® Internet Explorer® 5에서도 페이지가 문제 없이 뜬다. 놀랍지 않은가. 물론 브라우저가 새 요소 태그를 제대로 인식하지 못하겠지만 그래도 페이지는 뜨고 내용은 모두 담겨 있다.

이것은 우연의 일치가 아니다. 처음부터 설계를 이렇게 했다. 브라우저가 HTML 5를 지원하지 않는 경우 HTML 5는 우아하게 자신의 버전을 낮춘다. 이유는 간단하다. 우리 모두가 1999년에서 막 해동된 원시인이기 때문이다. 현재 브라우저는 탭, CSS, XmHttpRequest를 지원하지만 HTML 렌더링 엔진은 1999년 기술 그대로다. 기존 사용자 기반을 고려하지 않고서는 웹을 진화시키기 어렵다. HTML 5는 이러한 사실을 이해한다. 그래서 HTML 5는 현재 페이지 작성자들에게 실질적인 이익을 제공함과 동시에 사용자들이 브라우저를 서서히 판올림하면서 그 수가 늘어갈 미래 페이지 작성자들에게 더 큰 이익을 약속한다. 이러한 사실을 염두에 두고 이제 HTML 5를 둘러보자.

구조

흔히 형식이 잘 갖춰진(well-formed) HTML 페이지라도 구조가 부실하기에 처리하기가 쉽지 않다. 처음부터 페이지를 분석하여 구역(section)이 나뉘는 지점을 찾아내야 한다. 일반적으로 사이드바, 바닥글, 머리글, 탐색 메뉴, 기본 내용 구역, 개별 내용은 모두 다용도 div 요소로 나눠진다. HTML 5는 자주 사용하는 구조를 표현하도록 새로운 요소를 제공한다.

  • section: 책에서 부나 장, 장에서 절 등 근본적으로 HTML 4에서 heading을 사용하던 내용은 무엇이나 가능하다.
  • header: 페이지에 표시하는 페이지 머리글로, head 요소와 다르다.
  • footer: 잔글씨로 표시하는 페이지 바닥글로, 전자편지 서명 등이 들어간다.
  • nav: 다른 페이지를 가리키는 링크 모음이다.
  • article: 블로그, 잡지, 개요 등에 포함되는 개별 항목을 가리킨다.

예를 들어 오늘날에 사용하는 전형적인 블로그 페이지를 살펴보자. Listing 1에서 보듯이 페이지 상단에는 머리글, 하단에는 바닥글, 항목 몇 개, 탐색 메뉴, 사이드바가 있다.


Listing 1. 오늘날 전형적인 블로그 페이지
                
<html>
  <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
<div id="page">
  <div id="header">
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </div>
  <div id="container">
    <div id="center" class="column">               
      <div class="post" id="post-1000572">
        <h2><a href=
      "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
      Spring Comes (and Goes) in Sussex County</a></h2>
        
        <div class="entry">
          <p>Yesterday I joined the Brooklyn Bird Club for our
          annual trip to Western New Jersey, specifically Hyper
          Humus, a relatively recently discovered hot spot. It
          started out as a nice winter morning when we arrived
          at the site at 7:30 A.M., progressed to Spring around
          10:00 A.M., and reached early summer by 10:15. </p>
        </div>
      </div>


      <div class="post" id="post-1000571">
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
           But does it count for your life list?</a></h2>
        
        <div class="entry">
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
        </div>
      </div>

      </div>
    
    <div class="navigation">
      <div class="alignleft">
         <a href="/blog/page/2/">&laquo; Previous Entries</a>
       </div>
      <div class="alignright"></div>
    </div>
  </div>

  <div id="right" class="column">
    <ul id="sidebar">
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="footer">
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </div>
</div>
  
</body>
</html>

들여쓰기에 신경을 쓴다 해도 div가 여러 차례 중첩되어 꽤나 복잡하다. 반면 Listing 2에서 보듯이 HTML 5에서는 페이지가 좀더 구조적이다.


Listing 2. HTML 5에서 전형적인 블로그 페이지
                
<html>
 <head>
    <title>Mokka mit Schlag </title>
 </head>
<body>
  <header>
    <h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
  </header>
  <section>               
      <article>
        <h2><a href=
        "/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
         Spring Comes (and Goes) in Sussex County</a></h2>
        
        <p>Yesterday I joined the Brooklyn Bird Club for our
        annual trip to Western New Jersey, specifically Hyper
        Humus, a relatively recently discovered hot spot. It
        started out as a nice winter morning when we arrived at
        the site at 7:30 A.M., progressed to Spring around 10:00
        A.M., and reached early summer by 10:15. </p>
      </article>


      <article>
        <h2><a href=
          "/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
          But does it count for your life list?</a></h2>
        
          <p>Seems you can now go <a
          href="http://www.wired.com/science/discoveries/news/
          2007/04/cone_sf">bird watching via the Internet</a>. I
          haven't been able to test it out yet (20 user
          limit apparently) but this is certainly cool.
          Personally, I can't imagine it replacing
          actually being out in the field by any small amount.
          On the other hand, I've always found it quite
          sad to meet senior birders who are no longer able to
          hold binoculars steady or get to the park. I can
          imagine this might be of some interest to them. At
          least one elderly birder did a big year on TV, after
          he could no longer get out so much. This certainly
          tops that.</p>
      </article>    
    <nav>
      <a href="/blog/page/2/">&laquo; Previous Entries</a>
    </nav>
  </section>

  <nav>
    <ul>
      <li><h2>Info</h2>
      <ul>
        <li><a href="/blog/comment-policy/">Comment Policy</a></li>
        <li><a href="/blog/todo-list/">Todo List</a></li>
      </ul></li>
      <li><h2>Archives</h2>
        <ul>
          <li><a href='/blog/2007/04/'>April 2007</a></li>
          <li><a href='/blog/2007/03/'>March 2007</a></li>
          <li><a href='/blog/2007/02/'>February 2007</a></li>
          <li><a href='/blog/2007/01/'>January 2007</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <footer>
    <p>Copyright 2007 Elliotte Rusty Harold</p>
  </footer>
  
</body>
</html>

더 이상 div가 필요하지 않다. class 속성으로 구역 종류를 나타낼 필요도 없다. 표준 이름을 보면 무슨 구역인지 바로 드러난다. 이는 오디오, 모바일 폰, 기타 비표준 브라우저에서 특히 중요하다.




위로


의미적 블록 요소

구조적 요소 외에도 HTML 5는 순전히 의미적으로 사용하는 블록 요소를 제공한다.

  • aside
  • figure
  • dialog

나는 책과 기사에서 첫 두 요소를 항상 사용한다. 세 번째 요소는 개인적으로 별로 사용하지 않으나 텍스트에 많이 사용한다.

aside

aside 요소는 참고, 팁, 사이드바, 독립 인용(pullquote), 괄호 삽입구 등 본문 흐름에서 벗어나는 문장을 나타낸다. 예를 들어 Listing 3에서 보듯이 developerWorks 기사는 사이드바를 흔히 표로 구현한다.


Listing 3. developerWorks HTML 4 사이드바
                
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>
</td></tr></tbody></table><br>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</td></tr></table>

HTML 5에서는 Listing 4처럼 좀더 합리적으로 구현할 수 있다.


Listing 4. developerWorks HTML 5 사이드바
                
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
  
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em  }</pre>

<p>
However, Firefox doesn't yet support this syntax. 
</p>
</aside>

사이드바가 놓일 위치는 CSS에서 힌트를 얻어 브라우저가 판단한다.

figure

figure 요소는 이미지 블록과 제목을 표현한다. 예를 들어 developerWorks 기사는 Listing 5와 같은 HTML 코드를 많이 쓴다. 결과는 그림 1과 같다.


Listing 5. developerWorks HTML 4 그림
                
<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item: 
   Mozilla XForms 0.7 Unsigned" 
  src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />


Figure 1. Mozilla XForms 다이얼로그 설치
A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned

HTML 5에서는 Listing 6과 같이 좀더 의미 있게 구현할 수 있다.


Listing 6. developerWorks HTML 5 그림
                
<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the following item: 
    Mozilla XForms 0.7 Unsigned" 
    src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

가장 중요하게, figure 요소를 사용하면 브라우저는 (특히 스크린 리더는) 이미지와 이미지 제목을 분명하게 연관짓게 된다.

figure 요소를 반드시 이미지에만 사용하라는 법은 없다. audio, video, iframe, object, embed 등과 같은 요소에 제목을 붙일 때도 figure 요소를 사용하면 편리하다.

dialog

dialog 요소는 여러 사람 간에 일어나는 대화를 표현한다. HTML 5는 dt 요소를 연설자로, dd 요소는 연설로 중복정의(overload)한다. 따라서 HTML 5를 지원하지 않는 브라우저에서도 페이지가 어느 정도 모양새를 갖춘다. Listing 7은 갈렐레오의 “주요한 2대 체계에 대한 대화(Dialogue Concerning the Two Chief World Systems)”라는 다소 유명한 연설이다.


Listing 7. HTML 5로 표현한 갈렐레오의 대화
                
<dialog>
	<dt>Simplicius </dt> 
    <dd>According to the straight line AF,
	and not according to the curve, such being already excluded
	for such a use.</dd>

	<dt>Sagredo </dt> 
    <dd>But I should take neither of them,
	seeing that the straight line AF runs obliquely. I should
	draw a line perpendicular to CD, for this would seem to me
	to be the shortest, as well as being unique among the
	infinite number of longer and unequal ones which may be
	drawn from the point A to every other point of the opposite
	line CD. </dd>

	<dt>Salviati </dt> 
    <dd><p> Your choice and the reason you
	adduce for it seem to me most excellent. So now we have it
	that the first dimension is determined by a straight line;
	the second (namely, breadth) by another straight line, and
	not only straight, but at right angles to that which
	determines the length. Thus we have defined the two
	dimensions of a surface; that is, length and breadth. </p>

	<p> But suppose you had to determine a height—for
	example, how high this platform is from the pavement down
	below there. Seeing that from any point in the platform we
	may draw infinite lines, curved or straight, and all of
	different lengths, to the infinite points of the pavement
	below, which of all these lines would you make use of? </p>
	</dd>
</dialog>

dialog 요소의 정확한 문법은 아직도 논의가 분분하다. 어떤 사람들은 dialog 요소 안에 (무대 지시문처럼) 대화가 아닌 문장을 추가하고 싶어 한다. 어떤 사람들은 dtdd를 중복정의(overload)해서는 안 된다고 주장한다. 그러나 대화를 의미적으로 표현하는 요소가 필요하다는 사실에는 대다수가 동의한다. 정확한 문법에는 동의하지 못할지라도 말이다.




위로


의미적 인라인 요소

HTML 4에는 var, code, kbd, tt, samp라는, 컴퓨터 코드를 살짝 변형한 인라인 요소 5개가 있었다. 그러나 시간이나 숫자나 야유 등과 같이 기본적인 속성을 표현할 방법은 없었다. HTML 5가 제공하는 새 인라인 요소는 기술자와 보통 저작자 사이에 존재하는 불균형을 바로 잡아준다.

mark

m 요소는 강조할 필요까진 없으나 “주목”해야 할 문구를 표현한다. 책에서 형광색 펜으로 표시하는 부분에 해당한다. 구글 “저장된 페이지”가 아주 적당한 예다. “저장된 페이지”를 열면 검색 용어가 다른 색으로 표시된다. 예를 들어 “Egret”을 검색하면 구글 “저장된 페이지”는 다음 코드를 사용할 수 있다.

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)  is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

요소 이름은 아직 논쟁 중이다. 명세가 나오기 전에 mmark로 바꿀지도 모른다.

time

time 요소는 특정한 시각을 표현한다. 예를 들어 5:35 P.M., EST, April 23, 2007을 다음과 같이 표현할 수 있다.

<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

time 요소를 사용하면 브라우저나 기타 응용 프로그램이 HTML 페이지에서 시각을 인식할 수 있다. 요소 내용은 어떤 형식이라도 상관이 없다. 그러나 각 time 요소는 datetime 속성을 사용하여 시스템이 인식하는 시각 형식을 지정해야 한다.

<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

시스템이 인식하는 시각 형식을 사용하면 검색 엔진, 달력 프로그램 등과 같은 응용 프로그램에서 시각을 인식하기 쉬워진다.

meter

meter 요소는 특정한 범위에 속하는 숫자 값을 표현한다. 예를 들면 월급, 프랑스 선거에서 르펜의 득표율, 테스트 점수 등에 사용한다. 여기서는 Software Development 2007에서 구글 프로그래머가 제공한 자료에 meter를 사용했다.

<p>An entry level programmer in Silicon Valley 
can expect to start around <meter>$90,000</meter> per year.
</p>

meter 요소를 사용하면 브라우저나 기타 응용 프로그램이 HTML 페이지에서 양을 인식할 수 있다. 요소 내용은 어떤 형식이라도 상관이 없다. 그러나 각 meter 요소는 최대 6개 속성을 사용하여 시스템이 인식하는 숫자 값을 지정해야 한다.

  • value
  • min
  • low
  • high
  • max
  • optimum

각 속성에는 관련 범위를 묘사하는 숫자를 지정해야 한다. 예를 들어 기말 고사 점수는 다음과 같이 표현할 수 있다.

<p>Your score was 
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>

위 코드는 총점 100점에 실제 점수는 88.7이라는 사실을 나타낸다. 가능한 최저 점수는 0인데 실제 최저 점수는 65점이다. 이상적인 최고 점수는 100점이지만 실제 점수는 96점이다. 응용 프로그램은 이 정보를 측정기에 표시하거나 툴팁에 추가하는 등 다양하게 표현할 수 있다. 하지만 대개는 다른 인라인 요소와 같은 방식으로 표현하리라 생각한다.

progress

progress 요소는 현재 진행 중인 상태를 표현한다. GUI 응용 프로그램에서 사용하는 진행 상태 표시 막대와 동일하다. 예를 들어 파일을 다운로드한 정도나 영화가 남은 시간을 progress 요소로 표현하면 간편하다. 다음 코드는 다운로드를 33% 완료했음을 나타낸다.

<p>Downloaded: 
  <progress value="1534602" max="4603807">33%</progress>
</p>

value 속성은 현재 값을 나타내며, max 속성은 최대 값을 나타낸다. 위 코드는 총 460만 3807바이트 중 현재 153만 4602바이트를 다운로드했음을 뜻한다.

max 속성을 생략하면 무한한 진행 상태 막대가 표시된다.

작업이 계속됨에 따라 진행 상태 막대를 동적으로 갱신하려면 자바스크립트를 사용한다. progress 요소는 동적으로 표현해야 흥미롭다.




위로


내장된 미디어

웹에서 비디오는 커다란 인기를 끌고 있지만, 대다수 웹 비디오 재생기는 독점적인 기술을 사용한다. 유튜브는 플래시를, 마이크로소프트는 윈도우 미디어(Windows Media®)를, 애플은 퀵타임을 사용한다. 그러다 보니 모든 브라우저에서 돌아가는 비디오 내장 마크업이 없다. 그래서 WhatWG는 임의의 비디오 형식을 내장하는 새 video 요소를 제안했다. 예를 들어 내 퀵타임 영화를 다음과 같이 내장할 수 있다.

<video src="http://www.cafeaulait.org/birds/sora.mov" />
  

특정 형식과 코덱을 선호할지 여부는 아직도 논의 중이다. 아마 Ogg Theora를 필수로 만들거나 적어도 강력히 권장할 가능성이 크다. 퀵타임과 같은 독점 형식이나 MPEG-4와 같이 특허가 걸린 형식은 선택으로 남겨두리라 생각한다. 하지만 GIF, JPEG, PNG 형식이 BMP, X-Bitmap, JPEG 2000 등 다른 형식을 제치고 img 요소가 선호하는 이미지 형식으로 자리 잡았듯이, video 요소가 선호하는 비디오 형식도 결국은 시장에서 판가름 나리라 믿는다.

video에 상응하는 audio 형식도 제안되었다. 예를 들어 다음과 같이 웹 페이지에 배경 음악을 깔 수 있다.

<audio src="spacemusic.mp3"
    autoplay="autoplay" loop="20000" />
  

autoplay 속성은 페이지를 브라우저에 올리자마자 사용자 요청을 기다리지 말고 음악을 시작하라는 뜻이다. 그런 다음 루프를 2000번 돌 때까지 (혹은 사용자가 윈도우를 닫거나 다른 페이지로 이동할 때까지) 음악을 계속 연주한다. 물론, 브라우저는 내장 미디어에 대해 소리를 없애거나(mute) 재생을 일시중지하는(pause) 기능을 제공해야 한다. 페이지 작성자가 페이지에 이런 기능을 넣었든 넣지 않았든 상관 없이 브라우저는 기본적으로 두 기능을 제공해야 한다.

브라우저는 WAV 형식을 지원해야 한다. 또한 MP3와 같은 형식을 지원해도 좋다.

기존 브라우저는 audio/video 마크업을 지원하지 않으며 시각/청각 장애자는 비디오/오디오를 시청/청취하지 못하므로, 비디오와 오디오 내용을 설명하는 마크업이 추가될지도 모른다. 이 정보는 검색 엔진이 반기리라 생각한다. 이상적으로는 비디오 대본이나 오디오 전사본이면 가장 좋다. 예를 들어 Listing 8은 존 F. 케네디 대통령의 취임 연설을 구현한 코드다.


Listing 8. HTML 5로 표현한 존 F. 케네디 취임 연설
                
<audio src="kennedyinauguraladdrees.mp3">
    <p>
    Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
    President Eisenhower, Vice President Nixon, President Truman,
    Reverend Clergy, fellow citizens:
    </p>
    
    <p>
    We observe today not a victory of party, but a celebration of
    freedom -- symbolizing an end, as well as a beginning -- 
   signifying renewal, as well as change. For I have sworn before
    you and Almighty God the same solemn oath our forebears
    prescribed nearly a century and three-quarters ago.
    </p>
    
    <p>
    The world is very different now. For man holds in his mortal
    hands the power to abolish all forms of human poverty and all
    forms of human life. And yet the same revolutionary beliefs for
    which our forebears fought are still at issue around the globe -- 
    the belief that the rights of man come not from the
    generosity of the state, but from the hand of God.
    </p>
    
    <p>
    ...
    </p>
    
    </audio>




위로


상호작용

HTML 5는 Web Applications 1.0의 그늘에 속한다. HTML 5는 그 언저리에 몇 가지 새 요소를 추가해 웹 페이지와 사용자 사이 상호작용 정도를 높인다.

  • details
  • datagrid
  • menu
  • command

위 요소는 사용자 동작과 선택에 따라 페이지 내용을 바꾼다. 이 때 서버에서 새 페이지를 읽어들이지 않는다.

details

details 요소는 기본적으로 표시되지 않는 상세정보를 가리킨다. 선택적인 legend 요소로 상세정보를 요약해도 좋다. details의 적합한 사용처는 각주(footnote)나 후주(endnote)다. 예를 들어 다음 코드를 보자.

The bill of a Craveri's Murrelet is about 10% thinner 
than the bill of a Xantus's Murrelet. 
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds, 
(New York: Chanticleer Press, 2000) p. 247
 </p>
</details>

페이지를 표시하는 방법은 정확히 명시되지 않았다. 브라우저에 따라 1) 각주, 2) 후주, 3) 툴팁으로 표시할 수 있다.

details 요소에 open 속성을 지정해도 된다. open 속성을 지정하면 상세정보가 기본으로 표시된다. open 속성이 없으면 사용자가 요청할 때까지 상세정보는 숨겨진다. 어느 쪽이든 사용자가 아이콘/표시기를 클릭하여 상세정보를 표시하거나 숨길 수 있다.

datagrid

datagrid 요소는 그리드 컨트롤을 제어한다. 주로 정적 자료를 표현하는 기존 표와는 달리 사용자나 스크립트가 동적으로 갱신하는 트리, 목록, 표에 사용한다.

datagrid는 초기 자료를 요소 내용에서 가져온다. 요소 내용은 table, select 등 HTML 그룹 요소라면 무엇이든 가능하다. 예를 들어 Listing 9는 datagrid로 성적표를 구현한다. 여기서는 table에서 초기 자료를 가져온다. 좀더 단순한 1차원 자료라면 table 대신 select를 사용해도 좋다. 다른 HTML 요소를 사용하면 datagrid는 자식 하나를 행 하나로 가져온다.


Listing 9. 성적표 datagrid
                
<datagrid>
  <table>
    <tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
    <tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
    <tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
    <tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
  </table>
</datagrid>

datagrid가 일반 표와 다른 점이라면, 이제 사용자는 행과 열과 셀을 선택하고, 행과 열과 셀을 축소하고, 셀을 편집하고, 행과 열과 셀을 삭제하고, 그리드를 정렬하는 등 브라우저 내에서 자료를 직접 조작할 수 있다. 자바스크립트 코드는 수정된 내용을 기억한다. Listing 10에서는 이러한 기능을 지원하기 위해 DOM(Document Object Model)에 HTMLDataGridElement 인터페이스를 추가했다.


Listing 10. HTMLDataGridElement
                
interface HTMLDataGridElement : HTMLElement {
           attribute DataGridDataProvider data;
  readonly attribute DataGridSelection selection;
           attribute boolean multiple;
           attribute boolean disabled;
  void updateEverything();
  void updateRowsChanged(in RowSpecification row, in unsigned long count);
  void updateRowsInserted(in RowSpecification row, in unsigned long count);
  void updateRowsRemoved(in RowSpecification row, in unsigned long count);
  void updateRowChanged(in RowSpecification row);
  void updateColumnChanged(in unsigned long column);
  void updateCellChanged(in RowSpecification row, in unsigned long column);
};

DOM을 사용해 자료를 동적으로 메모리에 올려도 된다. 즉 datagrid에 초기 자료를 제공하는 table이나 select가 없어도 좋다. 대신, Listing 11과 같이 DataGridDataProvider 개체로 자료를 제공한다. 이 방법을 사용하면 데이터베이스로부터 XmlHttpRequest나 자바스크립트가 통신할 수 있는 어느 곳에서든 자료를 가져올 수 있다.


Listing 11. DataGridDataProvider
                
interface DataGridDataProvider {
  void initialize(in HTMLDataGridElement datagrid);
  unsigned long getRowCount(in RowSpecification row);
  unsigned long getChildAtPosition(in RowSpecification parentRow, 
      in unsigned long position);
  unsigned long getColumnCount();
  DOMString getCaptionText(in unsigned long column);
  void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
  DOMString getRowImage(in RowSpecification row);
  HTMLMenuElement getRowMenu(in RowSpecification row);
  void getRowClasses(in RowSpecification row, in DOMTokenList classes);
  DOMString getCellData(in RowSpecification row, in unsigned long column);
  void getCellClasses(in RowSpecification row, in unsigned long column, 
      in DOMTokenList classes);
  void toggleColumnSortState(in unsigned long column);
  void setCellCheckedState(in RowSpecification row, in unsigned long column, 
      in long state);
  void cycleCell(in RowSpecification row, in unsigned long column);
  void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};

menu와 command

menu 요소는 적어도 버전 2부터 HTML에 존재했다. HTML 4에서 사용하지 않게 되었으나 HTML 5에서 새로운 모습으로 돌아왔다. HTML 5에서 menucommand 요소를 포함하는데, 각 요소는 즉각적인 동작을 유발한다. 예를 들어 Listing 12는 팝업 경고를 띄우는 메뉴다.


Listing 12. HTML 5 메뉴
                
<menu>
    <command onclick="alert('first command')"  label="Do 1st Command"/>
    <command onclick="alert('second command')" label="Do 2nd Command"/>
    <command onclick="alert('third command')"  label="Do 3rd Command"/>
</menu>

checked="checked" 속성을 지정하면 명령은 확인란이 된다. radiogroup 속성을 지정하면 확인란이 라디오 버튼(radio button)으로 바뀐다. 라디오 버튼 그룹을 정의할 때는 같은 그룹으로 묶을 명령에 같은 radiogroup 속성 값을 지정한다.

간단한 명령 목록 외에 도구 모음(toolbar)이나 팝업 컨텍스트 메뉴에도 menu 요소를 사용한다. 이 때는 type 속성을 toolbarpop으로 지정한다. 예를 들어 Listing 13은 WordPress와 같은 블로그 편집기에서 흔히 사용하는 도구 모음이다. icon 속성은 버튼에 그림을 입힌다.


Listing 13. HTMl 5 도구 모음
                
<menu type="toolbar">
    <command onclick="insertTag(buttons, 0);"  label="strong" icon="bold.gif"/>
    <command onclick="insertTag(buttons, 1);"  label="em" icon="italic.gif"/>
    <command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
    <command onclick="insertTag(buttons, 3);"  label="b-quote" icon="blockquote.gif"/>
    <command onclick="insertTag(buttons, 4);"  label="del" icon="del.gif"/>
    <command onclick="insertTag(buttons, 5);"  label="ins" icon="insert.gif"/>
    <command onclick="insertImage(buttons);"   label="img" icon="image.gif"/>
    <command onclick="insertTag(buttons, 7);"  label="ul" icon="bullet.gif"/>
    <command onclick="insertTag(buttons, 8);"  label="ol" icon="number.gif"/>
    <command onclick="insertTag(buttons, 9);"  label="li" icon="item.gif"/>
    <command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
    <command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
    <command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
    <command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu>

메뉴 제목은 label 속성을 사용한다. 예를 들어 Listing 14는 편집 메뉴다.


Listing 14. HTML 5 편집 메뉴
                
<menu type="popup" label="Edit">
    <command onclick="undo()"   label="Undo"/>
    <command onclick="redo()"   label="Redo"/>
    <command onclick="cut()"    label="Cut"/>
    <command onclick="copy()"   label="Copy"/>
    <command onclick="paste()"  label="Paste"/>
    <command onclick="delete()" label="Clear"/>
</menu>

메뉴를 다른 메뉴 아래 정의해 메뉴 계층을 만들어도 무방하다.




위로


결론

HTML 5는 미래 웹의 일부다. HTML 5가 제공하는 새로운 요소는 마크업을 더욱 간단하고 명료하게 만든다. 그만큼 웹 페이지도 더욱 명료해진다. 앞으로도 여전히 divspan을 사용하겠지만, 예전만큼 광범위하게 사용하지는 않으리라 생각한다. 많은 경우 더 이상 div나 span을 사용할 필요가 없을 테니까.

당장은 모든 브라우저가 새로운 요소를 지원하지는 않겠지만, 처음 HTML이 창안된 이후에 나왔던 img, table, object도 모두 같은 과정을 거쳤다. 점차 새로운 요소를 지원하는 브라우저가 늘어나리라 믿는다. 비록 새로운 요소를 지원하지 않아도 기존 브라우저에서 HTML 5 페이지를 읽기에 무리가 없다. 인식하지 못하는 요소를 무시하는 HTML 방식 덕택이다. 최신 브라우저를 갖춘 사용자는 좀더 멋진 경험을 하겠지만, 누구도 페이지를 못 읽는 불편함은 겪지 않으리라.

새 기능이 나오기까지 8년은 참으로 긴 시간이었다. 특히나 급격히 변하는 웹 세상에서는 더욱 오랜 시간이었다. HTML 5는 넷스케이프나 마이크로소프트 등 초창기 업체가 격주로 새 요소를 내놓던 초기 시절의 흥분을 어느 정도 되살렸다. 그러면서도 모두가 사용하기 쉽도록 상호운용성을 충분히 고려하여 아주 신중하게 요소를 정의했다. 미래가 밝아 보인다.



참고자료

교육

제품 및 기술 얻기

토론


필자소개

Elliotte Rusty Harold는 뉴 올리언즈 태생이다. 원조 검프 스프 맛을 찾아 뉴 올리언즈를 자주 방문하지만, 현재 브룩클린 근처 프로스펙트 하이츠에서 아내 베스와 고양이 두 마리를 키우며 폴리테크닉 대학 전자계산학과 조교수로 자바와 객체 지향 프로그래밍을 강의하고 있다. 그가 운영하는 Cafe au Lait 사이트는 인터넷에서 가장 인기 있는 자바 사이트 중 하나가 되었고, 또 다른 사이트 Cafe con Leche 역시 가장 대중적인 XML 사이트 중 하나가 되었다. 올 봄에는 애디슨 웨슬리 출판사를 통해 Refactoring HTML을 출판할 예정이다.

Posted by 1010
반응형
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
Div 박스처리
</div>
Posted by 1010
반응형
<BASE target="_son">
초보 웹 프로그래머를 귀찮고 당황하게 하는 경우를 하나 소개하고자 한다.

<상황>
이미 라이브된 웹 사이트에서 사용자가,
특정한 경우에 자바스크립트 에러가 난다는 것을 리포팅했다.
팀장이 그 이야기를 듣고 당장 고쳐놓으라고 주문한다.

급하게 javascript 파일인 js파일을 열어서 수정한 다음 서버에 업로드를 마쳤다.
그리고 팀장에게 '수정 완료했습니다.' 보고를 한다.

그런데 왠일인지 팀장이 확인을 해보더니
'아직 그대론데?"라고 한다.

살펴보니 아까 그 페이지를 보았을 때 사용된 js파일을
팀장의 웹 브라우저가 웹 캐쉬에 저장해두었고
그 캐쉬를 그대로 사용하여 페이지를 불렀기 때문에 갱신이 안된 것이다.

'Ctrl+F5눌러서 캐쉬 무시하고 리로드 해보세요'

그렇게 하더니 팀장은 '어.. 이제 되네.. 수고했어..'라고 한다.

그런데 그렇게 만만한 팀장은 아니다.
'근데 말이야, 다른 사용자들도 Ctrl+F5 안누르면 나처럼 다 에러나는거 아냐?'
맞는 말이다.

그래서 개발자는 이야기한다.
'시간이 좀 지나면 서서히 갱신이 될겁니다... IE가 다 그렇죠 뭐~~~'

하지만 역시 만만한 팀장은 아니다.
'무슨 소리를 하는거야, 무슨 수를 써서든 사용자들이 갱신된 js파일을 적용받도록 해!'


이런 일, 웹 개발자들이 한번씩 경험하는 일이라고 생각하는데...

이 때의 어떻게 해결하는 것이 가장 현명할까?

1. js 파일명을 바꾸어서 서버에 저장하고, HTML에서도 수정한다.
수정전 : <script type="text/javascript" src="/js/scripts.js"></script>
수정후 : <script type="text/javascript" src="/js/scripts_v2.js"></script>

이렇게 하면 당장 해결은 되겠지만,
이런 일이 반복되다 보면 서버측에 는 script파일들이 잔뜩 쌓이게 되고 버전 관리가 복잡하게 된다.
서버에서 해당 디렉토리를 열어보면,
script.js, script_v2.js, script_20071206.js, script.bk.js, script_last.js...
이렇게 되어있기 십상이다.

그러다가 어느 날 큰맘먹고 최신 버전 이외의 파일을 싹 delete하면,
갑자기 갑자기 몇개의 페이지에서 에러가 발생하기 시작한다.

'어, 여기 제가 담당하는 페이지 에러가 나는데요? 누가 script_the_last.js 파일 삭제했어요?'
'아니, 제가 지웠는데요, 아직도 그 파일쓰고 있었어요? 3개월전에 script_real_last.js로 바꿨어요~~'

차라리 이렇게 발견이라도 되면 다행이다.
발견되지 않고 몇주동안 에러가 나는 페이지를 고객에게 서비스하게 되는 일이 일어나지 말라는 법이 없다.

그래서 이방법은 비추천.
(특히 계절마다 갑자기 책상을 말끔히 정리하고 싶은 충동이 드는 사람들에게 비추천^^)

2. 웹 서버 설정을 바꾸어서, 또는 다른 방법으로, JS 파일이 캐쉬를 타지 않도록 한다.
어떤 이들은 스크립트가 호출되는 페이지를 no-cache로 하면 된다고 하기도 하는데,
해보면 잘 안될것이다. 그것은 스크립트파일을 no-cache하라는게 아니라, 그 페이지를 no-cache할 뿐

JS 파일자체를 no-cache로 해야 하며
이 파일이 있는 웹서버의 설정을 바꾸면 캐쉬를 타지 않게 할 수 있다.
그러면 원천적으로 사용자의 브라우저는 항상 JS파일을 서버에서 받아오게 된다.

하지만, 웹서버 숫자가 너무 많거나, 디렉토리 설계상 너무 복잡해서 힘들거나,
시스템 엔지니어링 팀과 평소 사이가 안좋아서 고쳐주지 않는 일이 발생할 수도 있다.
(서버에서 웹캐쉬 expire 주기를 조정하는 것도 방법이다)

그럴 때 생각해보는 방법
수정전 : <script type="text/javascript" src="/js/scripts.js"></script>
수정후 : <script type="text/javascript" src="/js/scripts.php"></script>

static파일인 js파일을 asp로 확장자를 바꾸었고,
해당 웹서버가 php확장자는 모두 php 웹스크립트로 인식하도록 되어있다면
위와 같이 바꾸면 일반적인 웹서버 설정, 브라우저 설정에서 캐쉬로 저장하는 것은
브라우저가 열려있는 동안이다. 브라우저 창 모두 닫고 새창 열어서 다시 들어가면 갱신된다는 뜻.

하지만, 위의 어떤 방법이든,
static파일로서 웹서버를 혹사시키지 않고 사용자 캐쉬를 사용해야 하는 파일을
강제로 항상 갱신하게 되는 결과가 되어, 사용자가 많은 사이트의 경우
서버 증설이 필요할 정도의 비효율이 발생할 수도 있다.

그래서 비추천.

3. 그래서 어떻게 하면 좋나?
수정전 : <script type="text/javascript" src="/js/scripts.js"></script>
수정후 : <script type="text/javascript" src="/js/scripts.js?version=20071207"></script>

1번과 2번 방법이 섞인것 같아 보이는가? 하지만 아니다.
서버에는 실제로 scripts.js 파일만 올라가 있다.
또, 수정후에 뒤에 붙은 변수인 version=20071207
php에서처럼 스크립트에 입력되는 request가 아니라 그냥 구분을 위해서 붙여놓은 것이다.
해단 request 변수는 js 파일에 영향을 미치지 않는다.
이렇게 해 두면 웹 브라우저는 버전별로 다른 웹 캐쉬를 생성하게 된다.

보통의 웹 브라우저는
/js/scripts.js?version=20071207
/js/scripts.js?version=20071208 이 있을 때
script.js파일이 변경이 없다고 하더라도 서로 다른 웹 캐쉬에 저장하도록 되어 있다

이것을 이용해서, 서버에는 scripts.js파일 하나만 존재하면서
사용자 브라우저에 남아있는 캐쉬가 갱신되어야 하는지 아닌지를 적절히 수정할 수 있다.
이런 이유로 1번 방법과는 달리 스크립트 파일의 버전관리를 쉽게 할 수 있다.

또한, 스크립트가 여러 페이지에 include되어 있는 경우라고 해도
어떤 페이지에서는
<script type="text/javascript" src="/js/scripts.js?version=20071207"></script>
또 다른 페이지에서는
<script type="text/javascript" src="/js/scripts.js?version=20071208"></script>
심지어는 어떤 페이지에서는
<script type="text/javascript" src="/js/scripts.js"></script>
와 같이 제각각으로 되어있더라도 서버에 script.js파일만 있으면 에러가 발생하지 않고,

또한 개발자가 의도하지 않은 경우에는 기본적으로 항상 인터넷 캐쉬가 정상동작하게 되어,
업그레이드시 발생할 수 있는 장애위험이 줄어들게 되고,
특히 스크립트 파일에 새로운 함수를 추가한 정도로만 변형하여 다시 갱신한 경우에 유용하다.


경험적으로 알고 있던 내용인데,
검색하면 쉬이 찾을 수가 없어서, 나라도 올려두면 누군가 찾아볼 수 있기를 바라는 마음에 올려본다.

내가 적용해 둔 것은 아니지만, 실제 예를 보고 싶으면,
2007년 12월 11일 현재, http://music.cyworld.com/ 에 가서 소스보기를 하면 상단에 다음과 같은 라인을 발견할 수 있을 것이다

<link rel="stylesheet" type="text/css" href="/include/css/music4_main.css?v=071205" media="screen" />

이런식이다
Posted by 1010
반응형
<script type=text/javascript>
var UserAgent = navigator.userAgent;
var AppVersion = (((navigator.appVersion.split('; '))[1].split(' '))[1]);

// default NSelect style
var SL_ActiveIDX = null;
var SL_Focused = null;
var SL_FocusedIDX = null;
var SL_Table = " cellspacing=0 cellpadding=0 border=0";
var SL_Text = "text-indent:2px;padding-top:3px;";
var SL_IPrefix = "http://sstatic.naver.com/search/images5/";
var SL_AImage = "arrow.gif";
var SL_BImage = "blank.gif";
var SL_SBLen = 10;
var SL_SBWidth = 18;
var SL_ScrollBar = ""
    +"scrollbar-face-color:#ffffff;"
    +"scrollbar-shadow-color:999999;"
    +"scrollbar-highlight-color:#E8E8E8;"
    +"scrollbar-3dlight-color:999999;"
    +"scrollbar-darkshadow-color:#EEEEEE;"
    +"scrollbar-track-color:#999999;"
    +"scrollbar-arrow-color:#E8E8E8;";

var SL_BGColor = "#FEFFCB";
var SL_BGColor_M = "#225688";
var SL_Border = "1px solid #AFB086";
var SL_FontSize = "10pt";
var SL_FontColor = "#000000";
var SL_Height = "18px";

SList = new Array();
document.write( "<div id=NSDiv style='position:absolute;top:-100px;z-index:3;'></div>" );

// set SL Style
function setEnv( pSrc, pBG, pBM, pBD, pAI )
{
    var oEnv = new Object();
    var oSrc = createObject( pSrc );

    if( oSrc.style.width ) {
    oEnv.Width = oSrc.style.width;
    } else {
    document.all.NSDiv.innerHTML = ""
        +"<table style='top:2px;'><tr><td height=1>"+pSrc+"</td></tr></table>";
    oEnv.Width = document.all.NSDiv.scrollWidth;
    }
    if( oSrc.style.height ) oEnv.Height = oSrc.style.height; else oEnv.Height = SL_Height;
    if( oSrc.style.fontSize ) oEnv.FontSize = oSrc.style.fontSize; else oEnv.FontSize = SL_FontSize;
    if( oSrc.style.color ) oEnv.FontColor = oSrc.style.color; else oEnv.FontColor = SL_FontColor;

    if( pBG ) oEnv.BGColor = pBG;    else oEnv.BGColor = SL_BGColor;
    if( pBM ) oEnv.BGColor_M = pBM;    else oEnv.BGColor_M = SL_BGColor_M;
    if( pBD ) oEnv.Border = pBD;    else oEnv.Border = SL_Border;
    if( pAI ) oEnv.AImage = pAI;    else oEnv.AImage = SL_AImage;

    return oEnv;
}

// parameter NSelect
function NSelect( HTMLSrc, KIN, BG, BM, BD, AI )
{
    if ( UserAgent.indexOf( "MSIE" ) < 0 || AppVersion < 5 ) {
    document.write( HTMLSrc );
    return;
    } else {
    var SE = setEnv( HTMLSrc, BG, BM, BD, AI );
    var SListObj = new setNSelect( HTMLSrc, KIN, SE );
    SListObj.append();

    return SListObj;
    }
}

function appendSList()
{
    document.write("<div id=TempDiv></div>\n");
    document.all.TempDiv.appendChild( this.Table );
    document.all.TempDiv.removeNode();

    return;
}

function MouseScrollHandler() {
    var f_titleObj = SList[SL_FocusedIDX].Title;
    var f_itemObj = SList[SL_FocusedIDX].Items;
    var idx_length = f_itemObj.options.length;
    var idx_selected = f_itemObj.options.selectedIndex ;

    CancelEventHandler( window.event );

    if( window.event.wheelDelta > 0 ) {
    idx_selected = Math.max( 0, --idx_selected );
    } else {
    idx_selected = Math.min( idx_length - 1, ++idx_selected );
    }

    if( f_itemObj.options.selectedIndex != idx_selected ) {
    f_itemObj.options.selectedIndex = idx_selected;
    SList[SL_FocusedIDX].ChangeTitle();
    if( f_itemObj.onchange ) f_itemObj.onchange();
    }

    return;
}

function ActiveIDXHandler() {
    if( SL_ActiveIDX == null ) {
    for( i = 0; i < SList.length; i++ ) {
        SList[i].List.style.display = "none";
        if( i == SL_Focused ) TitleHighlightHandler( i, 1 );
        else TitleHighlightHandler( i, 0 );
    }

    if( SL_Focused == null )
        document.detachEvent( 'onclick', ActiveIDXHandler );
    }
    if( SL_Focused == null ) document.detachEvent( 'onmousewheel', MouseScrollHandler );
    else document.attachEvent( 'onmousewheel', MouseScrollHandler );

    SL_ActiveIDX = null;
    SL_Focused = null;

    return;
}

function TitleClickHandler()
{
    SL_ActiveIDX = this.entry;

    for( i = 0; i < SList.length; i++ ) {
    if( i == SL_ActiveIDX ) {
        if( SList[i].List.style.display == "block" ) {
        SList[i].List.style.display = "none";
        TitleHighlightHandler( i, 1 );
        SL_Focused = i;
        SL_FocusedIDX = i;
        } else SList[i].List.style.display = "block";
    } else {
        SList[i].List.style.display = "none";
        TitleHighlightHandler( i, 0 );
    }
    }

    document.detachEvent( 'onclick', ActiveIDXHandler );
    document.attachEvent( 'onclick', ActiveIDXHandler );

    return;
}

function TitleMouseOverHandler()
{
    this.Title.children(0).cells(2).children(0).style.filter = "";
    if( !this.kin ) this.Title.style.border = "1 solid #999999";

    return;
}

function TitleMouseOutHandler()
{
    this.Title.children(0).cells(2).children(0).style.filter = "alpha( opacity=80 );";
    if( !this.kin ) this.Title.style.border = "1 solid #C3CACD";

    return;
}

function TitleHighlightHandler( entry, t )
{
    if( t ) {
    if( this.kin )
        SList[entry].Title.children(0).cells(0).style.background = SList[entry].env.BGColor;
    else
        SList[entry].Title.children(0).cells(0).style.background = SList[entry].env.BGColor_M;
    } else {
    SList[entry].Title.children(0).cells(0).style.background = SList[entry].env.BGColor;
    }

    return;
}

function ListMouseDownHandler( f )
{
    var tObj = this.Title.children(0);
    var length = this.Items.length;

    for( i = 0; i < length; i++ ) {
    this.Items.options[i].selected = false;
    if ( i == f.idx ) {
        this.Items.options[i].selected = true;
        this.ChangeTitle();
    }
    }
    if( this.Items.onchange ) this.Items.onchange();
    if ( this.kin && ( length - 1 ) == f.idx )
    location.href = this.Items.options[f.idx].value;

    this.List.style.display = "none";

    SL_Focused = this.entry;
    SL_FocusedIDX = this.entry;

    return;
}

function ListMouseOverHandler( f )
{
    if( this.kin ) f.style.color = "#FFFFFF";
    f.style.background = this.env.BGColor_M;
    return;
}

function ListMouseOutHandler( f )
{
    f.style.color = this.env.FontColor;
    f.style.background = this.env.BGColor;
    return;
}

function CancelEventHandler( e )
{
    e.cancelBubble = true;
    e.returnValue = false;

    return;
}

function ModifyDivHandler() {
    var width = parseInt( this.Title.style.width );

    this.Items.style.width = null;
    document.all.NSDiv.innerHTML = ""
    +"<table style='top:2px;'><tr><td height=1>"+this.Items.outerHTML+"</td></tr></table>";
    var scrollWidth = parseInt( document.all.NSDiv.scrollWidth );

    if( scrollWidth > width ) {
    this.Title.style.width = scrollWidth;
    this.List.style.width = scrollWidth;
    }

    return;
}

function ChangeTitleHandler() {
    var newTitle = this.Items.options[this.Items.options.selectedIndex].innerHTML ;
    this.Title.children(0).cells(0).innerHTML = "<nobr>"+newTitle+"</nobr>";

    return;
}

function ChangeListHandler() {
    var length = this.Items.length;
    var item = "";

    var listHeight = parseInt( this.env.Height ) * Math.min( SL_SBLen, length ) + 2;
    var overflowY = ( length > SL_SBLen ) ? "scroll" : "hidden";

    this.List.innerHTML = "";
    for( i = 0; i < this.Items.options.length; i++ ) {
    item = ""
        +"<DIV idx="+i+" style='height:"+this.env.Height+";"+SL_Text+"'"
        +"  onMouseDown='SList["+this.entry+"].ListMouseDown( this );'"
        +"  onMouseOver='SList["+this.entry+"].ListMouseOver( this );'"
        +"  onMouseOut='SList["+this.entry+"].ListMouseOut( this );'>"
        +"    <nobr>"+this.Items.options[i].innerText+"</nobr>"
        +"</DIV>";
    oItem = createObject( item );
    this.List.appendChild( oItem );
    }

    this.List.style.height = listHeight;
    this.List.style.overflowY = overflowY;

    return;
}

function AddOptionHandler( sText, sValue, iIndex ) {
    var oOption = document.createElement("OPTION");
    this.Items.options.add(oOption, iIndex);

    oOption.innerText = sText;
    oOption.value = sValue;

    return;
}

function setNSelect( pSrc, pKIN, pSE )
{
    this.entry = SList.length;
    this.lower = null;
    this.src = pSrc;
    this.env = pSE;
    this.kin = pKIN;

    // NSelect Object
    this.Items;
    this.Title;
    this.List;
    this.Table;

    // Create NSelect Element
    this.ItemObj = createObject;
    this.ListObj  = createList;
    this.TitleObj = createTitle;
    this.TableObj = createSList;

    // NSelect EventHandler
    this.TitleClick = TitleClickHandler;
    this.TitleMouseOver = TitleMouseOverHandler;
    this.TitleMouseOut = TitleMouseOutHandler;
    this.ListMouseDown = ListMouseDownHandler;
    this.ListMouseOver = ListMouseOverHandler;
    this.ListMouseOut = ListMouseOutHandler;
    this.CancelEvent = CancelEventHandler;

    // NSelect Function
    this.ModifyDiv = ModifyDivHandler;
    this.ChangeTitle = ChangeTitleHandler;
    this.ChangeList = ChangeListHandler;
    this.AddOption = AddOptionHandler;

    this.append = appendSList;
    this.Table = this.TableObj();

    SList[this.entry] = this;

    return;
}

function createObject( pSrc )
{      
    oObj = new Object();
    oObj.Div = document.createElement("DIV");
    oObj.Div.insertAdjacentHTML("afterBegin", pSrc);

    return oObj.Div.children(0);
}

function createTitle()
{
    var length = this.Items.length;

    for ( i = 0; i < length; i++ ) {
    if (this.Items.options[i].selected) {
        SIName = this.Items.options[i].innerText;
        SIValue = this.Items.options[i].value;
    }
    }

    this.Title = createObject(""
    +"<DIV id=title style='width:"+this.env.Width+";overflow-X:hidden;position:relative;left:0px;top:0px;"
    +"border:"+this.env.Border+";cursor:default;background:"+this.env.BGColor+";'"
    +"    onClick='SList["+this.entry+"].TitleClick( window.event );'"
    +"    onMouseOver='SList["+this.entry+"].TitleMouseOver( window.event );'"
    +"    onMouseOut='SList["+this.entry+"].TitleMouseOut( window.event );'"
    +">"
        +"<table height="+this.env.Height+" "+SL_Table+" style='table-layout:fixed;text-overflow:hidden;'>"
    +"<tr>"
        +"    <td style='width:100%;font-size:"+this.env.FontSize+";color:"+this.env.FontColor+";"+SL_Text+"'><nobr>"+SIName+"</nobr></td>"
        +"    <td style='display:none;'></td>"
        +"    <td align=center valign=center width="+SL_SBWidth+"><img src='"+SL_IPrefix+this.env.AImage+"' border=0 style='Filter:Alpha( Opacity=80 )'></td>"
    +"</tr>"
    +"</table>"
    +"</DIV>");

    oTitle_Sub = createObject(""
    +"<img style='position:absolute;top:1px;left:0;width:"+this.env.Width+";height:"+this.env.Height+";'"
    +"    ondragstart='SList["+this.entry+"].CancelEvent( window.event );'"
    +" src='"+SL_IPrefix+SL_BImage+"'>");

    this.Title.childNodes(0).cells(1).appendChild( this.Items );
    this.Title.childNodes(0).cells(2).appendChild( oTitle_Sub );

    return;
}

function createList()
{
    var ListDiv = ""
    +"<DIV id=list style='position:absolute;z-index:2;display:none;background:"+this.env.BGColor+";"
    +"border:"+this.env.Border+";font-size:"+this.env.FontSize+";color:"+this.env.FontColor+";cursor:default;"
    +"width:"+this.env.Width+";overflow-X:hidden;"+SL_ScrollBar+"'></DIV>";

    this.List = createObject( ListDiv );
    this.ChangeList();

    return;
}

function createSList()
{
    this.Items = this.ItemObj( this.src );

    this.TitleObj();
    this.ListObj();

    var table = createObject(""
        +"<table cellspacing=0 cellpadding=1 border=0>"
        +"<tr><td></td></tr>"
        +"</table>");

    table.cells(0).appendChild( this.Title );
    table.cells(0).appendChild( this.List );

    return table;
}


</script>
<script>
var yearSelect;
var monthSelect;

var todayDate;

if (typeof(headerfooter_time_year) != "undefined")
{
    /* 오늘의 날짜를 서버 날짜로 설정 */
    todayDate = new Date(
                    headerfooter_time_year, headerfooter_time_month - 1,
                    headerfooter_time_day, headerfooter_time_hour,
                    headerfooter_time_minute, headerfooter_time_second);
}
else
    todayDate = new Date();

function memorialDay(name, month, day, solarLunar, holiday, type)
{
    this.name = name;
    this.month = month;
    this.day = day;
    this.solarLunar = solarLunar;
    this.holiday = holiday;    /* true : 빨간날 false : 안빨간날 */
    this.type = type;    /* true : real time setting */
    this.techneer = true;
}

var memorialDays = Array (
    new memorialDay("신정", 1, 1, 1, true),
    new memorialDay("", 12, 0, 2, true, true),    /* 실시간으로 정해짐 */
    new memorialDay("설날", 1, 1, 2, true),
    new memorialDay("", 1, 2, 2, true),
    new memorialDay("삼일절", 3, 1, 1, true),
    new memorialDay("식목일", 4, 5, 1, true),
    new memorialDay("석가탄신일", 4, 8, 2, true),
    new memorialDay("어린이날", 5, 5, 1, true),
    new memorialDay("현충일", 6, 6, 1, true),
    new memorialDay("제헌절", 7, 17, 1, true),
    new memorialDay("광복절", 8, 15, 1, true),
    new memorialDay("", 8, 14, 2, true),
    new memorialDay("추석", 8, 15, 2, true),
    new memorialDay("", 8, 16, 2, true),
    new memorialDay("개천절", 10, 3, 1, true),
    new memorialDay("성탄절", 12, 25, 1, true),

    new memorialDay("정월대보름", 1, 15, 2, false),
    new memorialDay("단오", 5, 5, 2, false),
    new memorialDay("국군의날", 10, 1, 1, false),
    new memorialDay("한글날", 10, 9, 1, false),
    new memorialDay("625전쟁일", 6, 25, 1, false),
    new memorialDay("삼짇날", 3, 3, 2, false),
    new memorialDay("물의날", 3, 22, 1, false),
    new memorialDay("만우절", 4, 1, 1, false),
    new memorialDay("장애인의날", 4, 20, 1, false),
    new memorialDay("과학의날", 4, 21, 1 , false),
    new memorialDay("충무공탄신일", 4, 28, 1, false),
    new memorialDay("근로자의날·법의날", 5, 1, 1, false),
    new memorialDay("어버이날", 5, 8, 1, false),
    new memorialDay("스승의날", 5, 15, 1, false),
    new memorialDay("발명의날", 5, 19, 1, false),
    new memorialDay("바다의날", 5, 31, 1, false),
    new memorialDay("환경의날", 6, 5, 1, false),
    new memorialDay("유두", 6, 15, 2, false),
    new memorialDay("칠월칠석", 7, 7, 2, false),
    new memorialDay("중양절", 9, 9, 2, false),
    new memorialDay("철도의날", 9, 18, 1, false),
    new memorialDay("소방의날", 11, 9, 1, false)
);
   

function myDate(year, month, day, leapMonth)
{
    this.year = year;
    this.month = month;
    this.day = day;
    this.leapMonth = leapMonth;
}

// 음력 데이터 (평달 - 작은달 :1,  큰달:2 )
// (윤달이 있는 달 - 평달이 작고 윤달도 작으면 :3 , 평달이 작고 윤달이 크면 : 4)
// (윤달이 있는 달 - 평달이 크고 윤달이 작으면 :5,  평달과 윤달이 모두 크면 : 6)
var lunarMonthTable = [
[2, 1, 2, 1, 2, 1, 2, 2, 1, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 2, 5, 2, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 2, 1],   /* 1901 */
[2, 1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 2],
[1, 2, 1, 2, 3, 2, 1, 1, 2, 2, 1, 2],
[2, 2, 1, 2, 1, 1, 2, 1, 1, 2, 2, 1],
[2, 2, 1, 2, 2, 1, 1, 2, 1, 2, 1, 2],
[1, 2, 2, 4, 1, 2, 1, 2, 1, 2, 1, 2],
[1, 2, 1, 2, 1, 2, 2, 1, 2, 1, 2, 1],
[2, 1, 1, 2, 2, 1, 2, 1, 2, 2, 1, 2],
[1, 5, 1, 2, 1, 2, 1, 2, 2, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 2, 1],
[2, 1, 2, 1, 1, 5, 1, 2, 2, 1, 2, 2],   /* 1911 */
[2, 1, 2, 1, 1, 2, 1, 1, 2, 2, 1, 2],
[2, 2, 1, 2, 1, 1, 2, 1, 1, 2, 1, 2],
[2, 2, 1, 2, 5, 1, 2, 1, 2, 1, 1, 2],
[2, 1, 2, 2, 1, 2, 1, 2, 1, 2, 1, 2],
[1, 2, 1, 2, 1, 2, 2, 1, 2, 1, 2, 1],
[2, 3, 2, 1, 2, 2, 1, 2, 2, 1, 2, 1],
[2, 1, 1, 2, 1, 2, 1, 2, 2, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 5, 2, 2, 1, 2, 2],
[1, 2, 1, 1, 2, 1, 1, 2, 2, 1, 2, 2],
[2, 1, 2, 1, 1, 2, 1, 1, 2, 1, 2, 2],   /* 1921 */
[2, 1, 2, 2, 3, 2, 1, 1, 2, 1, 2, 2],
[1, 2, 2, 1, 2, 1, 2, 1, 2, 1, 1, 2],
[2, 1, 2, 1, 2, 2, 1, 2, 1, 2, 1, 1],
[2, 1, 2, 5, 2, 1, 2, 2, 1, 2, 1, 2],
[1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 2, 1],
[2, 1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 2],
[1, 5, 1, 2, 1, 1, 2, 2, 1, 2, 2, 2],
[1, 2, 1, 1, 2, 1, 1, 2, 1, 2, 2, 2],
[1, 2, 2, 1, 1, 5, 1, 2, 1, 2, 2, 1],
[2, 2, 2, 1, 1, 2, 1, 1, 2, 1, 2, 1],   /* 1931 */
[2, 2, 2, 1, 2, 1, 2, 1, 1, 2, 1, 2],
[1, 2, 2, 1, 6, 1, 2, 1, 2, 1, 1, 2],
[1, 2, 1, 2, 2, 1, 2, 2, 1, 2, 1, 2],
[1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 2, 1],
[2, 1, 4, 1, 2, 1, 2, 1, 2, 2, 2, 1],
[2, 1, 1, 2, 1, 1, 2, 1, 2, 2, 2, 1],
[2, 2, 1, 1, 2, 1, 4, 1, 2, 2, 1, 2],
[2, 2, 1, 1, 2, 1, 1, 2, 1, 2, 1, 2],
[2, 2, 1, 2, 1, 2, 1, 1, 2, 1, 2, 1],
[2, 2, 1, 2, 2, 4, 1, 1, 2, 1, 2, 1],   /* 1941 */
[2, 1, 2, 2, 1, 2, 2, 1, 2, 1, 1, 2],
[1, 2, 1, 2, 1, 2, 2, 1, 2, 2, 1, 2],
[1, 1, 2, 4, 1, 2, 1, 2, 2, 1, 2, 2],
[1, 1, 2, 1, 1, 2, 1, 2, 2, 2, 1, 2],
[2, 1, 1, 2, 1, 1, 2, 1, 2, 2, 1, 2],
[2, 5, 1, 2, 1, 1, 2, 1, 2, 1, 2, 2],
[2, 1, 2, 1, 2, 1, 1, 2, 1, 2, 1, 2],
[2, 2, 1, 2, 1, 2, 3, 2, 1, 2, 1, 2],
[2, 1, 2, 2, 1, 2, 1, 1, 2, 1, 2, 1],
[2, 1, 2, 2, 1, 2, 1, 2, 1, 2, 1, 2],   /* 1951 */
[1, 2, 1, 2, 4, 2, 1, 2, 1, 2, 1, 2],
[1, 2, 1, 1, 2, 2, 1, 2, 2, 1, 2, 2],
[1, 1, 2, 1, 1, 2, 1, 2, 2, 1, 2, 2],
[2, 1, 4, 1, 1, 2, 1, 2, 1, 2, 2, 2],
[1, 2, 1, 2, 1, 1, 2, 1, 2, 1, 2, 2],
[2, 1, 2, 1, 2, 1, 1, 5, 2, 1, 2, 2],
[1, 2, 2, 1, 2, 1, 1, 2, 1, 2, 1, 2],
[1, 2, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1],
[2, 1, 2, 1, 2, 5, 2, 1, 2, 1, 2, 1],
[2, 1, 2, 1, 2, 1, 2, 2, 1, 2, 1, 2],   /* 1961 */
[1, 2, 1, 1, 2, 1, 2, 2, 1, 2, 2, 1],
[2, 1, 2, 3, 2, 1, 2, 1, 2, 2, 2, 1],
[2, 1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 2],
[1, 2, 1, 2, 1, 1, 2, 1, 1, 2, 2, 2],
[1, 2, 5, 2, 1, 1, 2, 1, 1, 2, 2, 1],
[2, 2, 1, 2, 2, 1, 1, 2, 1, 2, 1, 2],
[1, 2, 2, 1, 2, 1, 5, 2, 1, 2, 1, 2],
[1, 2, 1, 2, 1, 2, 2, 1, 2, 1, 2, 1],
[2, 1, 1, 2, 2, 1, 2, 1, 2, 2, 1, 2],
[1, 2, 1, 1, 5, 2, 1, 2, 2, 2, 1, 2],   /* 1971 */
[1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 2, 1],
[2, 1, 2, 1, 1, 2, 1, 1, 2, 2, 2, 1],
[2, 2, 1, 5, 1, 2, 1, 1, 2, 2, 1, 2],
[2, 2, 1, 2, 1, 1, 2, 1, 1, 2, 1, 2],
[2, 2, 1, 2, 1, 2, 1, 5, 2, 1, 1, 2],
[2, 1, 2, 2, 1, 2, 1, 2, 1, 2, 1, 1],
[2, 2, 1, 2, 1, 2, 2, 1, 2, 1, 2, 1],
[2, 1, 1, 2, 1, 6, 1, 2, 2, 1, 2, 1],
[2, 1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 2],
[1, 2, 1, 1, 2, 1, 1, 2, 2, 1, 2, 2],   /* 1981 */
[2, 1, 2, 3, 2, 1, 1, 2, 2, 1, 2, 2],
[2, 1, 2, 1, 1, 2, 1, 1, 2, 1, 2, 2],
[2, 1, 2, 2, 1, 1, 2, 1, 1, 5, 2, 2],
[1, 2, 2, 1, 2, 1, 2, 1, 1, 2, 1, 2],
[1, 2, 2, 1, 2, 2, 1, 2, 1, 2, 1, 1],
[2, 1, 2, 2, 1, 5, 2, 2, 1, 2, 1, 2],
[1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 2, 1],
[2, 1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 2],
[1, 2, 1, 1, 5, 1, 2, 1, 2, 2, 2, 2],
[1, 2, 1, 1, 2, 1, 1, 2, 1, 2, 2, 2],   /* 1991 */
[1, 2, 2, 1, 1, 2, 1, 1, 2, 1, 2, 2],
[1, 2, 5, 2, 1, 2, 1, 1, 2, 1, 2, 1],
[2, 2, 2, 1, 2, 1, 2, 1, 1, 2, 1, 2],
[1, 2, 2, 1, 2, 2, 1, 5, 2, 1, 1, 2],
[1, 2, 1, 2, 2, 1, 2, 1, 2, 2, 1, 2],
[1, 1, 2, 1, 2, 1, 2, 2, 1, 2, 2, 1],
[2, 1, 1, 2, 3, 2, 2, 1, 2, 2, 2, 1],
[2, 1, 1, 2, 1, 1, 2, 1, 2, 2, 2, 1],
[2, 2, 1, 1, 2, 1, 1, 2, 1, 2, 2, 1],
[2, 2, 2, 3, 2, 1, 1, 2, 1, 2, 1, 2],   /* 2001 */
[2, 2, 1, 2, 1, 2, 1, 1, 2, 1, 2, 1],
[2, 2, 1, 2, 2, 1, 2, 1, 1, 2, 1, 2],
[1, 5, 2, 2, 1, 2, 1, 2, 1, 2, 1, 2],
[1, 2, 1, 2, 1, 2, 2, 1, 2, 2, 1, 1],
[2, 1, 2, 1, 2, 1, 5, 2, 2, 1, 2, 2],
[1, 1, 2, 1, 1, 2, 1, 2, 2, 2, 1, 2],
[2, 1, 1, 2, 1, 1, 2, 1, 2, 2, 1, 2],
[2, 2, 1, 1, 5, 1, 2, 1, 2, 1, 2, 2],
[2, 1, 2, 1, 2, 1, 1, 2, 1, 2, 1, 2],
[2, 1, 2, 2, 1, 2, 1, 1, 2, 1, 2, 1],   /* 2011 */
[2, 1, 6, 2, 1, 2, 1, 1, 2, 1, 2, 1],
[2, 1, 2, 2, 1, 2, 1, 2, 1, 2, 1, 2],
[1, 2, 1, 2, 1, 2, 1, 2, 5, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 2, 2, 2, 1, 2, 1],
[2, 1, 2, 1, 1, 2, 1, 2, 2, 1, 2, 2],
[2, 1, 1, 2, 3, 2, 1, 2, 1, 2, 2, 2],
[1, 2, 1, 2, 1, 1, 2, 1, 2, 1, 2, 2],
[2, 1, 2, 1, 2, 1, 1, 2, 1, 2, 1, 2],
[2, 1, 2, 5, 2, 1, 1, 2, 1, 2, 1, 2],
[1, 2, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1],   /* 2021 */
[2, 1, 2, 1, 2, 2, 1, 2, 1, 2, 1, 2],
[1, 5, 2, 1, 2, 1, 2, 2, 1, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 2, 2, 1, 2, 2, 1],
[2, 1, 2, 1, 1, 5, 2, 1, 2, 2, 2, 1],
[2, 1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 2],
[1, 2, 1, 2, 1, 1, 2, 1, 1, 2, 2, 2],
[1, 2, 2, 1, 5, 1, 2, 1, 1, 2, 2, 1],
[2, 2, 1, 2, 2, 1, 1, 2, 1, 1, 2, 2],
[1, 2, 1, 2, 2, 1, 2, 1, 2, 1, 2, 1],
[2, 1, 5, 2, 1, 2, 2, 1, 2, 1, 2, 1],   /* 2031 */
[2, 1, 1, 2, 1, 2, 2, 1, 2, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 5, 2],
[1, 2, 1, 1, 2, 1, 2, 1, 2, 2, 2, 1],
[2, 1, 2, 1, 1, 2, 1, 1, 2, 2, 1, 2],
[2, 2, 1, 2, 1, 4, 1, 1, 2, 2, 1, 2],
[2, 2, 1, 2, 1, 1, 2, 1, 1, 2, 1, 2],
[2, 2, 1, 2, 1, 2, 1, 2, 1, 1, 2, 1],
[2, 2, 1, 2, 5, 2, 1, 2, 1, 2, 1, 1],
[2, 1, 2, 2, 1, 2, 2, 1, 2, 1, 2, 1],
[2, 1, 1, 2, 1, 2, 2, 1, 2, 2, 1, 2],   /* 2041 */
[1, 5, 1, 2, 1, 2, 1, 2, 2, 2, 1, 2],
[1, 2, 1, 1, 2, 1, 1, 2, 2, 1, 2, 2]];

/* 양력 <-> 음력 변환 함수
* type : 1 - 양력 -> 음력
*        2 - 음력 -> 양력
* leapmonth : 0 - 평달
*             1 - 윤달 (type = 2 일때만 유효)
*/
function lunarCalc(year, month, day, type, leapmonth)
{
    var solYear, solMonth, solDay;
    var lunYear, lunMonth, lunDay;
    var lunLeapMonth, lunMonthDay;    
    var i, lunIndex;

    var solMonthDay = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    /* range check */
    if (year < 1900 || year > 2040)
    {
        alert('1900년부터 2040년까지만 지원합니다');
        return;
    }

    /* 속도 개선을 위해 기준 일자를 여러개로 한다 */
    if (year >= 2000)
    {
        /* 기준일자 양력 2000년 1월 1일 (음력 1999년 11월 25일) */
        solYear = 2000;
        solMonth = 1;
        solDay = 1;
        lunYear = 1999;
        lunMonth = 11;
        lunDay = 25;
        lunLeapMonth = 0;

        solMonthDay[1] = 29;    /* 2000 년 2월 28일 */
        lunMonthDay = 30;    /* 1999년 11월 */
    }
    else if (year >= 1970)
    {
        /* 기준일자 양력 1970년 1월 1일 (음력 1969년 11월 24일) */
        solYear = 1970;
        solMonth = 1;
        solDay = 1;
        lunYear = 1969;
        lunMonth = 11;
        lunDay = 24;
        lunLeapMonth = 0;

        solMonthDay[1] = 28;    /* 1970 년 2월 28일 */
        lunMonthDay = 30;    /* 1969년 11월 */
    }
    else if (year >= 1940)
    {
        /* 기준일자 양력 1940년 1월 1일 (음력 1939년 11월 22일) */
        solYear = 1940;
        solMonth = 1;
        solDay = 1;
        lunYear = 1939;
        lunMonth = 11;
        lunDay = 22;
        lunLeapMonth = 0;

        solMonthDay[1] = 29;    /* 1940 년 2월 28일 */
        lunMonthDay = 29;    /* 1939년 11월 */
    }
    else
    {
        /* 기준일자 양력 1900년 1월 1일 (음력 1899년 12월 1일) */
        solYear = 1900;
        solMonth = 1;
        solDay = 1;
        lunYear = 1899;
        lunMonth = 12;
        lunDay = 1;
        lunLeapMonth = 0;

        solMonthDay[1] = 28;    /* 1900 년 2월 28일 */
        lunMonthDay = 30;    /* 1899년 12월 */
    }

    lunIndex = lunYear - 1899;

    while (true)
    {
//        document.write(solYear + "-" + solMonth + "-" + solDay + "<->");
//        document.write(lunYear + "-" + lunMonth + "-" + lunDay + " " + lunLeapMonth + " " + lunMonthDay + "<br>");

        if (type == 1 &&
            year == solYear &&
            month == solMonth &&
            day == solDay)
        {
            return new myDate(lunYear, lunMonth, lunDay, lunLeapMonth);
        }   
        else if (type == 2 &&
                year == lunYear &&
                month == lunMonth &&
                day == lunDay &&
                leapmonth == lunLeapMonth)
        {
            return new myDate(solYear, solMonth, solDay, 0);
        }

        /* add a day of solar calendar */
        if (solMonth == 12 && solDay == 31)
        {
            solYear++;
            solMonth = 1;
            solDay = 1;

            /* set monthDay of Feb */
            if (solYear % 400 == 0)
                solMonthDay[1] = 29;
            else if (solYear % 100 == 0)
                solMonthDay[1] = 28;
            else if (solYear % 4 == 0)
                solMonthDay[1] = 29;
            else
                solMonthDay[1] = 28;

        }
        else if (solMonthDay[solMonth - 1] == solDay)
        {
            solMonth++;
            solDay = 1;    
        }
        else
            solDay++;


        /* add a day of lunar calendar */
        if (lunMonth == 12 &&
            ((lunarMonthTable[lunIndex][lunMonth - 1] == 1 && lunDay == 29) ||
            (lunarMonthTable[lunIndex][lunMonth - 1] == 2 && lunDay == 30)))
        {
            lunYear++;
            lunMonth = 1;
            lunDay = 1;

            lunIndex = lunYear - 1899;

            if (lunarMonthTable[lunIndex][lunMonth - 1] == 1)
                lunMonthDay = 29;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 2)
                lunMonthDay = 30;
        }
        else if (lunDay == lunMonthDay)
        {
            if (lunarMonthTable[lunIndex][lunMonth - 1] >= 3
                && lunLeapMonth == 0)
            {
                lunDay = 1;
                lunLeapMonth = 1;
            }
            else
            {
                lunMonth++;
                lunDay = 1;
                lunLeapMonth = 0;
            }

            if (lunarMonthTable[lunIndex][lunMonth - 1] == 1)
                lunMonthDay = 29;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 2)
                lunMonthDay = 30;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 3)
                lunMonthDay = 29;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 4 &&
                    lunLeapMonth == 0)
                lunMonthDay = 29;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 4 &&
                    lunLeapMonth == 1)
                lunMonthDay = 30;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 5 &&
                    lunLeapMonth == 0)
                lunMonthDay = 30;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 5 &&
                    lunLeapMonth == 1)
                    lunMonthDay = 29;
            else if (lunarMonthTable[lunIndex][lunMonth - 1] == 6)
                lunMonthDay = 30;
        }
        else
            lunDay++;
    }
}

function getWeekday(year, month, day)
{
    var weekday = Array("일", "월", "화", "수", "목", "금", "토");
    var date = new Date(year, month - 1, day);

    if (date)
        return weekday[date.getDay()];
}

function getPassDay(year, month, day)
{
    var date = new Date(year, month - 1, day);

    var interval = Math.floor((todayDate - date) / (1000 * 60 * 60 * 24) + 1);

    return interval;
}

function getDDay(year, month, day)
{
    var date = new Date(year, month - 1, day);

    var interval = Math.floor((date - todayDate) / (1000 * 60 * 60 * 24) + 1);

    return interval;
}

function getDateSpecificInterval(year, month, day, interval)
{
    var date = new Date(year, month - 1, parseInt(day) + parseInt(interval) - 1);

    return date;
}

function dayCalcDisplay(type)
{
    var startYear = parseInt(document.getElementById("startYear").value);
    var startMonth = parseInt(document.getElementById("startMonth").value);
    var startDay = parseInt(document.getElementById("startDay").value);

    if (!startYear || startYear == 0 ||
        !startMonth || startMonth == 0 ||
        !startDay || startDay == 0)
    {
        alert('기준일을 입력해주세요');
        return;
    }

    var startDate = new Date(startYear, startMonth - 1, startDay);
    var today = new Date(todayDate.getFullYear(),
                        todayDate.getMonth(), todayDate.getDate());

    switch (type)
    {
    /* 오늘은 몇일째 */
    case 1:
        if (today < startDate)
        {
            alert("기준일을 오늘보다 이전 날짜로 설정하세요");
            return;
        }

        var interval = getPassDay(startYear, startMonth, startDay);
        document.getElementById("day1").value = interval;
        break;
    /* x 일 되는 날은 */
    case 2:
        if (today < startDate)
        {
            alert("기준일을 오늘 이전 날짜로 설정하세요");
            return;
        }

        var day2 = document.getElementById("day2").value;

        if (day2 <= 0)
        {
            alert("0 보다 큰 수를 입력하세요");
            return;
        }

        var date = getDateSpecificInterval(startYear, startMonth, startDay, day2);

        document.getElementById("resultYear").value = date.getFullYear();
        document.getElementById("resultMonth").value = date.getMonth() + 1;
        document.getElementById("resultDay").value = date.getDate();

        break;
    /* D-Day */
    case 3:
        var targetYear = parseInt(document.getElementById("targetYear").value);
        var targetMonth = parseInt(document.getElementById("targetMonth").value);
        var targetDay = parseInt(document.getElementById("targetDay").value);
        var interval = getDDay(targetYear, targetMonth, targetDay);

        if (!targetYear || targetYear == 0 ||
            !targetMonth || targetMonth == 0 ||
            !targetDay || targetDay == 0)
        {
            alert('날짜를 입력해주세요');
            return;
        }

        var targetDate = new Date(targetYear, targetMonth - 1, targetDay);

        if (today > targetDate)
        {
            alert("기준일을 오늘 이후 날짜로 설정하세요");
            return;
        }

        document.getElementById("day3").value = interval;

        break;

    /* 요일 계산 */
    case 4:
        var year = parseInt(document.getElementById("weekdayYear").value);
        var month = parseInt(document.getElementById("weekdayMonth").value);
        var day = parseInt(document.getElementById("weekdayDay").value);
        var weekday = document.getElementById("weekday");

        if (!year || year == "0" ||
            !month || month == "0" ||
            !day || day == "0")
        {
            alert('날짜를 입력해 주세요');
            return;
        }
       
        if (year < 100)
        {
            alert('년도를 100년 이후로 입력해 주세요');
            return;
        }

        weekday.value = getWeekday(year, month, day) + "요일";

        break;

    /* 양력/음력 변환 */
    case 5:
        if (document.getElementById('solarLunar').value == 'solar')
        {
            var leapMonth = document.getElementById('leapMonth').checked;
            var date = lunarCalc(startYear, startMonth, startDay, 2, leapMonth);
        }
        else
        {
            var date = lunarCalc(startYear, startMonth, startDay, 1);
        }

        if (date)
        {
            document.getElementById('solarLunarYear').value = date.year;
            document.getElementById('solarLunarMonth').value =
                (date.leapMonth ? "윤" : "") + date.month;
            document.getElementById('solarLunarDay').value = date.day;
        }
        else
        {
            document.getElementById('solarLunarYear').value = "";
            document.getElementById('solarLunarMonth').value = "";
            document.getElementById('solarLunarDay').value = "";
        }

        break;
    }
}

function memorialDayCheck(solarDate, lunarDate)
{
    var i;
    var memorial;


    for (i = 0; i < memorialDays.length; i++)
    {
        if (memorialDays[i].month == solarDate.month &&
            memorialDays[i].day == solarDate.day &&
            memorialDays[i].solarLunar == 1)
            return memorialDays[i];

        if (memorialDays[i].month == lunarDate.month &&
            memorialDays[i].day == lunarDate.day &&
            memorialDays[i].solarLunar == 2 &&
            !memorialDays[i].leapMonth)
            return memorialDays[i];
    }

    return null;
}

function setStartDate(year, month, day)
{
    document.getElementById('startYear').value = year;
    document.getElementById('startMonth').value = month;
    document.getElementById('startDay').value = day;
}

function setCalendar(year, month)
{
    var i;
    var oYearSelect = document.getElementById('yearSelect');
    var oMonthSelect = document.getElementById('monthSelect');

    if (!year)
    {
        year = oYearSelect.value;
        month = oMonthSelect.value;
    }
    else
    {
        for (i = 0; i < oYearSelect.length; i++)
            if (oYearSelect[i].value == year)
            {
                oYearSelect.selectedIndex = i;
                break;
            }
   
        for (i = 0; i < oMonthSelect.length; i++)
            if (oMonthSelect[i].value == month)
            {
                oMonthSelect.selectedIndex = i;
                break;
            }
    }

    var monthDay = Array(31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

    /* set monthDay of Feb */
    if (year % 400 == 0)
        monthDay[1] = 29;
    else if (year % 100 == 0)
        monthDay[1] = 28;
    else if (year % 4 == 0)
        monthDay[1] = 29;
    else
        monthDay[1] = 28;


    /* set the day before 설날 */
    if (lunarMonthTable[year - 1 - 1899][11] == 1)
        memorialDays[1].day = 29;
    else if (lunarMonthTable[year - 1 - 1899][11] == 2)
        memorialDays[1].day = 30;


    var date = new Date(year, month - 1, 1);
    var startWeekday = date.getDay();

    /* clean all day cell */
    for (i = 0; i < 42; i++)
    {
        document.getElementById('dayCell' + i).innerHTML = "";
        document.getElementById('memoCell' + i).innerHTML = "";
    }

    /* fill day cell */        
    for (i = 0; i < monthDay[month - 1]; i ++)
    {
        var index = startWeekday + i;
        var dayHTML;
        var memoHTML;

        var solarDate = new myDate(year, month, i + 1);
        var lunarDate = lunarCalc(year, month, i + 1, 1);

        /* memorial day */
        var memorial = memorialDayCheck(solarDate, lunarDate);

        /* 쉬지않는 기념일 */
        var memorialDay = false;
        if (memorial && memorial.holiday == false)
            memorialDay = true;

        /* day print */
        dayHTML = "<span onClick=\"setStartDate(" +
                    year + ", " + month + ", " + ( i + 1 ) + ")\">" +
                    "<font id=ln2 color='COLOR' title='TITLE'>" +
                    "HIGHLIGHT_START" + ( i + 1 ) + "HIGHLIGHT_END" +
                    "</font></span>";

        /* decoration */
        if ((memorial && memorial.holiday) || index % 7 == 0)
            dayHTML = dayHTML.replace("COLOR", "#DD7403");
        else if (index % 7 == 6)
            dayHTML = dayHTML.replace("COLOR", "#3C8096");

        if (memorial)
            dayHTML = dayHTML.replace("TITLE", memorial.name);

        if (todayDate.getFullYear() == year &&
            todayDate.getMonth() + 1 == month &&
            todayDate.getDate() == i + 1)
        {
            dayHTML = dayHTML.replace("HIGHLIGHT_START", "<b>");
            dayHTML = dayHTML.replace("HIGHLIGHT_END", "</b>");
        }

        dayHTML = dayHTML.replace("TITLE", "");    
        dayHTML = dayHTML.replace("COLOR", "");
        dayHTML = dayHTML.replace("HIGHLIGHT_START", "");
        dayHTML = dayHTML.replace("HIGHLIGHT_END", "");


        document.getElementById('dayCell' + index).innerHTML = dayHTML;


        /* lunar calnedar print */
        if (lunarDate.day == 1 || lunarDate.day == 15)
        {
            memoHTML = "<img src=http://www.blueb.co.kr/SRC/javascript/image2/" + (lunarDate.month < 10 ? "0" + lunarDate.month : lunarDate.month) + (lunarDate.day < 10 ? "0" + lunarDate.day: lunarDate.day) + ".gif border=0>";

        }
        else
            memoHTML = "<table border=0 cellpadding=0 cellspacing=0><tr height=17><td></td><tr></table>";

        document.getElementById('memoCell' + index).innerHTML = memoHTML;


    }
}

function lunarMonthCheck()
{
    if (document.getElementById('solarLunar').value == "solar")
        document.getElementById('leapMonth').disabled = false;
    else
        document.getElementById('leapMonth').disabled = true;
}

var ayear = todayDate.getFullYear(), amonth = todayDate.getMonth() + 1;

function initCalendar()
{
    document.write("<table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td><font id=ln6><font color=#cf4900>달력</font> : 날짜와 요일을 확인할 수 있고, 특정일을 입력하면 해당일의 요일을 알려 줍니다.</font></td></tr><tr><td></td><td height=5 nowrap></td></tr></table>");
    document.write("");
    document.write("<table width=100% border=0 cellpadding=0 cellspacing=0>");
    document.write("<tr>");
    document.write("    ");
    document.write("    <td nowrap valign=top>");
    document.write("    <!--------달력 들어갈곳----->");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=220>");
    document.write("    <tr>");
    document.write("        <td>");
    document.write("        <table border=0 cellpadding=0 cellspacing=0 width=100%>");
    document.write("        <tr>");
    document.write("            <td rowspan=2 width=1 nowrap bgcolor=C3CACD></td>");
    document.write("            <td width=100% bgcolor=C3CACD></td>");
    document.write("            <td rowspan=2 width=1 nowrap bgcolor=A6ACAE></td>");
    document.write("            <td rowspan=2 width=2 height=2 nowrap bgcolor=ffffff></td>");
    document.write("        </tr>");
    document.write("        <tr>");
    document.write("            <td height=1 bgcolor=F1F6F8></td>");
    document.write("        </tr>");
    document.write("        <tr>");
    document.write("            <td width=1 nowrap bgcolor=C3CACD></td>");
    document.write("            <td width=100% bgcolor=F1F6F8 height=32 align=center>");
    document.write("            <!-----날짜 넣는 곳--->");
    document.write("            <table width=95% border=0 cellpadding=0 cellspacing=0>");
    document.write("            <tr>");
    document.write("                <td nowrap>");
    document.write("                <!--------년도---------->");
    document.write("                <table border=0 cellpadding=0 cellspacing=0>");
    document.write("                <tr>");
    document.write("                    <td>");

    var selectStr;
    var i, j;

    selectStr = "<select id=yearSelect style='width:80;font-size:9pt;' onChange='setCalendar()'>\n";

    for (i = 1900; i <= 2030; i++)
        selectStr += "<option value='" + i + "'>" + i + " 년</option>";

    selectStr += "</select>";

    document.write(selectStr);

    document.write("                    </td>");
    document.write("                </tr>");
    document.write("                </table>");
    document.write("                <!--------년도---------->            ");

    document.write("                </td>");
    document.write("                <td width=10 nowrap></td>");
    document.write("                <td nowrap>");
    document.write("                <!--------월---------->");
    document.write("                <table border=0 cellpadding=0 cellspacing=0>");
    document.write("                <tr>");
    document.write("                    <td>");


    selectStr = "<select id=monthSelect style='width:60;font-size:9pt' id=monthSelect onChange='setCalendar()'>\n";

    for (i = 1; i <= 12; i++)
        selectStr += "<option value='" + i + "'>" + i + " 월</option>";

    selectStr += "</select>";

    document.write(selectStr);

    document.write("                    </td>");
    document.write("                </tr>");
    document.write("                </table>");
    document.write("                <!--------월---------->        ");
    document.write("                </td>");
    document.write("                <td width=100%></td>");
    document.write("            </tr>");
    document.write("            </table>");
    document.write("            <!-----날짜 넣는 곳--->");
    document.write("            </td>");
    document.write("            <td width=1 nowrap bgcolor=A6ACAE></td>");
    document.write("            <td width=2 nowrap bgcolor=E0E4E6></td>");
    document.write("        </tr>");
    document.write("        <tr>");
    document.write("            <td width=1 nowrap bgcolor=C3CACD></td>");
    document.write("            <td width=100% height=1 background=http://www.blueb.co.kr/SRC/javascript/image2/date_line01.gif border=0></td>");
    document.write("            <td width=1 nowrap bgcolor=A6ACAE></td>");
    document.write("            <td width=2 nowrap bgcolor=E0E4E6></td>");
    document.write("        </tr>");
    document.write("        <tr>");
    document.write("            <td width=1 nowrap bgcolor=C3CACD></td>");
    document.write("            <td width=100% bgcolor=ffffff align=center>");
    document.write("            <!----달력 넣는곳------>");
    document.write("            <table border=0 cellpadding=0 cellspacing=0 width=100%>");

    document.write("            <tr>");
    document.write("                <td width=15% align=center><font id=ln6 color=DD7403>일</font></td>");
    document.write("                <td width=14% align=center><font id=ln6>월</font></td>");
    document.write("                <td width=14% align=center><font id=ln6>화</font></td>");
    document.write("                <td width=14% align=center><font id=ln6>수</font></td>");
    document.write("                <td width=14% align=center><font id=ln6>목</font></td>");
    document.write("                <td width=14% align=center><font id=ln6>금</font></td>");
    document.write("                <td width=15% align=center><font id=ln6 color=3C8096>토</font></td>");
    document.write("            </tr>");
    document.write("            <tr><td colspan=7 height=7 nowrap></td></tr>");


    for (i = 0; i < 6; i++)
    {
        document.write("<tr>");

        for (j = 0; j < 7; j++)
            document.write("<td align=center id='dayCell" + ( i * 7 + j )+ "'></td>");
        document.write("</tr>");

        document.write("<tr nowrap>");

        for (j = 0; j < 7; j++)
            document.write("<td align=center valign=top id='memoCell" + ( i * 7 + j ) + "'></td>");

        document.write("</tr>");
    }

    /////////////////////////////////////////////////////////////////////////// by Choi, Sungjoon

    if (typeof(rege_0_1) != "undefined" && 1900 <= rege_0_1 && rege_0_1 <= 2030)
    {
        ayear = rege_0_1;
        amonth = 1;
    }

    if (typeof(rege_0_2) != "undefined" && 1 <= rege_0_2 && rege_0_2 <= 12)
        amonth = rege_0_2;

    ///////////////////////////////////////////////////////////////////////////

    document.write("            <tr><td colspan=7 height=7 nowrap></td></tr>");
    document.write("            </table>        ");
    document.write("            <!----달력 넣는곳------>");
    document.write("            </td>");
    document.write("            <td width=1 nowrap bgcolor=A6ACAE></td>");
    document.write("            <td width=2 nowrap bgcolor=E0E4E6></td>");
    document.write("        </tr>");
    document.write("        </table>");
    document.write("        </td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("        <td>");
    document.write("        <table border=0 cellpadding=0 cellspacing=0 width=100%>");
    document.write("        <tr>");
    document.write("            <td colspan=2 width=100% height=1 bgcolor=A6ACAE></td>");
    document.write("            <td width=2 nowrap bgcolor=E0E4E6></td>");
    document.write("        </tr>");
    document.write("        <tr>");
    document.write("            <td width=2 height=2 nowrap></td>");
    document.write("            <td width=100% bgcolor=E0E4E6></td>");
    document.write("            <td width=2 nowrap bgcolor=E0E4E6></td>");
    document.write("        </tr>");
    document.write("        </table>    ");
    document.write("        </td>");
    document.write("    </tr>");
    document.write("    </table>");
    document.write("    <!--------달력 들어갈곳----->    ");
    document.write("    </td>");
    document.write("    <td width=20 nowrap></td>");

    document.write("    <td width=100% valign=top>");
    document.write("    <!--------날짜 계산하는 곳 ----->");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420>");
    document.write("    <tr>");
    document.write("        <td bgcolor=D8E4C5>");
    document.write("        <table border=0 cellpadding=3 cellspacing=1 width=100%>");
    document.write("        <tr>");
    document.write("            <td bgcolor=F5F9EF>");
    document.write("            <font id=ln6>");
    document.write("            &nbsp;<font color=275361><b>기준일</b></font>&nbsp; &nbsp;");
    document.write("            <input type=text size=7 maxlength=4 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=startYear value='" + todayDate.getFullYear() + "'> 년 &nbsp;");
    document.write("            <input type=text size=3 maxlength=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=startMonth value='" + ( todayDate.getMonth() + 1 ) + "'> 월 &nbsp;");
    document.write("            <input type=text size=3 maxlength=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=startDay value='" + todayDate.getDate() + "'> 일");
    document.write("            </font>");
    document.write("            &nbsp;<input type=checkbox id=leapMonth disabled><font id=ln6>윤달</font>");
    document.write("            </td>");
    document.write("        </tr>");
    document.write("        </table>");
    document.write("        </td>");
    document.write("    </tr>");
    document.write("    </table>");
    document.write("    <font size=1><br></font>");
    document.write("");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=1 background=http://www.blueb.co.kr/SRC/javascript/image2/date_line01.gif border=0></td></tr></table>");
    document.write("    ");
    document.write("    <!----양력/음력 계산기----->");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=7 nowrap></td></tr><tr><td nowrap><font id=ln6><font color=#cf4900>음력/양력 변환</font> : 기준일의 날짜를 음력 혹은 양력으로 변환해 줍니다.</font></td></tr><tr><td height=2 nowrap></td></tr></table>");
    document.write("        ");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420>");
    document.write("    <tr>");
    document.write("        <td>");
    document.write("        <table border=0 cellpadding=0 cellspacing=0>");
    document.write("        <tr>");
    document.write("            <td valign=top>");
    document.write("            <!--------양력/음력--------->");
    document.write("            <table border=0 cellpadding=0 cellspacing=0>");
    document.write("            <tr>");
    document.write("                <td>");
   
    selectStr = "<select style='width:50;font-size:9pt' id='solarLunar' onChange='lunarMonthCheck()'>\n";
    selectStr += "<option value='solar'>양력</option>";
    selectStr += "<option value='lunar' selected>음력</option>";

    NSelect(selectStr, 0, '#FFFFFF', '#EDEFF0', '1 solid #C3CACD', 'arrow_etcsrch.gif');


    document.write("                </td>");
    document.write("            </tr>");
    document.write("            </table>");
    document.write("            <!--------양력/음력--------->");
    document.write("            </td>");
    document.write("            <td valign=bottom><font id=ln6>으로</font></td>");
    document.write("            <td width=10 nowrap></td>");
    document.write("            <td>");
    document.write("            <font id=ln6>");
    document.write("            <a href=javascript:void(0) onClick='dayCalcDisplay(5)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/met_but01.gif border=0 align=absmiddle></a>");
    document.write("            <a href=javascript:void(0) onClick='dayCalcDisplay(5)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_arrow.gif border=0 align=absmiddle></a>");
    document.write("            <input type=text size=5 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=solarLunarYear readonly> 년&nbsp;");
    document.write("            <input type=text size=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=solarLunarMonth readonly> 월&nbsp;");
    document.write("            <input type=text size=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=solarLunarDay readonly> 일");
    document.write("            </font>");
    document.write("            </td>");
    document.write("        </tr>");
    document.write("        </table>");
    document.write("        </td>");
    document.write("    </tr>");
    document.write("    <tr><td height=7 nowrap></td></tr>");
    document.write("    </table>");
    document.write("    <!----양력/음력 계산기----->");
    document.write("    ");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=1 background=http://www.blueb.co.kr/SRC/javascript/image2/date_line01.gif border=0></td></tr></table>    ");
    document.write("    ");
    document.write("    <!----특정일 계산 ----->");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=7 nowrap></td></tr><tr><td><font id=ln6><font color=#cf4900>특정일 계산기</font> : 기준일로부터 오늘까지의 날짜를 계산합니다.</font></td></tr><tr><td height=2 nowrap></td></tr></table>");
    document.write("    ");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=97%>");
    document.write("    <tr><td colspan=2 height=3 nowrap></td></tr>");
    document.write("    <tr>");
    document.write("        <td nowrap valign=top><font id=ln6>오늘은 몇일째?</font></td>");
    document.write("        <td width=100%>");
    document.write("        <font id=ln6>");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(1)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_but02.gif border=0 align=absmiddle></a>");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(1)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_arrow.gif border=0 align=absmiddle></a>");
    document.write("        <input type=text size=6 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=day1 readonly> 일째");
    document.write("        </font>");
    document.write("        </td>");
    document.write("    </tr>");
    document.write("    <tr><td colspan=2 height=5 nowrap></td></tr>");
    document.write("    <tr>");
    document.write("        <td nowrap valign=top>");
    document.write("        <font id=ln6>");
    document.write("        <input type=text size=3 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=day2> 일 되는 날은?&nbsp; &nbsp;");
    document.write("        </font>");
    document.write("        </td>");
    document.write("        <td nowrap>");
    document.write("        <font id=ln6>");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(2)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_but02.gif border=0 align=absmiddle></a>");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(2)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_arrow.gif border=0 align=absmiddle></a>");
    document.write("        <input type=text size=5 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=resultYear readonly> 년&nbsp;");
    document.write("        <input type=text size=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=resultMonth readonly> 월&nbsp;");
    document.write("        <input type=text size=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=resultDay readonly> 일");
    document.write("        </font>");
    document.write("        </td>");
    document.write("    </tr>    ");
    document.write("    <tr><td colspan=2 height=7 nowrap></td></tr>");
    document.write("    </table>");
    document.write("    ");
    document.write("    <!----특정일 계산 ----->");
    document.write("");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=1 background=http://www.blueb.co.kr/SRC/javascript/image2/date_line01.gif border=0></td></tr></table>    ");
    document.write("    ");
    document.write("    <!----요일 계산기----->");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=7 nowrap></td></tr><tr><td><font id=ln6><font color=#cf4900>요일 계산기</font> : 특정일의 요일을 알려 줍니다.</font></td></tr><tr><td height=2 nowrap></td></tr></table>");
    document.write("");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420>");
    document.write("    <tr>");
    document.write("        <td>");
    document.write("        <font id=ln6>");
    document.write("        <input type=text size=5 maxlength=4 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=weekdayYear> 년&nbsp;");
    document.write("        <input type=text size=2 maxlength=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=weekdayMonth> 월&nbsp;");
    document.write("        <input type=text size=2 maxlength=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=weekdayDay> 일 의 요일은?&nbsp;");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(4)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_but01.gif border=0 align=absmiddle></a>");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(4)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_arrow.gif border=0 align=absmiddle></a>");
    document.write("        <input type=text size=6 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=weekday readonly>");
    document.write("        </font></td>");
    document.write("    </tr>");
    document.write("    <tr><td height=7 nowrap></td></tr>");
    document.write("    </table>");
    document.write("    <!----요일 계산기----->");
    document.write("");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=1 background=http://www.blueb.co.kr/SRC/javascript/image2/date_line01.gif border=0></td></tr></table>");
    document.write("");
    document.write("    <!----D-Day 계산기----->");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420><tr><td height=7 nowrap></td></tr><tr><td><font id=ln6><font color=#cf4900>D-Day 계산기</font> : 오늘부터 특정일까지 남은 날짜를 계산합니다.</font></td></tr><tr><td height=2 nowrap></td></tr></table>");
    document.write("    ");
    document.write("    <table border=0 cellpadding=0 cellspacing=0 width=420>");
    document.write("    <tr>");
    document.write("        <td nowrap>");
    document.write("        <font id=ln6>");
    document.write("        <input type=text size=5 maxlength=4 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=targetYear> 년&nbsp;");
    document.write("        <input type=text size=2 maxlength=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=targetMonth> 월&nbsp;");
    document.write("        <input type=text size=2 maxlength=2 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=targetDay> 일 까지 남은 날은?&nbsp;");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(3)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_but02.gif border=0 align=absmiddle></a>");
    document.write("        <a href=javascript:void(0) onClick='dayCalcDisplay(3)'><img src=http://www.blueb.co.kr/SRC/javascript/image2/date_arrow.gif border=0 align=absmiddle></a>");
    document.write("        <input type=text size=6 style='height:21; border:1 solid C3CACD; padding:3 0 0 2;' id=day3 readonly> 일");
    document.write("        </font>");
    document.write("        </td>");
    document.write("    </tr>");
    document.write("    <tr><td height=7 nowrap></td></tr>");
    document.write("    </table>    ");
    document.write("    <!----D-Day 계산기----->");
    document.write("    ");
    document.write("    <!--------날짜 계산하는 곳 ----->");
    document.write("    </td>");
    document.write("</tr>");
    document.write("</table>");
}

initCalendar();
setCalendar(ayear, amonth);
</script>
Posted by 1010