html 메뉴 소스 분석 좀 같이 해 주세요

ant01의 이미지

인터넷에서 다운 받은 매뉴 소스입니다.
http://cssmenumaker.com/

혼자서 분석하려니 어려워서 여러분에게 도움을 청합니다.

웹 프로그램 쪽은 거의 처음인데 특히 css부분이 어려우니 집중적으로 알려 주시면 감사하겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Maker Installation Instructions</title>
 
<style type="text/css">
   body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
   h2 {font-weight:bold; color:#000099; margin:10px 0px; }
   p span {color:#006600; font-weight:bold; }
   a, a:link, a:visited {color:#0000FF;}
   textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
   textarea.html {height: 300px;}
   p {margin: 0 0 10px 0;}
   code, pre {font-family: Consolas,monospace; color: green;}
   ol li {margin: 0 0 15px 0;}
</style>
 
</head>
 
<body>
 
<h2>Your Menu</h2>
 
<style type="text/css">.cssmenu {
	border:1px solid #006600;
	background:#006600;
	}
.cssmenu > ul {
	padding:1px 0;
	margin:0px;
	list-style:none;
	width:100%;
	height:21px;
	border-top:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
	font:normal 8pt verdana, arial, helvetica;
}
.cssmenu > ul li {
	margin:0;
	padding:0;
	display:block;
	float:left;
	position:relative;
	width:148px;
}
.cssmenu > ul li a:link, .cssmenu > ul li a:visited {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#006600;
	color:#ffffff;
	width:148px;
	height:13px;
}
.cssmenu > ul li:hover a, .cssmenu > ul li a:hover, .cssmenu > ul li a:active {
	padding:4px 0;
	display:block;
	text-align:center;
	text-decoration:none;
	background:#339933;
	color:#ffffff;
	width:146px;
	height:13px;
	border-left:1px solid #ffffff;
	border-right:1px solid #ffffff;
}
.cssmenu > ul li ul {
	margin:0;
	padding:1px 1px 0;
	list-style:none;
	display:none;
	background:#ffffff;
	width:146px;
	position:absolute;
	top:21px;
	left:-1px;
	border:1px solid #006600;
	border-top:none;
}
.cssmenu > ul li:hover ul {
	display:block;
}
.cssmenu > ul li ul li {
	width:146px;
	clear:left;
	width:146px;
}
.cssmenu > ul li ul li a:link, .cssmenu > ul li ul li a:visited {
	clear:left;
	background:#006600;
	padding:4px 0;
	width:146px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:1000;
}
.cssmenu > ul li ul li:hover a, .cssmenu > ul li ul li a:active, .cssmenu > ul li ul li a:hover {
	clear:left;
	background:#339933;
	padding:4px 0;
	width:146px;
	border:none;
	border-bottom:1px solid #ffffff;
	position:relative;
	z-index:1000;
}
.cssmenu > ul li ul li ul.navigation-3 {
	display:none;
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	left:145px;
	top:-2px;
	padding:1px 1px 0 1px;
	border:1px solid #006600;
	border-left:1px solid #006600;
	background:#ffffff;
	z-index:900;
}
.cssmenu > ul li ul li:hover ul.navigation-3 {
	display:block;
}
.cssmenu > ul li ul li ul.navigation-3 li a:link, .cssmenu > ul li ul li ul.navigation-3 li a:visited {
	background:#006600;
}
.cssmenu > ul li ul li ul.navigation-3 li:hover a, .cssmenu > ul li ul li ul.navigation-3 li a:hover, .cssmenu > ul li ul li ul.navigation-3 li a:active {
	background:#339933;
}
</style>
<div class='cssmenu'>
<ul>
   <li class='active '><a href='index.html'><span>Home</span></a></li>
   <li><a href='#'><span>Products</span></a>
      <ul>
         <li><a href='#'><span>Product 1</span></a></li>
         <li><a href='#'><span>Product 2</span></a></li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>
 
<h2>Installation Instructions</h2>
 
<ol>
   <li>Upload the <code>menu_assets
folder to the root directory of your website. This is usually where your index.html file is.
  • Copy and paste the code below somewhere between the &lt;head>&lt;/head> tags.

  • Copy and paste the html below where ever you want your menu to show up.

  • Notes

    1. If you run into a problem getting your menu to work or have suggestions for the site please Contact Us and let us know. We will try to help as much as possible.

    익명 사용자의 이미지

    http://oops.org/?t=lecture&sb=beginner&n=1
    여기를 먼저 참고해 보세요.

    ghqlxm의 이미지

    좋은 댓글 감사드립니다. 참고하겠습니다.

    과거는 미래를 결정지을 수 없다.
    미래가 현재와 과거를 결정짓는다.

    익명 사용자의 이미지

    이 질문을 그대로 다른곳으로 가져가서

    "이질문 대해 무엇을 답변해야 할지 알려주세요"

    라고 질문을 올리고 싶은 심정입니다..

    ant01의 이미지

    css부분 즉 style부분이 어렵다고 분명히 밝혔는 데

    많이 모르는 사람은 조용히 있어야 하나요?

    처음부터 많이 아는 사람 있습니까?

    대답하기 곤란하면 안하면 그만입니다.

    상대가 누구인지도 모르는 상태에서 html실력만 보고 계도를 하겠다니

    어이가 없습니다.

    네이버에서는 다른 사람이 아예소스 분석을 통째로 해달라고 해도 해 주는 사람 많이 보았습니다.

    익명 사용자의 이미지

    가입 년차 6년인 분도 이런 무례한 부탁을 하시는 분이 있군요.

    ant01의 이미지

    절대로 무례하다고 생각치 않습니다.

    아마 위에 글 쓰신 분들은 핵심만을 꼬집어서 물어보고 짧게 대답하길 원하시는 모양인데

    모르는 정도에 따라 질문 내용은 달라질 수 있고

    그리고 핵심만 꼬집어 물어볼 정도로 공부가 되있다면 검색을 통해서 혼자 해결 할 수 있을 것 입니다.

    그리고 이제 보니 윗 글 모두 익명이군요. 더 이상 상대하고 싶지 않습니다.

    snowall의 이미지

    음... 네이버같은 분위기를 원하시면 네이버 지식인에서 질문하시는게 더 빠릅니다.

    아무튼, 본문에 물음표가 없어서 아무도 답을 못 해드리고 있는 것 같은데요.

    그냥 "어렵다"라는 내용에는 대답할 수가 없죠. 핵심만을 꼬집어서 물어보기를 원하는게 아니고, 본문에 질문이 없기 때문에 대답을 못하는 겁니다. 이건 마치 그냥 책 한권을 들고와서 "이거 어려워요"라고 하는 건데, 그럼 그 책을 다 가르쳐 달라는 의도인가요? 이 경우 적절한 것은 첫 페이지를 펼치면서 "이 부분부터 이해가 안됩니다"라고 하는 것이 맞죠.

    전부 다 모르겠으면 하나씩 물어보세요.
    "style태그 안에 body가 왜 필요한지 모르겠습니다. 그리고 거기서 h2는 무엇을 뜻하나요?" 같은 식으로죠. 물론 이런 질문에는 대부분 lmgtfy나 RTFM같은 답이 달리겠지만요.

    피할 수 있을때 즐겨라! http://melotopia.net/b

    익명 사용자의 이미지

    뭐, 댓글 틀린 말 없는 것 같은데...

    익명 사용자의 이미지

    어떤식의 답변을 원하는지 적어주셔야죠..

    어느부분의 어느게 모르겠다.

    예를 들면

    "width:146px; " 이게 무슨뜻인가요?

    라든지..

    저렇게 소스만 탁 올려놓으면 어떻게 하라는건가요.

    주방장이 요리사의 도마위에 말도없이

    생선한마리 탁 올려놓고 그냥 가 버리면

    요리사는 어떤 기분일까요?

    회를 뜨라는건지,

    조림을 하라는건지,

    아니면 냉장고에 보관하라는건지,

    아니면 선물로 준것인지

    ...

    어떻게 알까요?

    송효진의 이미지

    질문 : html 메뉴 소스 분석 좀 같이 해 주세요
    예상되는 질문의 목적 : 한 줄, 한 코드 일일히 설명해주세요.

    답변자에게 너무 큰 시간의 소비를 요구하지 마세요.
    아니면 그에 합당한 댓가를 지불하시고 의뢰를 하세요.

    ps. css selector rule 을 익히세요.
    익히는데 도움이 되는 도구)
    1. 구글크롬에서 html 열고 우클릭 요소검사
    2. http://codylindley.com/jqueryselectors/

    익명 사용자의 이미지

    도서관 가서 CSS 책을 빌려다 보시는게 빠를 것 같군요
    CSS가 그렇게 간단한 언어가 아닙니다.

    밑도 끝도 없이 분석하라면 설명할게 너무 많아요.

    시간들이기 아까우시면 해당 사이트에서 생성해주는 소스 그대로 쓰세요.

    그만큼 만들기도 쉽지 않습니다.

    익명 사용자의 이미지

    답변은 '답변자가 시간이 남아서 답변을 하는게 아니다' 라는 글을 어디선가 읽은 기억이 있습니다.

    상황을 바꿔서 저런 질문이 있을때 답변을 어떻게 해줄수 있을까? 이 질문을 자신이라면 답변을 해줄까?

    이질문으로 내가 원하는 답을 들을수 있을까? 라는 생각을 한번 해봤으면 좋겠습니다.

    그냥 지나 가는 길에 들려서.... 써봅니다.

    그리고..이건 그냥 하는 말인데...

    익명의 사용자가 거슬리는 말을 한다고 조금 흥분하신거 같아요

    공격적인 말일 수록 도와주기 더 싫어지는 법입니다. 여긴 답변이 의무가 아니니깐요

    익명 사용자의 이미지

    답변은 '답변자가 시간이 남아서 답변을 하는게 아니다' 라는 글을 어디선가 읽은 기억이 있습니다.

    상황을 바꿔서 저런 질문이 있을때 답변을 어떻게 해줄수 있을까? 이 질문을 자신이라면 답변을 해줄까?

    이질문으로 내가 원하는 답을 들을수 있을까? 라는 생각을 한번 해봤으면 좋겠습니다.

    그냥 지나 가는 길에 들려서.... 써봅니다.

    그리고..이건 그냥 하는 말인데...

    익명의 사용자가 거슬리는 말을 한다고 조금 흥분하신거 같아요

    공격적인 말일 수록 도와주기 더 싫어지는 법입니다. 여긴 답변이 의무가 아니니깐요

    jeongsam의 이미지

    급한 마음에 올리신거 이해합니다. 누구나 초보시절은 있기 마련이니까요. 저역시 답변이 아니라 안타깝지만 설마 HTML 문법을 몰라서 물어보시는건 아닐 것 같고 CSS 분석이 어려우신 것 같은데 일단 selector 개념 정도는 공부를 하시는게 도움될 것 같습니다. 사실 저역시 처음에 CSS를 공부하면서 제일 이해하기 어려웠던 부분이 CSS로 layout을 만드는 거였습니다. 요령을 익히고 나면 별개 아닌데 첫걸음 떼기 정말 힘들더군요.^^;
    selector 개념을 익히고 나면 DIV 태그를 이용해서 화면을 가로나 세로로 등분하는 연습을 해보시면 요령이 익혀지실 것 같네요.

    shint의 이미지

    http://system.neulwon.com/xe/linux_mysql/818

    소스 분석해보니까. 다 지우고 요거만 남아도 되드라구요.
    button.css
    jquery.js
    jQuery.navi.js
    script.js

    ----------------------------------------------------------------------------
    젊음'은 모든것을 가능하게 만든다.

    매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
    정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

    각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

    ant01의 이미지

    소스를 나름대로 이해했다고 생각하고 수정해 보면 이상하게 마음대로 되지 않는 부분이 많이 있는 소스라
    철저히 분석하고 시작하는 게 옳다라고 생각하고 질문 했지만 답은 없고 물론 크게 기대도 안했지만
    그래서 굉장히 많은 시행착오를 했습니다.
    지금도 100% 자유 자재로 소스를 콘트롤 할 수 없는 상태이고 그저 아쉬운 대로 디자이너의요구를 맞춘 정도라고 할까요.
    다음을 위해서라도 이 소스는 분석해 볼 가치가 있다고 생각합니다.
    누가 시간 많고 능력 되시는 분이 한번 봐 주셨으면 합니다.
    하지만 바쁘거나 싫으면 하지 않아도 됩니다.
    물론 의무가 아니니까요.

    아예 저 소스는 잊고 새로 짜는게 나을까요?

    shint의 이미지

    이건 제가 만든건데 참고해보세요.

    사용방법
    html 브라우저에서 실행 - 좌측 상단 menu 버튼 클릭 - New 클릭
    div가 화면 중앙에 랜덤하게 생성 됩니다.

    기능은 div 생성/ 소멸/ 크기변경/ 화면이동/ 색상변경등 대부분이 가능합니다.

    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <LINK id="icon_link" rel="shortcut icon" href="http://www.sayheart.com/ico/sayheart.ico">
    <LINK id="css_link" rel="stylesheet" type="text/css" href="./css/sayheart.css">
     
    <html>
    	<head>
    		<title>sayheart</title>
    	</head>
    	<body id="main" width="100%" height="100%" onload="fn_load();" onresize="fn_resize();">
     
     
     
    <script language="JavaScript">
    document.oncontextmenu = function (e)
    {
    	return false;
    }
    document.ondragstart = new Function('return false');     // 드래그 방지
    document.onselectstart = new Function('return false');   // 선택 방지
    </script>
     
     
     
    <script language="JavaScript">
    <!--
    //Cascading Style Sheets
    //http://msdn.microsoft.com/en-us/library/ms531205(vs.85).aspx
    //http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=66510180&qb=67iM65287Jqw7KCAIO2BrOq4sA==&enc=utf8&section=kin&rank=1&search_sort=0&spq=0
    //http://blog.naver.com/rmc841/60108724030
     
    var browser_w = document.body.clientWidth;
    var browser_h = document.body.clientHeight;
    var desktop_w = window.screen.availWidth;
    var desktop_h = window.screen.availHeight;
     
    function fn_mousedown_event(e)
    {
    	//e.type	: mousedown
    	//e.which	: 1 == leftdown/ 2 == middledown/ 3 == rightdown
    	//e.pageX Y : 브라우저 상대좌표
    	//e.screenX : 모니터 절대좌표
    	//document.write("fn_mousedown_event<BR>");
    	return true;
    }
    document.onmousedown = fn_mousedown_event;
     
    function fn_mousemove_event(e)
    {
    	return true;
    }
    document.onmousemove = fn_mousemove_event;
     
    function fn_mouseup_event(e)
    {
    	return true;
    }
    document.onmouseup = fn_mouseup_event;
     
    //funtion clickEvent(e)
    //{
    //	document.f.t.value="document의 이벤트 캡쳐";
    //}
    //document.captureEvents(Event.CLICK);
    //document.onclick = clickEvent;
     
     
     
    //진입속도: click. mouseout, mouseover, mousemove. mousedown. mouseup
    function fn_tip(e)
    {
    	if(e.type == "click")
    	{
    //		document.write("click<BR>");
    	}
    	if(e.type == "mouseout")
    	{
    //		document.write("mouseout<BR>");
    		this.m_out = 1;
    	}
    	if(e.type == "mouseover")
    	{
    //		document.write("mouseover<BR>");
    	}
    	if(e.type == "mousemove")
    	{
    //		document.write("mousemove<BR>");
    		if(this.m_drag == 1)
    		{
    			this.left = 500;
    		}
    	}
    	if(e.type == "mousedown")
    	{
    //		document.write("mousedown<BR>");
    		this.m_drag = 1;
    	}
    	if(e.type == "mouseup")
    	{
    //		document.write("mouseup<BR>");
    		this.m_drag = 0;
    	}
    //안됨.
    //	if(e.type == "mouseenter")
    //	{
    //		document.write("mouseenter<BR>");
    //	}
    //	if(e.type == "mouseleave")
    //	{
    //		document.write("mouseleave<BR>");
    //	}
    }
     
    //http://cafe.naver.com/woosongbitcafe.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=96
    /*==============================================================================
      Function : javaScript Map
      Return   :
      examples : 
               : get(key), getKey(value), put(key, value), size(), remove(key),
                 clear(), keys(), values(), containsKey(key), containsValue(value),
                 isEmpty(), putAll(map), toString(separator)
    ==============================================================================*/
    function Map(Delimitor) {
      this.Delimitor = (Delimitor == null ? "||" : Delimitor);
      this._MapClass = new ActiveXObject("Scripting.Dictionary");
      this.get = function(key) { return this._MapClass.exists(key) ? this._MapClass.item(key) : null; }
      this.getKey = function (value) {
        var keys = this.keys();
        var values = this.values();
        for (var i in values) {
           if (value == values[i]) return keys[i];
         }
        return "";
      }
      this.put = function(key, value) {
          var oldValue = this._MapClass.item(key);
          this._MapClass.item(key) = value;
          return value;
      }
      this.size = function() { return this._MapClass.count; }
      this.remove = function(key) {
        var value = this._MapClass.item(key);
        this._MapClass.remove(key);
        return value;
      }
      this.clear = function() {
        this._MapClass.removeAll();
      }
      this.keys = function() {
        return this._MapClass.keys().toArray();
      }
      this.values = function() {
        return this._MapClass.items().toArray();
      }
      this.containsKey = function(key) {
        return this._MapClass.exists(key);
      }
      this.containsValue = function(value) {
        var values = this.values();
        for (var i in values) {
          if (value == values[i]) {
            return true;
          }
        }
        return false;
      }
      this.isEmpty = function() { return this.size() <= 0;}
      this.putAll = function(map) {
        if (!(map instanceof Map)) {
          throw new Error(0, "Map.putAll(Map) method?? Map type?? parameter?? ??????????.");
        }
        var keys = map.keys();
        for (var i in keys) {
          this.put(keys[i], map.get(keys[i]));
        }
        return this;
      }
      this.toString = function(separator) {
        var keys = this.keys();
        var result = "";
        separator = separator == null ? "&" : separator;
        for (var i in keys) {
          result += (keys[i] + this.Delimitor + this._MapClass.item(keys[i]));
          if (i < this.size() - 1) {
            result += separator;
          }
        }
        return result;
      }
    }
     
    //function dblclick()
    //{
    //}
    //
    //if(document.layers)
    //{ 
    //	document.captureEvents(Event.ONDBLCLICK); 
    //} 
    //document.ondblclick=dblclick; 
     
    function fn_get_pos()
    {
    	this.x	= event.clientX + document.body.scrollLeft;
    	this.y	= event.clientY + document.body.scrollTop;
    	if (this.x < 0){this.x = 0;}
    	if (this.y < 0){this.y = 0;}
    //	var elm = event.srcElement.parentElement;
    //	var i = parseInt(elm.parentElement.offsetHeight,10);
    //	var j = parseInt(elm.offsetHeight,10);
    	return this;
    }
     
     
    var main_index = 10000;
    var ar_div = new Array();
     
    function fn_dbclick(div_name)
    {
    	var div = document.getElementById(div_name);
    	if (div.m_mode == "MODE_EDITOR")
    	{
    		for (var i = 0; i < ar_div.length; i++)
    		{
    			ar_div[i].style.zIndex = 0;
    		}
    		div.m_drag = 0;
    	}
     
    	for(var i=0; i<ar_div.length; i++)
    	{
    		if(ar_div[i].id == div.id)
    		{
    			delete ar_div[i];
    			ar_div[i] = null;
    			ar_div.splice(i,1);
    			document.getElementById(div.id).parentNode.removeChild(div);
    //			log.innerHTML = ar_div+"<BR>";
     
     
    			//
    			var div_menu = document.getElementById("menu_id");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_zIndex");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_left");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_top");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_width");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_height");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_backgroundColor");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_innerText");
    			div_menu.value = "";
     
    			var div_menu = document.getElementById("menu_cssText");
    			div_menu.value = "";		
    			return ;
    		} 
    	}
    }
     
    function fn_hit_test_div(div, x_, y_)
    {
    	if(	(parseInt(div.style.left) < parseInt(x_)) &&
    		(parseInt(div.style.top) < parseInt(y_)) &&
    		(parseInt(div.style.left)+parseInt(div.style.width) > parseInt(x_)) &&
    		(parseInt(div.style.top)+parseInt(div.style.height) > parseInt(y_))
    	)
    	{	return 1;	}else{	return 0;	}
    }
     
    function fn_hit_test(rc, x_, y_)
    {
    	if(	(parseInt(rc.left) < parseInt(x_)) &&
    		(parseInt(rc.top) < parseInt(y_)) &&
    		(parseInt(rc.left)+parseInt(rc.width) > parseInt(x_)) &&
    		(parseInt(rc.top)+parseInt(rc.height) > parseInt(y_))
    	)
    	{	return 1;	}else{	return 0;	}
    }
     
     
    function fn_drag_start(div_name)
    {
    	var div = document.getElementById(div_name);
    	if (div.m_mode == "MODE_EDITOR")
    	{
    		div.m_drag	= 1;
     
    		var pos = fn_get_pos();
    		div.m_sel_pos_x = pos.x;
    		div.m_sel_pos_y = pos.y;
    		Map[div_name] = div;
     
    		var rect	= new Object();
    		rect.left	= parseInt(div.style.left) + parseInt(div.style.width) - 30;
    		rect.top	= parseInt(div.style.top) + parseInt(div.style.height) - 30;
    		rect.width 	= 30;
    		rect.height	= 30;
    		if(fn_hit_test(rect, pos.x, pos.y) == 1)
    		{
    			div.m_mode = "MODE_RESIZE";
    //			log.innerHTML += "test" + "<BR>";
    		}
    		delete rect;
     
    		//
    		var div_menu = document.getElementById("menu_id");
    		div_menu.value = div.id;
     
    		var div_menu = document.getElementById("menu_zIndex");
    		div_menu.value = div.style.zIndex;
     
    		var div_menu = document.getElementById("menu_left");
    		div_menu.value = div.style.left;
     
    		var div_menu = document.getElementById("menu_top");
    		div_menu.value = div.style.top;
     
    		var div_menu = document.getElementById("menu_width");
    		div_menu.value = div.style.width;
     
    		var div_menu = document.getElementById("menu_height");
    		div_menu.value = div.style.height;
     
    		var div_menu = document.getElementById("menu_backgroundColor");
    		div_menu.value = div.style.backgroundColor;
     
    		var div_menu = document.getElementById("menu_innerText");
    		div_menu.value = div.innerText;	
     
    		var div_menu = document.getElementById("menu_cssText");
    		div_menu.value = div.style.cssText;		
    		return ;
    	}
     
    	if(div.m_mode == "MODE_TAB")
    	{
    		for(var i=0; i<ar_div.length; i++)
    		{
    			ar_div[i].style.zIndex = 0;
    		}
    		if(div_name == "editor")
    		{
    			div = fn_set_div(div_name, 100, 100, 300, 300, "2a2a2a", "2a2a2a", main_index);
    		}
    		if(div_name == "editor3")
    		{
    			div = fn_set_div(div_name, 200, 100, 300, 300, "2a2a2a", "red", main_index);
    		}
    		div.m_mode	= "MODE_EDITOR";
    		div.m_drag	= 0;
    		return ;
    	}
    	return ;
    }
     
     
    function fn_drag_move(div_name)
    {
    	var div = document.getElementById(div_name);
    	if(div.m_mode == "MODE_RESIZE" && div.m_drag == 1)
    	{
    		var pos = fn_get_pos();
    		var div_left	= parseInt(div.style.left);
    		var div_top	= parseInt(div.style.top);
    		for(var i=0; i<ar_div.length; i++)
    		{
    			ar_div[i].style.zIndex = 0;
    		}
    		div.style.width		= pos.x-div_left+20;
    		div.style.height	= pos.y-div_top+20;
    		div.style.zIndex	= main_index;
    	}
     
    	if(div.m_mode == "MODE_EDITOR" && div.m_drag == 1)
    	{
    		var pos = fn_get_pos();
    		var gap_x	= pos.x - (div.m_sel_pos_x - parseInt(div.style.left));
    		var gap_y	= pos.y - (div.m_sel_pos_y - parseInt(div.style.top));
    		for(var i=0; i<ar_div.length; i++)
    		{
    			ar_div[i].style.zIndex = 0;
    		}
    		div.style.left		= gap_x;
    		div.style.top		= gap_y;
    		div.style.zIndex	= main_index;
    		div.m_sel_pos_x		= pos.x;
    		div.m_sel_pos_y		= pos.y;
    		return ;
    	}
    }
     
    function fn_drag_end(div_name)
    {
    	var div = document.getElementById(div_name);
    	div.m_drag	= 0;
    	if (div.m_mode == "MODE_RESIZE")
    	{
    		div.m_mode = "MODE_EDITOR"
    	}
     
    }
     
     
    function fn_set_menu(menu_mode)
    {
    	var div_menu_id	= document.getElementById("menu_id");			//메뉴상에 선택한 id
    	var div_select	= document.getElementById(div_menu_id.value);	//선택한 넘 div 얻기
    	var div_menu	= document.getElementById(menu_mode);
     
    	if (menu_mode == "menu_id")					{	div_select.id						= div_menu.value;	}
    	if (menu_mode == "menu_left")				{	div_select.style.left				= div_menu.value;	}
    	if (menu_mode == "menu_top")				{	div_select.style.top				= div_menu.value;	}
    	if (menu_mode == "menu_zIndex")				{	div_select.style.zIndex				= div_menu.value;	}
    	if (menu_mode == "menu_width")				{	div_select.style.width				= div_menu.value;	}
    	if (menu_mode == "menu_height")				{	div_select.style.height				= div_menu.value;	}
    	if (menu_mode == "menu_backgroundColor")	{	div_select.style.backgroundColor	= div_menu.value;	}
    	if (menu_mode == "menu_innerText")			{	div_select.innerText				= div_menu.value;	}
    }
     
     
    var total_div_count = 0;
    function fn_new_div()
    {
    	fn_create_div("div_item"+total_div_count++);
    }
     
    function fn_create_div(div_name)
    {
    	var div = document.createElement(div_name);
    	main.appendChild(div);
    	div.innerHTML
    	= "<div id='"+div_name+"' class='div_item' style='background-color:2a2a2a; color:black; width:50px; height:20px; border:solid; border-width:1;	fontSize:10;\
    								position:absolute; left:0px; top:60px; z-index:-1;'	\
    								onmousedown=javascript:fn_drag_start('"+div_name+"');	\
    						onmousemove=javascript:fn_drag_move('"+div_name+"');	\
    						onmouseup=javascript:fn_drag_end('"+div_name+"');		\
    						onmouseout=javascript:fn_drag_end('"+div_name+"');		\
    						ondblclick=javascript:fn_dbclick('"+div_name+"');		\
    								>	\
    		<table id='"+div_name+"' class='div_item' width=100%; height=100%; border=0>	\
    			<tr>	\
    				<td align='center' valign='middle'	\
    						>editor	\
    				</td>	\
    			</tr>	\
    		</table >	\
    		</div>";
    	//
    	var pos_x = Math.floor(Math.random() * 300) + 1;
    	var pos_y = Math.floor(Math.random() * 300) + 1;
    //	var main_color = Math.floor((Math.random()*254)+1).toString(16)+Math.floor((Math.random()*254)+1).toString(16)+Math.floor((Math.random()*254)+1).toString(16);	//Math.floor(Math.random()*16777215).toString(16);
    //	var bg_color = Math.floor((Math.random()*254)+1).toString(16)+Math.floor((Math.random()*254)+1).toString(16)+Math.floor((Math.random()*254)+1).toString(16);	//Math.floor(Math.random()*16777215).toString(16);
    	var main_color = Math.floor((Math.random()*100)+50).toString(16)+Math.floor((Math.random()*100)+50).toString(16)+Math.floor((Math.random()*100)+50).toString(16);	//Math.floor(Math.random()*16777215).toString(16);
    	var bg_color = Math.floor((Math.random()*100)+50).toString(16)+Math.floor((Math.random()*100)+50).toString(16)+Math.floor((Math.random()*100)+50).toString(16);	//Math.floor(Math.random()*16777215).toString(16);
     
    //	log.innerHTML = main_color+"<BR>";
    	div = fn_set_div(div_name, 100+pos_x, 100+pos_y, 300, 300, main_color, bg_color, main_index);
    	div.m_mode	= "MODE_EDITOR";
     
    	//
    	ar_div.push(div);
    	return div;
    }
     
    function fn_resize()
    {
    	var div = getElementById("main");
    	div.width = browser_w;
    	div.height = browser_h;
    }
     
    var log;
    function fn_log()
    {
    	log = document.getElementById("log");
    	if (log.style.display == "none")
    	{
    		log.style.display = "block";
    		return;
    	}
    	if (log.style.display == "block")
    	{
    		log.style.display = "none";
    		return;
    	}
    }	
     
    function fn_load()
    {
    	log = document.getElementById("log");
    	log.style.display = "none";
    }
     
    function fn_test(string)
    {
    //	log.innerText = string;
    }
    function fn_set_div(d_name, d_left, d_top, d_width, d_height, d_color, d_bg_color, d_index)
    {
    	var div = document.getElementById(d_name);
    	div.id						= d_name;
    //	div.width					= 100;
    //	div.height					= 3;
    	div.style.zIndex			= d_index;
    	div.style.left				= d_left;
    	div.style.top				= d_top;
    	div.style.width				= d_width;
    	div.style.height			= d_height;
    	div.style.display			= "block";
    	div.style.borderWidth		= 1;
    	div.style.borderStyle		= "solid";
    	div.style.borderColor		= d_bg_color;
    	div.style.backgroundColor	= d_bg_color;
        div.style.fontWeight		= "bolder"; //bold,normal
        div.style.display			= "block";
        div.style.fontStyle			= "italic"; //italic,normal
        div.style.fontFamily		= 'Lucida Console'; //"궁서";
    	div.style.fontSize			= d_index;
    	div.onclick					= new Function('fn_test(\'hello\')');   // 선택 방지
    //	div.onmousedown				= fn_tip;
    //	div.onmousemove				= fn_tip;
    //	div.onmouseup				= fn_tip;
    //	div.onmouseover				= fn_tip;
    //	div.onmouseout				= fn_tip;
    //	div.onmouseenter			= fn_tip;
    //	div.onmouseleave			= fn_tip;
    	return div;
    }
    //-->
    </script>
     
     
     
    <style type="text/css">
    #editor		{font-family:Arial, Tahoma,sans-serif; font-size:small background-color:#eab9b2; font-size:12px; color:white;}
    #editor3	{font-family:Arial, Tahoma,sans-serif; font-size:small background-color:#eab9b2; font-size:12px; color:white;}
    #menu_btn	{font-family:Arial, Tahoma,sans-serif; font-size:small background-color:#eab9b2; font-size:12px; color:white;}
    .div_item	{font-family:Arial, Tahoma,sans-serif; font-size:small background-color:#eab9b2; font-size:12px; color:white;}
    #menu		{font-family:Arial, Tahoma,sans-serif; font-size:small background-color:#eab9b2; font-size:12px; color:white;}
    #menu_btn	{font-family:Arial, Tahoma,sans-serif; font-size:small background-color:#eab9b2; font-size:12px; color:white;}
    </style>
     
     
    <style type="text/css">
    body,div,table {margin:0px; padding:0px;}
    #gradation
    { 
    	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#454545, EndColorStr=#898989); 
    }
    #main
    { 
    	filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#d3d3d3, EndColorStr=#FFFFFF); 
    	background:#EEEEEE -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d3d3d3), to(#ffffff)); /* 크롬, 사파리 browsers */
    	background:#EEEEEE -moz-linear-gradient(top, #d3d3d3, #ffffff); /* 파이어폭스 3.6+ */
    }
    #etc
    {
    	style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#f3f3f3, EndColorStr=#c5c5c5);"
    	style="filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray', Positive='true');"
    	style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorStr=#EEF2FC, startColorStr=#B1C7F9, gradientType=0);"
    	style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=배경색상, EndColorStr=마무리부분색상);"
    	style="background color:black ; filter:alpha(opacity=50, style=1, finishopacity=0);"
    }
    </style> 
     
     
     
     
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    //http://blog.naver.com/maglitt?Redirect=Log&logNo=60057224092
    function fn_div_motion_start()
    {
    	var div = document.getElementById("menu");
    	if(div.menu_open == null)
    	{
    		div.menu_open = 1;
    		div.interval_id = setInterval("fn_div_motion('menu',0,0)", 10);
    		var div = document.getElementById("menu_btn");
    		div.interval_id = setInterval("fn_div_motion('menu_btn',0,100)", 10);
    		return ;
    	}
    	if(div.menu_open == 1)
    	{
    		div.menu_open = null;
    		div.interval_id = setInterval("fn_div_motion('menu',0,-100)", 10);
    		var div = document.getElementById("menu_btn");
    		div.interval_id = setInterval("fn_div_motion('menu_btn',0,0)", 10);
    		return ;
    	}
    }
     
    function fn_distance(start, end)
    {
    	distance = end - start;
    	if(distance < 500)	{	distance = 50;	}
    	if(distance < 100)	{	distance = 10;	}
    	if(distance < 10)	{	distance = 1;	}
    	return distance;
    }
    function fn_div_motion(div_id, max_x, max_y)
    {
    	var div = document.getElementById(div_id);
    	var d_left = parseInt(div.style.left);
    	var d_top = parseInt(div.style.top);
    	var distance;
    	if(max_x < d_left)
    	{
    		distance = fn_distance(d_left, max_x);
    		div.style.left	= d_left - distance;
    	}
    	if(max_y < d_top)
    	{
    		distance = fn_distance(d_top, max_y);
    		div.style.top	= d_top - distance;
    	}
    	if(max_x > d_left)
    	{
    		distance = fn_distance(max_x, d_left);
    		div.style.left	= d_left + distance;
    	}
    	if(max_y > d_top)
    	{
    		distance = fn_distance(max_y, d_top);
    		div.style.top	= d_top + distance;
    	}
    	if(d_left == max_x && d_top == max_y)
    	{
    		clearInterval(div.interval_id);
    	}
    }
    //-->
    </SCRIPT>
     
     
     
     
     
     
     
     
     
    	<div id="log"	style='background-color:transparent; color:black; width:300; height:300; border:solid; border-width:1;
    					position:absolute; left:500px; top:50px; z-index:10000;'>
    	</div>
     
     
    	<div id="menu_btn" onclick="fn_div_motion_start()"
    						style='background-color:2a2a2a; color:black; width:50; height:20; border:solid; border-width:1;
    						position:absolute; left:0px; top:0px; z-index:80000;'
    	>
    		<table id='menu_btn' width=100%; height=100%; border=0>
    			<tr>
    				<td align='center' valign='middle'>
    					menu
    				</td>
    			</tr>
    		</table>
    	</div>
     
    	<div id="menu"	style='background-color:2a2a2a; color:black; width:100%; height:100; border:solid; border-width:1;
    					position:absolute; left:0px; top:-100px; z-index:80000;'
    	>
    		<table id="menu" border=0>
    			<tr>
    				<td onclick="javascript:fn_new_div();">
    					new
    				</td>
    				<td onclick="javascript:fn_log();">
    					log
    				</td>
    				<td onclick="fn_set_menu('menu_id')">
    					id					<input id="menu_id"					type="text" size="8">
    				</td>
    				<td onclick="fn_set_menu('menu_zIndex')">
    					zIndex				<input id="menu_zIndex"				type="text" size="5">
    				</td>
    				<td onclick="fn_set_menu('menu_left')">
    					left				<input id="menu_left"				type="text" size="5">
    				</td>
    				<td onclick="fn_set_menu('menu_top')">
    					top					<input id="menu_top"				type="text" size="5">
    				</td>
    				<td onclick="fn_set_menu('menu_width')">
    					width				<input id="menu_width"				type="text" size="5">
    				</td>
    				<td onclick="fn_set_menu('menu_height')">
    					height				<input id="menu_height"				type="text" size="5">
    				</td>
    				<td onclick="fn_set_menu('menu_backgroundColor')">
    					backgroundColor		<input id="menu_backgroundColor"	type="text" size="12">
    				</td>
    			</tr>
    		</table>
    		<table id="menu" border=0>
    			<tr>
    				<td onclick="fn_set_menu('menu_innerText')">
    					innerText			<input id="menu_innerText"			type="text" size="150">
    				</td>
    			</tr>
    		</table>
    		<table id="menu" border=0>
    			<tr>
    				<td onclick="fn_set_menu('menu_cssText')">
    					cssText			<input id="menu_cssText"				type="text" size="150">
    				</td>
    			</tr>
    		</table>
    	</div>
     
    <!--
     
    	<div id="main_bg" width="100%" height="100%"
    					style='background-color:transparent; color:black; width:100%; height:100%; border:solid; border-width:1;
    					position:absolute; left:0px; top:0px; z-index:10000;'>
    	= "<div id='"+div_name+"' class='div_item' style='background-color:2a2a2a; color:black; width:50px; height:20px; border:solid; border-width:1;	\
    								position:absolute; left:0px; top:60px; z-index:-1;'>	\
    		<table id='"+div_name+"' class='div_item' width=100%; height=100%; border=0>	\
    			<tr>	\
    				<td valign='middle'	\
    						onmousedown=javascript:fn_drag_start('"+div_name+"');	\
    						onmousemove=javascript:fn_drag_move('"+div_name+"');	\
    						onmouseup=javascript:fn_drag_end('"+div_name+"');		\
    						onmouseout=javascript:fn_drag_end('"+div_name+"');		\
    						ondblclick=javascript:fn_dbclick('"+div_name+"');		\
    						>editor	\
    				</td>	\
    			</tr>	\
    	<form name="f">
    		<input type="button" name="button1" value="first" onClick="document.bgColor='blue';">
    		<input type="text" name="t">
    http://blog.naver.com/smille12/110095776728
    //-->
    	</body>
    </html>

    ----------------------------------------------------------------------------
    젊음'은 모든것을 가능하게 만든다.

    매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
    정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

    각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

    ant01의 이미지

    많은 도움이 될 것 같습니다.

    자신이 제작한 소스 공개하는 것이 쉬운 일이 아닌데 정말 감사합니다.

    익명 사용자의 이미지

    '답은 없고 물론 크게 기대도 안했지만'

    이렇게 쓰신것 보니

    아직도 이글에 달린 댓글의 의미를 이해 못하신것 같네요.

    즉, 질문 방법이 잘못되었다는 겁니다.

    이곳 뿐만아니라 모든 다른 인터넷상의 게시판에서도 이와같은 방법으로 질문을 올리셨던것 같습니다.

    때문에 기대도 안하게 되겠지요. (당연합니다 누가 답변을 달고 싶을까요..)

    또한,

    나름 분석도 해보셨다면

    어디 부분이 막히는지, 어느부분이 이해가 안가는지 구체적으로 질문해주시기 바랍니다.

    지금 이글의 질문이라면
    질문하는게 걸린 시간 1분
    답변하는데는 1시간이상 걸릴것같군요.

    반대로 되야 하는것 아닐까요?

    질문하는데 걸리는시간 1시간
    답변에 걸리는 시간 1분

    이렇게 하는게 질문자님도 공부가 될것이고
    답변자들도 노하우 전수를 쉽게 할 수 있을것 같네요.

    남을 배려하는 마음을 항상 가지고 계시길 바랍니다.

    런맨의 이미지

    이분 지능적인 트룰러 같은데요..
    크랙을 해서 쓴다고 당당히 이야기하고
    이런 질문글을 올리고 이상한 사람인듯...

    인생은 도박이다.

    shint의 이미지

    악인이 사람 죄짓게 만드는 가장 쉬운 방법입니다.

    kldp는 그러지 않았으면 합니다.

    모르면 물어보고
    알면 답해주고
    그게 전붑니다

    ----------------------------------------------------------------------------
    젊음'은 모든것을 가능하게 만든다.

    매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
    정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

    각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

    런맨의 이미지

    사람을 단어로 부른다는게 무슨뜻인지요???

    인생은 도박이다.

    댓글 달기

    Filtered HTML

    • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
    • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
    • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
    • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

    BBCode

    • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
    • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
    • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
    • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

    Textile

    • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
    • You can use Textile markup to format text.
    • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

    Markdown

    • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
    • Quick Tips:
      • Two or more spaces at a line's end = Line break
      • Double returns = Paragraph
      • *Single asterisks* or _single underscores_ = Emphasis
      • **Double** or __double__ = Strong
      • This is [a link](http://the.link.example.com "The optional title text")
      For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
    • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
    • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

    Plain text

    • HTML 태그를 사용할 수 없습니다.
    • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
    • 줄과 단락은 자동으로 분리됩니다.
    댓글 첨부 파일
    이 댓글에 이미지나 파일을 업로드 합니다.
    파일 크기는 8 MB보다 작아야 합니다.
    허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
    CAPTCHA
    이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.