'03.HTML 4.X, HTML5, XML...'에 해당되는 글 234건

  1. 2010.01.04 javascript OS 버전 체크
  2. 2009.12.21 간단한 JavaScriptMethodOverloading
  3. 2009.12.21 내가 Prototype에서 jQuery로 옮긴 이유
  4. 2009.11.26 html 소스 암호화
  5. 2009.11.26 롤링 스크립트
  6. 2009.11.24 JavaScriptMVC
  7. 2009.11.24 google Closure Compiler (Labs)
  8. 2009.11.10 iis 405 erroe 나올때 url 을 post 방식으로 넘겨서 인식 못할때
  9. 2009.11.10 화면한줄에 나오게 하기. iframe 적용시
  10. 2009.11.06 google api 를 이용한 rss 서비스
  11. 2009.10.30 html 특수문자
  12. 2009.10.29 마우스 오버시 색상변경
  13. 2009.10.26 IE 전용 스크립트...EE,IE 둘다 가능하도록 변경 javascript 1
  14. 2009.10.20 ID저장 자바스크립트, id save javascript
  15. 2009.10.20 아이디 저장 자바스크립트
  16. 2009.10.07 배경이미지 반복 안되게 style="background-repeat:no-repeat;
  17. 2009.10.07 div 가운데 정렬되는 문제
  18. 2009.10.07 ie6에서 프레임 사용시 가로스크롤이 생기는 문제
  19. 2009.09.28 gfeedfetcher.js
  20. 2009.09.15 javascript 익명함수 예제
  21. 2009.09.08 유용한 자바스크립트 하나
  22. 2009.09.01 jQuery mootools 충돌 해결
  23. 2009.08.31 자바스크립트 휴대폰번호 검증 ( 간단한 정규식 표현)
  24. 2009.08.28 html 즐겨찾기 추가
  25. 2009.08.26 document.all 을 쓰지 맙시다!
  26. 2009.08.26 location.href 에서 target=_blank 효과 사용
  27. 2009.08.26 firefox 에서 form submit 이 안될경우
  28. 2009.08.26 파이어폭스에서 javascript 시 this.value 가 않먹을때
  29. 2009.07.30 테이블에 스크롤바 생성하기 1
  30. 2009.07.24 좀 괜찮은 팁. 전송버튼 두번클릭 방지.
반응형

<script type="text/javascript">
<!--
 function ttt(){
  var request_os = window.navigator.appVersion;
   var os_array = request_os.split(";");
  //alert("os_array : "+os_array[2]);
  //alert("request_os : "+request_os);
  //alert(document.cookie);
  switch(os_array[2])
 {
    case " Windows NT 6.1" :
        os_version = "Windows7";
        break;
    case " Windows NT 6.0" :
        os_version = "WindowsVista";
        break;
    case " Windows NT 5.1" :
        os_version = "WindowsXP";
        break;
    case " Windows NT 5.0" :
        os_version = "Windows2000";
        break;
    case " Windows NT 4.0" :
        os_version = "WindowsNT";
        break;
    case " Windows 98" :
        os_version = "Windows98";
        break;
    case " Windows 95" :
        os_version = "Windows95";
        break;
 }
 alert("os_version : "+os_version);
 
 }
-->
</script>

<input type="button" onclick="ttt();">

Posted by 1010
반응형
// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn){
    var old = object[name];
    object[name] = function(){
        if (fn.length == arguments.length)
            return fn.apply(this, arguments);
        else
            if (typeof old == 'function')
                return old.apply(this, arguments);
    };
}

// Now setup the methods
function Users(){
    addMethod(this, "find", function(){
        // Find all users...
    });
    addMethod(this, "find", function(name){
        // Find a user by name
    });
    addMethod(this, "find", function(first, last){
        // Find a user by first and last name
    });
}

// Now use the methods
var users = new Users();
users.find(); // Finds all
users.find("John"); // Finds users by name
users.find("John", "Resig"); // Finds users by first and last name
users.find("John", "E", "Resig"); // Does nothing



출처 : http://openframework.or.kr/Wiki.jsp?page=JavaScriptMethodOverloading
Posted by 1010
반응형
이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 jQuery가 가장 적절하고 바람직하다는 생각에 옮겨봅니다. 저도 Quark씨처럼 당장의 편리함을 따른 것보다 jQuery의 철학을 따르는 것이 더 바람직하다고 생각합니다. 항상 디커플링을 지향하는 것이 생산성 문제를 개선하고 미래에 적응하는 것을 가능케 하기 때문입니다.

 오역된 부분이 있을 지도 모르겠습니다.-_-;; 교과서 영어가 아니라-_-;; 나름대로 의역을 하긴 했는데 어렵네요.

----여기부터는 번역입니다.

 jQuery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jQuery는 태생적으로 Behavior driven development 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)을 방법에 기반한다. 반면에 Prototype은 태생적으로 Class driven development를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다.

 세달 전에 마음을 jQuery로 굳히기까지 나는 항상 Prototype 라이브러리를 사용해왔다. jQuery은 나를 매우 고무시겼다. 여기에 그 이유가 있다.

  1. BDD(Behavior driven development)
  jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

1.$(element).click(function(){
2.  alert("warning");
3.});
  이제 복잡한 예제를 살펴보자. speciallinks 클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
    1. href를 "javascript:void(0);"로 변경하고
    2. 클릭시 로그를 남기고
    3. onhover시(mouse over시) 배경색을 변경한다.

1.$("div.speciallinks").attr("href","javascript:void(0)")
2.  .click(function() {console.log("div.speciallinks clicked");})
3.  .hover(function(){$(this).addClass("hovered");},
4.       function(){$(this).removeClass("hovered");});

  2. MVC + J
    MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

    나는 JQuery를 사용하여 나의 HTML 파일을 매우 깨끗하게 만들었고 모든 JavaScript 코드를 .js에 넣음으로써 HTML 엘리먼트의 행위를 모두 .js 파일에 정의하였다.

  3. 액션 체인(Chaining of actions)
    액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다.

1.$("div.message").show()
2.  .append("<P>Action has been executed successfully")
3.  .addClass("flash");
4.// 각 함수는 라인으로 구분하여 사용한다.
5.</P>

    이 것은 jQuery의 모든 메소드가 query 객체를 반환하기 때문에 가능하다. 그리고 뒤따르는 메소드들이 선택된 HTML 엘리먼트에 체인 형식으로 적용된다.

   4. CSS 셀렉터 문제(CSS Selector rocks)
      CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다. 나는 Prototype에서 id 속성을 사용하는 것이 최선이라는 것을 알게 됐다.

   5. 엘리먼트의 존재 유무를 검사할 필요가 없다.
     프로토타입으로 액션으로 적용하기 전에 항상 엘리먼트가 존재하는지 확인해야 했다. 예를 들어 나는 사용자가 로그인 했을 때만 사용자가 명시한 내용을 보여주고 싶었다. 사용자가 로그인 했다면 렌더링된 페이지에 div{id='user-box'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

1.if ($('user-box')!=null) {
2.    // jQuery에서는 이 if 블럭이 필요없다.
3.    $("user-box").style.backgroundColor = "red";
4.}


   6. Aids development process
     jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있고 Prototype 라이브러리를 몰라도 된다.

예제들:
  여기에는 jQuery와 프로토타입의 차이점을 강조하는 몇 가지 예제가 있다(물론, 이 코드가 최상의 코드는 아니다).

Example1:
 이 Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

 jQuery의 경우

1.$("div.tabs").hide();
2.$("div#tabs1").show();


    
  Prototype의 경우

1.$$("div.tabs").invoke("hide");  // 이거
2.$$("div.tabs").each(function(x){
3.  Element.hide(x);
4.});
5.// 그리고 다음과 같은 코드로 마무리한다.
6.$("tabs1").show();


Example2:
엘리먼트의 CSS를 수정하는 예제

  jQuery의 경우

1.$("#user-box").css("background-color","red")


  Prototype의 경우    

1.var a = $("user-box");
2.a.style.cssText += "background-color:red;";

Remy Sharp의 발표자료에서 다른 예제들도 볼 수 있다. http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison.

Prototype이 좋은 이유
  1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는  activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다.
  2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
  3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
  4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

결론:
  jQuery와 Prototype은 둘 다 매우 굉장하다. 나는 더 적은 코드로 더 많은 일을 하면서 직관적이고 겸손하게 유지해야 한다는 jQuery의 철학이 큰 차이를 만든다고 생각한다. 그러나 나는 Prototype이 매우 그립다. jquery-rails가 통합되길 기다리고 있다. 결국 이 고지는 점령될 것이다. 나는 사람들이 이 변화를 감지하고 있다는 소식을 들을 때마다 기쁘다.

ps> 이 두 라이브러리를 함께 사용하려면 여기를 보라.


출처 : http://dogfeet.tistory.com/29
Posted by 1010
반응형

html 소스 암호화


Posted by 1010
반응형

<style type="text/css">
*{font-family:돋움,Dotum,AppleGothic,sans-serif;font-size:12px;color:#333;}
body,form,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,fieldset,input,blockquote,th,td{margin:0;padding:0;}
ol,ul,dl{list-style:none;}
a{color:#333;text-decoration:none;}
a:hover,a:hover b,a:hover em,a:hover span{color:#06c;text-decoration:underline;}

/*rolling Button*/
div.rollBtn{position:absolute;z-index:3;}
div.rollBtn a.next{background-position:-22px 0px;cursor:hand;}
div.rollBtn a.previous{margin-right:3px;cursor:hand;}
div.rollBtn a span{display:none;}

#bKey{position:relative;margin-top:9px;width:270px;zoom:1;}
#bKey .keyBg{margin:1px 0 0 0;overflow:hidden;height:18px;}
#bKey ul{clear:both;}
#bKey ul li{float:left;height:18px;}
#bKey ul li.x{background:url(http://simg.paran.com/top_v2.2/top/ic_line06.gif) 100% 0 no-repeat;margin:0 7px 0 0;padding:0 7px 0 0;}
#bKey ul li a{font-weight:bold;color:#FB6A31;letter-spacing:-1px;}
#bKey .rollBtn{left:203px;top:0;}
#bKey .rollBtn .up{margin-right:3px;}
</style>
<script language="JavaScript">
function scrolling(objId,sec1,sec2,speed,height){
  this.objId=objId;
  this.sec1=sec1;
  this.sec2=sec2;
  this.speed=speed;
  this.height=height;
  this.h=0;
  this.div=document.getElementById(this.objId);
  this.htmltxt=this.div.innerHTML;
  this.div.innerHTML=this.htmltxt+this.htmltxt;
  this.div.isover=false;
  this.div.onmouseover=function(){this.isover=true;}
  this.div.onmouseout=function(){this.isover=false;}
  var self=this;
  this.div.scrollTop=0;
  window.setTimeout(function(){self.play()},this.sec1);
}
scrolling.prototype={
  play:function(){
    var self=this;
    if(!this.div.isover){
      this.div.scrollTop+=this.speed;
      if(this.div.scrollTop>this.div.scrollHeight/2){
        this.div.scrollTop=0;
      }else{
        this.h+=this.speed;
        if(this.h>=this.height){
          if(this.h>this.height|| this.div.scrollTop%this.height !=0){
            this.div.scrollTop-=this.h%this.height;
          }
          this.h=0;
          window.setTimeout(function(){self.play()},this.sec1);
          return;
        }
      }
    }
    window.setTimeout(function(){self.play()},this.sec2);
  },
  prev:function(){
    if(this.div.scrollTop == 0)
    this.div.scrollTop = this.div.scrollHeight/2;
    this.div.scrollTop -= this.height;
  },
  next:function(){
    if(this.div.scrollTop ==  this.div.scrollHeight/2)
    this.div.scrollTop =0;
    this.div.scrollTop += this.height;
  }
};
</script>
 <BODY>
<div id="bKey">
<div id="jFavList" class="keyBg">
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111063">부시 8월 방한</a></li>
 <li><a href="http://c3.paran.com/?l=P111064">우리 구단 가입금</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111065">진보신당 난입 폭행</a></li>
 <li><a href="http://c3.paran.com/?l=P111066">남규리 대시</a></li>
</ul>

<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111067">미국산 쇠고기 판매</a></li>
 <li><a href="http://c3.paran.com/?l=P111068">조중동 다음</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111069">호나우지뉴 방한</a></li>
 <li><a href="http://c3.paran.com/?l=P111070">김구라 사과</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111071">LPG가격 인상</a></li>
 <li><a href="http://c3.paran.com/?l=P111072">임창용 19세이브</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111073">한전 납품비리</a></li>
 <li><a href="http://c3.paran.com/?l=P111074">유재석 웨딩사진</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111075">채은정 비키니</a></li>

 <li><a href="http://c3.paran.com/?l=P111076">PD수첩 압수영장</a></li>
</ul>
<ul>
 <li class="x"><a href="http://c3.paran.com/?l=P111077">신혼부부 주택</a></li>
 <li><a href="http://c3.paran.com/?l=P111078">사제단 시국미사</a></li>
</ul>
</div>
<script type="text/javascript"> var hotKeyword = new scrolling("jFavList",3000,1,1,18); </script>

<div class="rollBtn" onmouseover="hotKeyword.div.isover=true;" onmouseout="hotKeyword.div.isover=false;">
  <a class="previous" onclick="hotKeyword.prev();" title="위로">[↑]</a>
  <a class="next" onclick="hotKeyword.next();" title="아래로">[↓]</a>
</div>
</div>


출처 : http://www.jakartaproject.com/article/javascripttip/121573854953934

Posted by 1010
반응형

JavaScriptMVC - develop with direction!

JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

Download JavaScriptMVC 2.0 Production (6.2 MB) Watch 2.0 Video

What's Inside?

We've made everything you should be doing as easy as possible.
  • Maintainability via the Model-View-Controller architecture pattern.
  • Application Concatination and Compression via include.
  • Testing via Test.
  • Documentation via include.Doc.
  • Error Reporting via DamnIT.
  • Updates and Dependancy Management via update.
  • Ajax and DOM functionality via jQuery.

The Plan.

  1. Download JavaScriptMVC
  2. Read the Getting Started Guide
  3. Learn the technology
  4. Explore the api

Showcase.

Checkout some of the companies using JavaScriptMVC:
Posted by 1010
반응형

Getting Started with the Closure Compiler Application

The Hello World of the Closure Compiler Application

The Closure Compiler application is a Java command-line utility that compresses, optimizes, and looks for mistakes in your JavaScript. To try out the Closure Compiler application with a simple JavaScript program, follow the steps below.

To work through this exercise you need the Java Runtime Environment version 6.

  1. Download the Closure Compiler package

    Create a working directory called closure-compiler.

    Download the Closure Compiler compiler.jar file and save it in closure-compiler.

  2. Create a JavaScript file

    Create a file named hello.js containing the following JavaScript:

    // A simple function. 
    function hello(longName) { 
      alert('Hello, ' + longName); 
    } 
    hello('New User');

    Save this file in the closure-compiler directory.

  3. Compile the JavaScript file

    Run the following command from the closure-compiler directory:

    java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js
    

    This command creates a new file called hello-compiled.js, which contains the following JavaScript:

    function hello(a){alert("Hello, "+a)}hello("New User");

    Note that the compiler has stripped comments, whitespace and an unnecessary semi-colon. The compiler has also replaced the parameter name longName with the shorter name a. The result is a much smaller JavaScript file.

    To confirm that the compiled JavaScript code still works correctly, include hello-compiled.js in an HTML file like this one:

    <html> 
    <head><title>Hello World</title></head> 
    <body> 
    <script src="hello-compiled.js"></script> 
    </body> 
    </html>

    Load the HTML file in a browser, and you should see a friendly greeting!

Next Steps

This example illustrates only the most simple optimizations performed by the Closure Compiler. To learn more about the compiler's capabilities, read Advanced Compilation and Externs.

To learn more about other flags and options for the Closure Compiler, execute the jar with the --help flag:

java -jar compiler.jar --help
Posted by 1010
반응형

넘기는 url 이 post 방식을때 iis 405 에러가 나온다.
간단하게 method=get 로 변경하면 되지만 열리는 페이지에 쓸모없는 값들이 보인다.
이럴때는 그냥 맘편하게 원도우 오픈을 이용해서 하면 간단히 해결할수있다.

function linkSite(obj) {
 
 var f  = obj; 

 if(f.selSite.value == ""){
  alert("이동할 싸이트를 선택해 주세요.");
        return false;
 }else{ 
  //f.target ="_blank";    
  //f.action = obj.selSite.value;
  window.open(f.selSite.value, "", "width=950, height=650, menubar=yes, toolbar=yes,  location=yes, scrollbars=yes, resizable=yes ");
         //return true;
  return false;
 } 
 

Posted by 1010
반응형
<nobr style="text-overflow:ellipsis;overflow;hidden;width;250px"></nobr>
Posted by 1010
반응형

<html>
<head>
    <title>http://www.blueb.co.kr</title>

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAdV0OihhLfo4ru8N1BXzlWxSJ87f2VNqmObhB7kj4DJwDOGkiiBR3Nh79Pxxmk0DgEb3TTwZHI-Fp1g"></script>
<script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/js/gfeedfetcher.js"></script>
<style type="text/css">
.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1 li{ /*CSS specific to demo 1*/
margin-bottom: 4px;
}

#example2 div{ /*CSS specific to demo 2*/
margin-bottom: 5px;
}

#example2 div a{ /*CSS specific to demo 2*/
text-decoration: none;
}

#example3 a{ /*CSS specific to demo 3*/
color: #D80101;
text-decoration: none;
font-weight: bold;
}

#example3 p{ /*CSS specific to demo 3*/
margin-bottom: 2px;
}

code{ /*CSS for insructions*/
color: red;
}
</style>
</head>
</body>


<b>Example 1: (Single RSS feed, 10 entries, "<code>date</code>" field enabled, sort by <code>title</code>)</b><p>
<a href="javascript:cssfeed.init()"><B>본 항목을 새로고침</B></a><br>
<script type="text/javascript">
var cssfeed=new gfeedfetcher("example1", "example1class", "")
    cssfeed.addFeed("문화일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=021") //RSS주소 및 제목
    cssfeed.displayoptions("date") //날짜 필드 보여주기
    cssfeed.setentrycontainer("li") //정렬은 Li태그로
    cssfeed.filterfeed(10, "title") //목록은 10개
    cssfeed.init() //Always call this last
</script>
<br><br>

<b>Example 2: (Two RSS feeds, 6 entries, "<code>label"</code>, "<code>datetime</code>", and "<code>snippet</code>" fields enabled, sort by <code>label</code>)</b><p>
<a href="javascript:socialfeed.init()"><B>본 항목을 새로고침</B></a><br>
<script type="text/javascript">
var socialfeed=new gfeedfetcher("example2", "example2class", "_new")
    socialfeed.addFeed("동아일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=020") //Specify "label" plus URL to RSS feed
    socialfeed.addFeed("조선일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=023") //Specify "label" plus URL to RSS feed
    socialfeed.displayoptions("label datetime snippet") //show the specified additional fields
    socialfeed.setentrycontainer("div") //Display each entry as a DIV
    socialfeed.filterfeed(6, "label") //Show 6 entries, sort by label
    socialfeed.init() //Always call this last
</script>
<br><br>


<b>Example 3: (Three RSS feeds, 8 entries, "<code>datetime</code>" and "<code>snippet</code>" fields enabled, sort by <code>date</code>)</b><p>
<a href="javascript:newsfeed.init()"><B>본 항목을 새로고침</B></a><br>

<script type="text/javascript">
var newsfeed=new gfeedfetcher("example3", "example3class", "_new")
    newsfeed.addFeed("서울신문", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=081") //Specify "label" plus URL to RSS feed
    newsfeed.addFeed("한겨레", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=028") //Specify "label" plus URL to RSS feed
    newsfeed.addFeed("중앙일보", "http://news.naver.com/rss/rss_presscenter.nhn?office_id=025") //Specify "label" plus URL to RSS feed
    newsfeed.displayoptions("datetime snippet") //show the specified additional fields
    newsfeed.setentrycontainer("p") //Display each entry as a paragraph
    newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date
    newsfeed.init() //Always call this last
</script>


</body>
</html> 

Posted by 1010
반응형

특수문자

ISO Entities

Name Code Number Code Glyph Description
&lsquo;     left single quote
&rsquo;     right single quote
&sbquo;     single low-9 quote
&ldquo;     left double quote
&rdquo;     right double quote
&bdquo;     double low-9 quote
&dagger;     dagger
&Dagger;     double dagger
&permil;     per mill sign
&lsaquo;     single left-pointing angle quote
&rsaquo;     single right-pointing angle quote
&spades;     black spade suit
&clubs;     black club suit
&hearts;     black heart suit
&diams;     black diamond suit
&oline;     overline, = spacing overscore
&larr;     leftward arrow
&uarr;     upward arrow
&rarr;     rightward arrow
&darr;     downward arrow
&trade;     trademark sign
 
Name Code Number Code Glyph Description
  &#09; horizontal tab
  &#10; line feed
  &#32; space
  &#33; !  exclamation mark
&quot; &#34; "  double quotation mark
  &#35; #  number sign
  &#36; $  dollar sign
  &#37; %  percent sign
&amp; &#38; &  ampersand
  &#39; '  apostrophe
  &#40; (  left parenthesis
  &#41; )  right parenthesis
  &#42; *  asterisk
  &#43; +  plus sign
  &#44; ,  comma
  &#45; -  hyphen
  &#46; .  period
 
Name Code Number Code Glyph Description
&frasl; &#47; /  slash
  &#48;-
&#57;
  digits 0-9
  &#58; :  colon
  &#59; ;  semicolon
&lt; &#60; <  less-than sign
  &#61; =  equals sign
&gt; &#62; >  greater-than sign
  &#63; ?  question mark
  &#64; @  at sign
  &#65;-
&#90;
  uppercase letters A-Z
  &#91; [  left square bracket
  &#92; \  backslash
  &#93; ]  right square bracket
  &#94; ^  caret
  &#95; _  horizontal bar (underscore)
  &#96; `  grave accent
  &#97;-
&#122;
  lowercase letters a-z
  &#123; {  left curly brace
  &#124; |  vertical bar
 
Name Code Number Code Glyph Description
  &#125; }  right curly brace
  &#126; ~  tilde
  &#127;-
&#149;
  unused
&ndash; &#150;   en dash
&mdash; &#151;   em dash
  &#152;-
&#159;
  unused
&nbsp; &#160;    nonbreaking space
&iexcl; &#161; ¡  inverted exclamation
&cent; &#162; ¢  cent sign
&pound; &#163; £  pound sterling
&curren; &#164; ¤  general currency sign
&yen; &#165; ¥  yen sign
&brvbar; or &brkbar; &#166; ¦  broken vertical bar
&sect; &#167; §  section sign
&uml; or &die; &#168; ¨  umlaut
&copy; &#169; ©  copyright
&ordf; &#170; ª  feminine ordinal
&laquo; &#171; «  left angle quote
&not; &#172; ¬  not sign
&shy; &#173; ­  soft hyphen
&reg; &#174; ®  registered trademark
&macr; or &hibar; &#175; ¯  macron accent
 
Name Code Number Code Glyph Description
&deg; &#176; °  degree sign
&plusmn; &#177; ±  plus or minus
&sup2; &#178; ²  superscript two
&sup3; &#179; ³  superscript three
&acute; &#180; ´  acute accent
&micro; &#181; µ  micro sign
&para; &#182;   paragraph sign
&middot; &#183; ·  middle dot
&cedil; &#184; ¸  cedilla
&sup1; &#185; ¹  superscript one
&ordm; &#186; º  masculine ordinal
&raquo; &#187; »  right angle quote
&frac14; &#188; ¼  one-fourth
&frac12; &#189; ½  one-half
&frac34; &#190; ¾  three-fourths
&iquest; &#191; ¿  inverted question mark
&Agrave; &#192; À  uppercase A, grave accent
&Aacute; &#193; Á  uppercase A, acute accent
&Acirc; &#194;   uppercase A, circumflex accent
 
Name Code Number Code Glyph Description
&Atilde; &#195; à uppercase A, tilde
&Auml; &#196; Ä  uppercase A, umlaut
&Aring; &#197; Å  uppercase A, ring
&AElig; &#198; Æ  uppercase AE
&Ccedil; &#199; Ç  uppercase C, cedilla
&Egrave; &#200; È  uppercase E, grave accent
&Eacute; &#201; É  uppercase E, acute accent
&Ecirc; &#202; Ê  uppercase E, circumflex accent
&Euml; &#203; Ë  uppercase E, umlaut
&Igrave; &#204; Ì  uppercase I, grave accent
&Iacute; &#205; Í  uppercase I, acute accent
&Icirc; &#206; Π uppercase I, circumflex accent
&Iuml; &#207; Ï  uppercase I, umlaut
&ETH; &#208; Р uppercase Eth, Icelandic
&Ntilde; &#209; Ñ  uppercase N, tilde
&Ograve; &#210; Ò  uppercase O, grave accent
&Oacute; &#211; Ó  uppercase O, acute accent
&Ocirc; &#212; Ô  uppercase O, circumflex accent
&Otilde; &#213; Õ  uppercase O, tilde
 
Name Code Number Code Glyph Description
&Ouml; &#214; Ö  uppercase O, umlaut
&times; &#215; ×  multiplication sign
&Oslash; &#216; Ø  uppercase O, slash
&Ugrave; &#217; Ù  uppercase U, grave accent
&Uacute; &#218; Ú  uppercase U, acute accent
&Ucirc; &#219; Û  uppercase U, circumflex accent
&Uuml; &#220; Ü  uppercase U, umlaut
&Yacute; &#221; Ý  uppercase Y, acute accent
&THORN; &#222; Þ  uppercase THORN, Icelandic
&szlig; &#223; ß  lowercase sharps, German
&agrave; &#224; à  lowercase a, grave accent
&aacute; &#225; á  lowercase a, acute accent
&acirc; &#226; â  lowercase a, circumflex accent
&atilde; &#227; ã  lowercase a, tilde
&auml; &#228; ä  lowercase a, umlaut
&aring; &#229; å  lowercase a, ring
&aelig; &#230; æ  lowercase ae
&ccedil; &#231; ç  lowercase c, cedilla
&egrave; &#232; è  lowercase e, grave accent
 
Name Code Number Code Glyph Description
&eacute; &#233; é  lowercase e, acute accent
&ecirc; &#234; ê  lowercase e, circumflex accent
&euml; &#235; ë  lowercase e, umlaut
&igrave; &#236; ì  lowercase i, grave accent
&iacute; &#237; í  lowercase i, acute accent
&icirc; &#238; î  lowercase i, circumflex accent
&iuml; &#239; ï  lowercase i, umlaut
&eth; &#240; ð  lowercase eth, Icelandic
&ntilde; &#241; ñ  lowercase n, tilde
&ograve; &#242; ò  lowercase o, grave accent
&oacute; &#243; ó  lowercase o, acute accent
&ocirc; &#244; ô  lowercase o, circumflex accent
&otilde; &#245; õ  lowercase o, tilde
&ouml; &#246; ö  lowercase o, umlaut
&divide; &#247; ÷  division sign
&oslash; &#248; ø  lowercase o, slash
&ugrave; &#249; ù  lowercase u, grave accent
&uacute; &#250; ú  lowercase u, acute accent
&ucirc; &#251; û  lowercase u, circumflex accent
 
Name Code Number Code Glyph Description
&uuml; &#252; ü  lowercase u, umlaut
&yacute; &#253; ý  lowercase y, acute accent
&thorn; &#254; þ  lowercase thorn, Icelandic
&yuml; &#255; ÿ  lowercase y, umlaut


From : http://www.webmonkey.com
Posted by 1010
반응형
<br>

<style type="text/css">
.black { COLOR:black; }
.red { COLOR:#FF0000; }
.blue { COLOR:BLUE; }
</style>


<font onMouseOver="this.className='red';" onMouseOut="this.className='black';">바보</font>

<br>

<font onMouseOver="this.className='blue';" onMouseOut="this.className='black';">천재</font>

----------------------------------

<td onMouseOver=bgColor="#999999" onMouseOut=bgColor="#000000" bgcolor="#000000"> 내용 </td>

마우스를 올렸을 때의 색상은 onMouseOver=bgColor="#999999"
마우스를 내렸을 때의 색상은 onMouseOut=bgColor="#000000" bgcolor="#000000"

------------------------------------

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

function setTrColor(obj, color){
        obj.style.backgroundColor=color;
        obj.onmouseout = function(){
                obj.style.backgroundColor=''; //mouseout 시 색상
        }
}
// 뭐...대충 궁여지책으로..ㅋ.ㅋ
//-->
</SCRIPT>

<BODY>
<TABLE width="300" border="1">
<TR onMouseOver="setTrColor(this, '#c0c0c0')" >
        <TD>1</TD>
        <TD>2</TD>
        <TD>3</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>4</TD>
        <TD>5</TD>
        <TD>6</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>7</TD>
        <TD>8</TD>
        <TD>9</TD>
</TR>
<TR onMouseOver="setTrColor(this, '#c0c0c0')">
        <TD>7</TD>
        <TD>8</TD>
        <TD>9</TD>
</TR>

</TABLE>
</BODY>
</HTML>

-------------------------

<td onMouseOver="this.style.backgroundColor='#cccccc'" style="CURSOR: hand" onMouseOut="this.style.backgroundColor=''" bgColor=#e4e4e4> </td>

Posted by 1010
반응형

/** 기준소스 IE 전용
    //spec1
     if(document.all.part[0].checked== true) { 
       document.all.spec1[0].disabled=false;
       document.all.spec1[1].disabled=false;
     }else  { 
       document.all.spec1[0].disabled=true;
       document.all.spec1[1].disabled=true;
     }
 
  //spec2  
      if(document.all.part[1].checked== true) { 
       document.all.spec2[0].disabled=false;
       document.all.spec2[1].disabled=false;
     }else  { 
       document.all.spec2[0].disabled=true;
       document.all.spec2[1].disabled=true;
     }
    
   
   //spec3 
     if(document.all.part[2].checked== true) { 
       document.all.spec3[0].disabled=false;
       document.all.spec3[1].disabled=false;
     }else  { 
       document.all.spec3[0].disabled=true;
       document.all.spec3[1].disabled=true;
     }
    
      //spec4 
     if(document.all.part[3].checked== true) { 
       document.all.spec4[0].disabled=false;
       document.all.spec4[1].disabled=false;
       document.all.spec4[2].disabled=false;
     }else  { 
       document.all.spec4[0].disabled=true;
       document.all.spec4[1].disabled=true;
       document.all.spec4[2].disabled=true;
     }
     
     //spec5
     if(document.all.part[4].checked== true) { 
       document.all.spec5[0].disabled=false;
       document.all.spec5[1].disabled=false;
       document.all.spec5[2].disabled=false;
     }else  { 
       document.all.spec5[0].disabled=true;
       document.all.spec5[1].disabled=true;
       document.all.spec5[2].disabled=true;
     }
    
     //spec6 
     if(document.all.part[5].checked== true) { 
       document.all.spec6[0].disabled=false;
       document.all.spec6[1].disabled=false;
       document.all.spec6[2].disabled=false;
     }else  { 
       document.all.spec6[0].disabled=true;
       document.all.spec6[1].disabled=true;
       document.all.spec6[2].disabled=true;
     }
    
       //spec7
     if(document.all.part[6].checked== true) { 
       document.all.spec7[0].disabled=false;
       document.all.spec7[1].disabled=false;
       document.all.spec7[2].disabled=false;
     }else  { 
       document.all.spec7[0].disabled=true;
       document.all.spec7[1].disabled=true;
       document.all.spec7[2].disabled=true;
     }
   
   //spec8
     if(document.all.part[7].checked== true) { 
       document.all.spec8[0].disabled=false;
       document.all.spec8[1].disabled=false;
     }else  { 
       document.all.spec8[0].disabled=true;
       document.all.spec8[1].disabled=true; 
     }
    
     //spec9
     if(document.all.part[8].checked== true) { 
       document.all.spec9[0].disabled=false;
       document.all.spec9[1].disabled=false;
       document.all.spec9[2].disabled=false;
     }else  { 
       document.all.spec9[0].disabled=true;
       document.all.spec9[1].disabled=true; 
       document.all.spec9[2].disabled=true;
     }
    
     //spec10
     if(document.all.part[9].checked== true) { 
       document.all.spec10[0].disabled=false;
       document.all.spec10[1].disabled=false;
       document.all.spec10[2].disabled=false;
     }else  { 
       document.all.spec10[0].disabled=true;
       document.all.spec10[1].disabled=true;
       document.all.spec10[2].disabled=true;
     }
     */

     // 2009.10.26 (anhanho)
     // 지원분야에 맞는 자격요건 체크
     // IE,EE
     var specList = [2,2,2,3,3,3,3,2,3,3]; // 배열의 값이 자동으로 세팅되도록 바꿔줘야함...
     for (var i = 0; i < document.frmInput.part.length; i++) { 
    for(var x = 0 ; x < specList[i] ; x++){
     if(document.frmInput.part[i].checked == true){ 
      document.getElementsByName('spec'+(i+1))[x].disabled = false;
     }else{
      document.getElementsByName('spec'+(i+1))[x].checked = false; 
      document.getElementsByName('spec'+(i+1))[x].disabled = true; 
     }
       }
     }

Posted by 1010
반응형

<html>
<head>
<script language="javascript">
function setCookie (name, value, expires) {
  document.cookie = name + "=" + escape (value) +
    "; path=/; expires=" + expires.toGMTString();
}

function getCookie(Name) {
  var search = Name + "="
  if (document.cookie.length > 0) { // 쿠키가 설정되어 있다면
    offset = document.cookie.indexOf(search)
    if (offset != -1) { // 쿠키가 존재하면
      offset += search.length
      // set index of beginning of value
      end = document.cookie.indexOf(";", offset)
      // 쿠키 값의 마지막 위치 인덱스 번호 설정
      if (end == -1)
        end = document.cookie.length
      return unescape(document.cookie.substring(offset, end))
    }
  }
  return "";
}
function saveid(form) {
  var expdate = new Date();
  // 기본적으로 30일동안 기억하게 함. 일수를 조절하려면 * 30에서 숫자를 조절하면 됨
  if (form.checksaveid.checked)
    expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 30); // 30일
  else
    expdate.setTime(expdate.getTime() - 1); // 쿠키 삭제조건
  setCookie("saveid", form.id.value, expdate);
}
function getid(form) {
  form.checksaveid.checked = ((form.id.value = getCookie("saveid")) != "");
}
</script>
</head>
<body onLoad="getid(document.mainform)">
<form name=mainform>
아이디 <input type=text name=id>
암호 <input type=password name=pw>
<input type=checkbox name=checksaveid onClick="saveid(this.form)">아이디 기억
</form>
</body>
</html>

Posted by 1010
반응형

아이디 저장 자바스크립트


//----------------------------------------------//
// 홈페이지 로그인 관련 스크립트
//
// 만든넘 : 심재진
//
//----------------------------------------------//

//----------------------------------------------//
// 로그인 버튼 클릭했을때 호출되는 함수
//----------------------------------------------//
function login(){
    document.myform.id.value = document.myform.id.value.split(" ").join("");
    document.myform.password.value = document.myform.password.value.split(" ").join("");
    var id = document.myform.id.value;
    var password = document.myform.password.value;

    var msg = "";
    if(id.length == 0){
        msg +="☞ 사용자 아이디를 입력하세요.\n";
    }
    if(password.length == 0 && msg.length == 0){
        msg +="☞ 사용자 비밀번호를 입력하세요.";
    }
    // 아이디 저장 설정
    if(document.myform.save.checked){
        setCookie("com.ckaist.id", id, null, null);
    }else{
        setCookie("com.ckaist.id", "", null, null);
    }
    if(msg.length > 0){
        alert(msg);
    }else{
        document.myform.target = document.hiddenFrame.name;
        document.myform.submit();
    }
    if(login.arguments.length == 1){
        self.close();
    }
}

//----------------------------------------------//
// 아이디 저장 옵션 관리 함수
//----------------------------------------------//
function load(){
    var id = getCookie("com.ckaist.id");
    if(id != null && id != ""){
        document.myform.id.value = id;
        document.myform.save.checked = true;
        document.myform.password.focus();
    }else{
        document.myform.id.focus();
    }
    // 좌측 메뉴 클릭 정보 삭제
    setCookie("mencode", "0", "/");
    setCookie("topcode", "0", "/");
    setCookie("refcode", "0", "/");
}

//----------------------------------------------//
// 로그아웃 버튼 눌렀을때 호출
//----------------------------------------------//
function logout(){
    document.myform.target = document.hiddenFrame.name;
    document.myform.submit();
}

//----------------------------------------------//
// 패스워드 필드에 타이핑할때 검사
//----------------------------------------------//
function formsubmit(){
    if(event.keyCode == 13)
        login();
}

//----------------------------------------------//
// 쿠키 핸들링 관련 함수들
//----------------------------------------------//
function setCookie (name,value,path,domain,secure) {
   var expires = new Date();
   expires.setMonth(expires.getMonth() + 1)

  document.cookie = name + "=" + escape (value) +
    ((expires) ? "; expires=" + expires.toGMTString() : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie (name) {
 var arg = name + "=";
 var alen = arg.length;
 var clen = document.cookie.length;
 var i = 0;
 while (i < clen) {
     var j = i + alen;
     if (document.cookie.substring(i, j) == arg)
       return getCookieVal (j);
     i = document.cookie.indexOf(" ", i) + 1;
     if (i == 0) break;
 }
 return null;
}

function getCookieVal (offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
    endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
}

/*
 * 우편번호 검색창을 띄우는 함수
 * 인자값 : 우편번호 앞자리 INPUT BOX 이름, 우편번호 뒷자리 INPUT BOX 이름, 주소 INPUT BOX 이름
 */
function findPost(form_name_post1, form_name_post2, form_name_addr){
    var win;
    if(win == null){
        win = window.open("/comm/com_zip/comzip_find.jsp?post1="+form_name_post1+"&post2="+form_name_post2+"&addr="+form_name_addr, "zip_search", "resizable=yes,width=500,height=300,location=no,scrollbars=yes, menubar=no");
    }
    win.focus();
}

/*
 * create by 박범서 , create date : 2001-09-11
 * id/pw 조회
 */
function findIdpw(){
    var win;
    if(win == null){
        win = window.open("/main/idpw.jsp", "idpw_search", "resizable=yes,width=362,height=250,location=no,scrollbars=no, menubar=no");
    }
    win.focus();
}


//----------------------------------------------//
// 이미지 온-오버 관련 스크립트 들
//----------------------------------------------//
function namosw_exchange_src()
{
  str = namosw_exchange_src.arguments[0];
  str = (navigator.appName == 'Netscape') ? 'document.' + str : 'document.all.' + str;
  img = eval(str);
  if (img) {
    if (img.ori_src == null) {
      img.ori_src = img.src;
      img.src     = namosw_exchange_src.arguments[1];
    } else {
      var temp    = img.src;
      img.src     = img.ori_src;
      img.ori_src = temp;
    }
  }
}

function namosw_preload_img()
{
  var img_list = namosw_preload_img.arguments;
  if (document.preloadlist == null)
    document.preloadlist = new Array();
  var top = document.preloadlist.length;
  for (var i=0; i < img_list.length; i++) {
    document.preloadlist[top+i]     = new Image;
    document.preloadlist[top+i].src = img_list[i];
  }
}

function msg_open_win()
{
 window.open('/common/com_msg/commsg_main.jsp',"memo",'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=auto,resizable=no,width=420,height=380');
}


//----------------------------------------------//
// ID/PWD 찾기 호출되는 함수
//----------------------------------------------//
function find_idpassword(){
    //document.myform.usrname.value = document.myform.usrname.value.split(" ").join("");
    document.myform.jumin.value = document.myform.jumin.value.split(" ").join("");
    var usrname = document.myform.usrname.value;
    var jumin = document.myform.jumin.value;

    var msg = "";
    if(usrname.length == 0){
        msg +="☞ 사용자 이름을 입력하세요.\n";
    }
    if(jumin.length != 14 && msg.length == 0){
        msg +="☞ 사용자 주민등록번호를 입력하세요.";
    }
    if(msg.length > 0){
        alert(msg);
    } else {
        //document.myform.target = document.hiddenFrame.name;
        document.myform.submit();
    }
}

//----------------------------------------------//
// ID/PWD 찾기  주민번호 필드에 타이핑할때 검사
//----------------------------------------------//
function entercheck(){
    if(event.keyCode == 13)
        find_idpassword();
}

출처 : http://hob.springnote.com/pages/234918?print=1

Posted by 1010
반응형
style="background-repeat:no-repeat;

-------------

  이번 강좌에서는 컬러와 관련된 스타일 시트에 대해서 알아보도록 하겠습니다. 컬러와 관련된 스타일 시트 속성으로는  color , background-color , background-image , background-repeat , background-attachment , background-position , background 등이 있습니다. 모두 다  색상, 배경색과 배경이미지에 대한 것들인데요....그렇게 어려운 것은 없을 테니 설명 잘 들으시기 바라겠습니다. ^^
 
 ☞ color , background-color
  말 그대로 색상과 배경색을 지정해주는 속성입니다. 사용방법은 아래와 같습니다.
 

 body { color:red; background-color:#FFFFF; }

 더 이상 설명이 필요 없겠죠? ^^ 아...그리고 색상을 지정해줄 때  위에 예제에서와 같이 두 가지 방법이 있는데요..첫째는 영문색상명(red , blud , yellow , black ...등등)을 적어주는 것이고 두 번째는 RGB색상코드를 적어주는 방법입니다. RGB색상코드에 대해서 알고싶으신 분은 ☞여기를 클릭해보시면 알 수 있습니다.   간단한 예제 하나 보고 넘어가도록 하죠 ^^

 <style type="text/css">
 <!--
  body { color : darkblue ; background-color : #CC99FF ; font-weight:bold; }
  -->
 </style>
 <body>
  <p>내가 당신을 얼마만큼 사랑하는지 당신은 알지 못합니다.
이른 아침, 감은 눈을 억지스레 떠야하는 피곤한 마음 속에도
나른함 속에 파묻힌 체 허덕이는 오후의 앳된 심정속에도
당신의 그 사랑스러운 모습은 담겨 있습니다.  </p>
 </body>

 ☞ background-image , background-repeat  background-image 속성은 말 안 해도 알고 계시겠죠? ^^ 그쵸. 배경이미지를 지정해주는 속성이죠. background-repeat 속성은, 일반적으로 우리가 HTML를 사용해서 배경이미지를 넣으면 웹페이지의 화면보다 배경이미지가 작은 경우 배경이미지가 화면에 좌우로 반복이 되어서 채워지게 됩니다. 이걸 전문용어로 패턴이라고 하는데요..이러한 패턴을 조절해주는 속성입니다. 조절하기에 따라 한 방향으로만 패턴 되도록 하게 할 수 도 있으며 아예 패턴없이 표현할 수도 있습니다.
 background-image 속성의 사용방법은 다음과 같습니다.

b { background-image: url(http://tagmania.net/img/filter1.gif) ;}

 background-repeat 속성은 네가지의 값을 정해줄 수 있는데요.....다음과 같습니다.

 no-repeat : 배경이미지가 반복이 안되게 합니다.  repeat : 모든 방향으로 반복되게 합니다.
 repeat-x : x방향(가로)으로만 반복되게 합니다.  repeat-y : y방향(세로)으로만 반복되게 합니다.

 즉 , background-repeat : repeat-x ☜이런 식으로 값을 넣어줄 수 있습니다.
  지면 관계상 예제는 다음페이지에서 보도록 하겠습니다. 넘어 가죠? ^^


출처 : http://tagmania.net/html/css5_1_n.php

Posted by 1010
반응형
Posted by 1010
반응형
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>테스트</title>
<meta http-equiv="imagetoolbar" content="no">
</head>
<frameset rows="*">
<frame name="index" src="/test/test.html" title="테스트">
</frameset>
<noframes>
<body oncontextmenu=return false ondragstart=return false onselectstart=return false></body>
</noframes>
</html>

IE6에서 위의 소스는 가로스크롤이 생겨버린다. 하지만 아래와 같이 하면 스크롤이 없어져 버린다.
차이점은 바로 scrolling="yes" 이것만 넣어주면 가로스크롤이 없어진다.
인터넷에서 찾아보면 다른방법도 몇가지 나오지만 아래방법이 가장 손쉽게 해결되는 솔루션임.
하지만 또 언제 무슨문제가 생길지는 모른다는거.. ^^

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>테스트</title>
<meta http-equiv="imagetoolbar" content="no">
</head>
<frameset rows="*">
<frame name="index" src="/test/test.html" title="테스트" scrolling="yes">
</frameset>
<noframes>
<body oncontextmenu=return false ondragstart=return false onselectstart=return false></body>


출처 : http://haroc.haroc.net/tc/311


--------------------------------------------

div 가운데 정렬

{margin:0 auto;}를 사용해서 센터정렬시켰는데요


ie6에서는 세로 스크롤이 생기면


세로스크롤만큼의 가로스크롤이 생겨버리는데


가로스크롤이 나오지 않게 하려면 어떻게 해야할까요?




소스입니다...

----- 프레임셋 -----


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="0,*" border="0" framespacing="0">
  <frame name="topFrame" noresize scrolling="no" marginwidth="0" marginheight="0" frameborder="0">
  <frame name="mainFrame" src="main.php" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0">
</frameset>
</html>


-----  main.php  -----


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>title</title>

<style>

#dvWrap { margin:0 auto; width:920px;}

</style>
</head>

<body>
<div id="dvWrap">

세로스크롤이 생기면 가로스크롤이 생겨요

</div>

</body>

</html>


#dvWrap { position:absolute; left:50%; margin-left:-460px;}
margin:0 auto 대신 이렇게 써주니까 가로스크롤이 안생기네요..


세로 스크롤바가 생기면서 스크롤바의 크기만큼 영역을 차지해서 본문이 넘친다고 생각해서 가로스크롤바가 생겨나는 것 같습니다. overflow-x: hidden; 으로 하시거나 본문의 사이즈를 조금 더 늘려보세요.


overflow-x:hidden을 해보았지만 적용이 되지 않네요 IE버그라고 하는데 해결방법이 없는건지









<body style="text-align:center;">
<div sytle="width:200px;height:200px;border:1px solid red;">
</body>

와 같이 div를 center로 위치 시키면 span같은
text-level box는 가운데로 오는데, div 가운데로 오지 않는군요.

일반적으로 FF 에서는 어떤 방법으로 div를 centering을 하는지 알고 싶습니다.

물론 table속에 div를 넣는 방법은 말고 말입니다.

고견을 들려 주세요...


가운데 정렬은

코드:
body { text-align:center;}

// 먼저 전체 바디에 가운데 정렬을 줍니다.

전체 레이아웃을 시작하는 div가

코드:
<div id="wrap">

이라면

코드:
#wrap {margin:0 auto; text-align:left;}

// 텍스트는 좌측 정렬로 주고요. margin:0 auto; 이것이 가운데 정렬을 하란 말이 되겠습니다.

margin:top right bottom left; // 이런건 아시죠?
margin: 5px 5px 5px 5px; // 1번
margin:5px; // 2번
1번 = 2번
margin:5px 0 5px 0; // 3번 : 0일땐 단위를 쓰지 않고, 그 이상일 때는 단위를 씁니다.
margin:5px 0; // 4번
3번=4번

이런 식이니
margin:0 auto; 는 margin : 0 auto 0 auto; 와 같은 뜻이 되겠습니당.^^


Posted by 1010
반응형
Posted by 1010
반응형

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <SCRIPT LANGUAGE="JavaScript">
  <!--
 var sayHi = new Function("to","alert('hi'+to);");

 function test(imsi){
  sayHi(imsi);
 }
  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
  <input type="button" value="123" onClick="test('바보');"/>
 

 </BODY>
</HTML>

Posted by 1010
반응형

출처 : http://okjsp.pe.kr/seq/138831

prototype.js를 보다가 유용한 기능이 있어서 글을 올립니다.

보통 자바스크립트로 아래와 같은 코드를 사용할 일이 종종있는데요.

//----------------------------------------

    var str = "히히";
    if (str == "하하" || str == "호호" || str == "후후" || str == "히히" ||  str == "헤헤") {
        alert("기존 방식!");
    }


//----------------------------------------

위의 코드를 아래처럼 줄일 수 있습니다.

//----------------------------------------

    var str = "히히";
    if (["하하", "호호", "후후", "히히", "헤헤"].include(str)) {
        alert("include 사용시!");
    }

//----------------------------------------


아래 함수를 공통.js 같은곳에 넣으셔서 사용하시면 됩니다.


<script>

    Array.prototype.include = function () {
        for (var index in this) {
            if (this[index] == arguments[0]) {
                return true;
            }
        }
        return false;
    }

</script>


예제코딩된 html 첨부합니다.

감사합니다.

Posted by 1010
반응형
 jQuery  mootools 충돌 해결

마지막으로 기억할 사항은 jQuery나 다른 자바스크립트 라이브러리를 사용할 때, 서로 어울려 동작하지 않을 경우가 있다는 사실이다. 다시 말해, 라이브러리 두 개 이상을 사용할 경우, 라이브러리 둘 이상에서 변수 "$"를 사용한다면 엔진은 어떤 라이브러리가 "$" 호출을 참조해야 할지 모르는 사태가 벌어진다. 이런 현상을 설명하는 완벽한 예제는 protyotype.js에 내장된 CakePHP 라이브러리다. 이런 라이브러리를 사용하는 페이지에서 수정없이 jQuery를 호출하려고 시도하면 오류가 발생한다. 이런 문제를 해결하기 위해 jQuery는 "$" 변수를 다른 변수로 사상하는 방법을 제공한다. 다음 예를 살펴보자.


Listing 4. jQuery 충돌 해결
j$ = jQuery.noConflict();
j$("div").addClass("a");


-------실무예제--------

j$ = jQuery.noConflict();
//j$("div").addClass("a");

// �α�
function inFocus(i) {
 (i).style.background='none';
}
function outFocus(i) {
}
// Jquery GNB
 j$(function() {
  j$("#inquiry").tabs();
  j$("#counsel").tabs();
 });

Posted by 1010
반응형

그냥 간단하게 휴대폰 번호 검증하는 스크립트 하나 올려봅니다.

정규식을 너무 않쓰고 있는거 같아서...


// 휴대폰번호를 입력시 올바른 휴대폰 번호인지 체크 
  if(f.hphone1.value != "") {
   var rgEx = /(01[016789])[-](\d{4}|\d{3})[-]\d{4}$/g; 
   var strValue = f.hphone1.value+"-"+f.hphone2.value+"-"+f.hphone3.value;
   var chkFlg = rgEx.test(strValue);  
   if(!chkFlg){
    alert("올바른 휴대폰번호가 아닙니다.");
    f.uuser.focus();
    return false;
   }
  }
 

var rgEx = /[01](0|1|6|7|8|9)[-](\d{4}|\d{3})[-]\d{4}$/g;

굳이 풀이 하자면 [01] <- 01로 시작하고
 (0|1|6|7|8|9) <- 0 이거나 1이거나....
[-] <- - (하이폰)이고
(\d{4}|\d{3}) <- \d(숫자로 시작하는 자리수가 {4} 4자리이거나 3자리 이고
[-] < -(하이폰) 이고
\d{4} <- 숫자로 시작하는 자릿수가 4자리이여야 한다.


나머지는 뭐 설명할 필요 없겠죠....


 // 휴대폰번호 입력시 올바른 휴대폰 번호인지 체크  
  if(f.hphone1.value != "" || f.hphone2.value != "" || f.hphone3.value != "") {
   var rgEx = /[01](0|1|6|7|8|9)[-](\d{4}|\d{3})[-]\d{4}$/g; 
   var strValue = f.hphone1.value+"-"+f.hphone2.value+"-"+f.hphone3.value;
   var chkFlg = rgEx.test(strValue);   
   alert(chkFlg);
   if(!chkFlg){
    alert("올바른 휴대폰번호가 아닙니다.");
    f.hphone1.focus(); 
    return false;
   }
  }


Posted by 1010
반응형
<a href="javascript:window.external.AddFavorite('http://www.myeclipseide.com', 'J2EE IDE homepage')">Add to Favorites</a>
Posted by 1010
반응형
출처 : http://www.spoork.net/153

document.all 을 쓰지 맙시다!
document.all 을 안쓰는 것 많으로도 표준을 따르는 웹 페이지 디자인에 매우 큰 걸음을 내 딛는 것입니다.
단지 저 document.all 때문에 다른 안되는 홈페이지가 부지기수 입니다.
요즘에는 FireFox가 어쩔수 없이 지원해서 되긴합니다만, 그렇다고 그게 좋다는 것을 의미하지는 않습니다. FireFox 1.0 은 document.all 을 지원하긴 하지만 if 문으로 체크하면 지원하지 않는다고 표시합니다.
다음은 한국모질라 포럼에 올라온 글입니다.

<< 내용숨기기 >>



http://forums.mozilla.or.kr/viewtopic.php?t=580&highlight=document.all

웹사이트에서 버튼이 동작 되지 않는 경우 대부분 Javascript의 객체를 MSDOM에서 사용하는 document.all을 사용하기 때문에 그렇습니다. 자바스크립트 디버거를 통해 소스를 보았을 때 document.all 이 들어 있는 경우 document.all 대신 W3C DOM의 오브젝트 판별법을 사용하도록 웹사이트 관리자에게 알려주셔야 합니다.

document.all[objectID] -> document.getElementById("objectID")

혹시 거기에서 MS IE4 때문에 getElementById를 쓸 수 없다고 하면 getObject()를 아래처럼 정의한 후에 쓸 수 있다고 알려 주십시오.

function getObject(objectId) {
// checkW3C DOM, then MSIE 4, then NN 4.
//
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
}
else if (document.all && document.all(objectId)) {
return document.all(objectId);
}
else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}

즉, 다음처럼 하면 됩니다.

getObject('sendbn').style.visibility="hidden";

getObject는 http://www.orient-express.com/js/layers.inc 에 있습니다.

혹은 다음에 있는 'x library'를 쓰는 것도 좋은 방법입니다. http://www.cross-browser.com
Posted by 1010
반응형

출처 : http://blog.daum.net/computercode/8281294

자바스크립트로 location.href 로 이동해야 하는 경우가 있는데 이때 새창을 띄워서 쓰는 방법이 필요한 경우가 있다. 그냥 프레임이나 브라우저 창간의 계층구조인 경우에는

opener.location!.href = "http://...";

혹은

frame1.location!.href = "http://...";

이런 방법으로 사용하면 된다.
이런것도 아니고 무조건 새창을 열고 띄우는 경우는 다음과 같다.

var openNewWindow = window.open("about:blank");
openNewWindow.
location.href = "http://...";


Posted by 1010
반응형

-----------test.jsp---------------------

<form name="frmHidden" method="post" action="counselingfaq_list.jsp">
 <input type="hidden" name="seq" value="<%=Seq%>">
 <input type="hidden" name="pageNo" value="<%=pageNo%>">
 <input type="hidden" name="pageVol" value="<%=pageVol%>">
</form>


<script>
alert('정상적으로 삭제  되었습니다.');
document.frmHidden.submit();
</script>


----------------------------------


test.jsp 페이지가 EE에서는 잘 이동하는데 FF 에서는 안먹는다...

페이지에 구조가 만들어 지지 않아서 스크립트가 제대로 동작 하지 못한다.

다시 한번 웹표준을....맞춰야 겠다는 생각이 든다.

<html>

<head></head>

<body>

</body>

</html>

 

Posted by 1010
반응형
파이어폭스에서 javascript 시 this.value 가 않먹을때

onClick ="search(this.value)";

로 하면 EF 에서는 잘 먹는데 FF 에서는 잘 먹지 않는데..

this.value 는 document.all 로 찾는다

document.all 는 ms dom api 이기 때문에 FF에서는 지원하지 않고 표준도 아니기 때문에...

document.getElementsByName 형식으로 찾아줘야 함.

글구 return false 도 써주삼... 이미지 형식에 onClick 이벤트를 줄때..


 onclick="search(document.getElementsByName('sWord').item(0).value,1);return false;"

Posted by 1010
반응형
출처 : http://www.imgwizard.com/?mid=tip&category=361&page=1&document_srl=369

<HTML>
<HEAD>
<Title>테이블에 스크롤바 생성하기</Title>

<style type="text/css">
<!--
body,td {font-family:"굴림"; font-size: 9pt}
#scrollbox {width:400; height:100; overflow:auto; padding:10px; border:1; border-style:solid; border-color:black}
-->
</style>

</HEAD>

<BODY BGCOLOR="#FFFFFF">
<table width=400 height=100 border="0" cellspacing="0" cellpadding="0">
<tr>
  <td>
  <DIV id="scrollbox">
  <b>이수영 -천년이라도</b><p>
      하루종일 난 그대위해 기도했어요.<br>
      마음이 너무 아파할것같아<br>
      아무일도 아닌걸요 힘들어 말아요<br>
      시간이 조금 필요할 뿐이죠<br>
      누구도 그댈 대신할수는 없지만<br>
      이젠 추억으로 만족하겠죠<br>
      조금 걱정이 되네요<br>
      그대가 없는 나의 삷이란건 생각조차<br>
      해본적 없으니까<br>
      그대가 가면 나는 여기에<br>
      천년이라도 기다릴게요<br>
      살다가 한번 생각이나면<br>
      힘들어말고 찾아오세요<br>
      한번도 그대를 원망하지 않아요<br>
      그대에겐 부족한 나였으니<br>
      부디 멀리나마 행복하기를 바래요<br>
      이제다시는 볼수 없을테니..<br>
  </DIV>
  </td>
</tr>
</table>
</BODY>
</HTML>


===========
☞ div 태그에 id를 줘서 스타일시트를 적용해도되고, div 태그내에 직접 <DIV style="..."> 써줘도 되고...
☞ 넷스케이프에서 스크롤은 적용 안되지만 내용은 보임
☞ overflow=auto    : 내용길이에따라 스크롤바 생김
☞ overflow=scroll  : 무조건 스크롤바 생김
Posted by 1010
반응형

출처 : http://www.hof.pe.kr/wp/archives/322/

좀 괜찮은 팁. 전송버튼 두번클릭 방지.

글내용작성하고 전송버튼 누를때 수전증 또는 머리와 따로 노는 손가락때문에 타닥~ 두번 클릭이 되는 수가 있습니다. 또는 전송버튼 누르고 전송 완료페이지로 넘어갈때 시간이 걸릴때 "혹시 안눌렀나?" 하고 또한번 누르는 수가 있는데… 이것을 방지하기 위한 팁~~ (특히 설치형 블로그중에 코멘트삭제기능이 없는 경우에 적용하면 대략 괜찮음)

(누르면 없어집니다. 가만히 기다려도 안나옵니다.-_-)
소스 : <input type="submit" onClick="this.style.visibility='hidden'" value="눌러요~ 잇힝!" /> (누르면 비활성화 되어 다시 누를수 없게 됩니다.)
소스 : <input type=submit onclick="this.disabled=true" value="이것도 눌러요~ 잇힝!">
Posted by 1010