BLOG ARTICLE WEB/Javascript | 19 ARTICLE FOUND

  1. 2009.05.21 javascript: escape(), encodeURI(), encodeURIComponent() 비교
  2. 2009.01.13 정규식의 Escape 문자 문제 해결법
  3. 2008.11.25 화면스크롤 없는 자바스크립트 실행 버튼 만들기 4
  4. 2008.11.14 onkeydown vs onkeypress
  5. 2008.10.20 자바스크립트 인수를 가진 이벤트 등록법
  6. 2008.10.20 (펌)Javascript로 이벤트 처리하기
  7. 2008.10.20 (펌)JavaScript의 이벤트 핸들러 등록 방법에 따른 차이점 255, 102, 0
  8. 2008.10.06 자바스크립트를 통한 테이블의 셀 접근법 1
  9. 2007.11.09 자바스크립트 모음
  10. 2007.11.09 HTMLElement 객체의 프로퍼티 (DOM)
  11. 2007.11.09 그간의 내용정리
  12. 2007.03.19 자바스크립트 정규식
  13. 2006.09.17 즉석 HTML 에디터 / 폰트 확인프로그램 / 블로그홈
  14. 2006.09.11 CSS정리
  15. 2006.09.07 IE계층도

javascript: escape(), encodeURI(), encodeURIComponent() 비교

WEB/Javascript 2009. 5. 21. 17:03

javascript의 escape(), encodeURI(), encodeURIComponent()함수들에 대해서,
어느 문자가 인코딩 되고,어느문자가 인코딩되지 않는지, 알아보기 힘들기 때문에 정리해둠.

우선은 대상의 범위는 %20(공백문자)부터 %7E(~)까지

원 데이터 

 !"#$%&'()*+,-./
0123456789
:;<=>?@
ABCDEFGHIJKLMNOPQRSTUVWXYZ
[\]^_`
abcdefghijklmnopqrstuvwxyz
{|}~

escape() 

%20%21%22%23%24%25%26%27%28%29*+%2C-./
0123456789
%3A%3B%3C%3D%3E%3F@
ABCDEFGHIJKLMNOPQRSTUVWXYZ
%5B%5C%5D%5E_%60
abcdefghijklmnopqrstuvwxyz
%7B%7C%7D%7E%7F

encodeURI() 

%20!%22#$%25&'()*+,-./
0123456789
:;%3C=%3E?@
ABCDEFGHIJKLMNOPQRSTUVWXYZ
%5B%5C%5D%5E_%60
abcdefghijklmnopqrstuvwxyz
%7B%7C%7D~%7F

encodeURIComponent() 

%20!%22%23%24%25%26'()*%2B%2C-.%2F
0123456789
%3A%3B%3C%3D%3E%3F%40
ABCDEFGHIJKLMNOPQRSTUVWXYZ
%5B%5C%5D%5E_%60
abcdefghijklmnopqrstuvwxyz
%7B%7C%7D~%7F

정리

  • 모든 함수가[0-9A-Za-z]는 변환하지 않음.
  • escape()가 변환하지 않는 기호는 *+-./@_ 임.
  • encodeURI()가 변환하지 않는 기호는 !#$'()*+,-./:;=?@_~ 임.
  • encodeURIComponent()가 변환하지 않는 기호는 !'()*-._~ 임.
  • 다중 바이트나 코드에 대해서는, 예를들면 UTF-8의 「あ」는 escape()의 경우 %u3042, encodeURL() 및 encodeURIComponent()의 경우 %E3%81%82 임.

덤.
변환 툴1

source :
escape() :
encodeURI() :
encodeURIComponent() :

변환 툴2 

input :
output :
decode by :
출처 : http://groundwalker.com/blog/2007/02/javascript_escape_encodeuri_encodeuricomponent_.html
AND

정규식의 Escape 문자 문제 해결법

WEB/Javascript 2009. 1. 13. 12:01
문자열을 입력받아서 필터링하는데 있어 걸림돌이 되는 녀석

그건 바로

Escape Charater다.

.*+?|()[]{}\ 를 일컫는데

요 며칠 뒤비다 줃은 함수.. 

  1. RegExp.escape = function(str)
  2. {
  3.   var specials = new RegExp("[.*+?|()\\[\\]{}\\\\]", "g"); // .*+?|()[]{}\
  4.   return str.replace(specials, "\\$&");
  5. }
귀찮으니 그냥 쓰자 ㅋㅋ

출처 : http://snipplr.com/view/9649/escape-regular-expression-characters-in-string/
AND

화면스크롤 없는 자바스크립트 실행 버튼 만들기

WEB/Javascript 2008. 11. 25. 09:38
지난번에 봐둔걸 까먹고 또 검색을 한고로..
아무래도 등록해놔야할듯해서 적어봄..

나는 평소에 이렇게 만들어 썼었다.
<span style="cursor:pointer;" onclick="anyFuntion();">link</span>
다만 태그의 본연의 기능이 아니기에 표준을 준수하기 위해 검색 시작..

이넘이 일반적인 링크..
<a href="#" onclick="anyFuntion();">link</a>
이렇게 쓰면 화면 전환 직전에 화면 최상단까지 스크롤 된후 페이지가 이동된다.

<a href="javascript: return false;" onclick="anyFuntion();">link</a>
이게 맞는줄 알았는데 에러가 발생..

그래서 찾아낸 두녀석.. 둘다 스크롤없이 anyFunction()을 실행함
<a href="javascript;" onclick="anyFuntion();">link</a>
<a href="javascript:void(0);" onclick="anyFuntion();">link</a>

에효 휘발성 메모리를 가진 죄로 글이 늘어가는군..
AND

onkeydown vs onkeypress

WEB/Javascript 2008. 11. 14. 17:35

IE6에선 별반 차이 없어보이는 이 두녀석..
브라우저별로 동작이 아주 약간 다르다..
event가 끼었을경우 이야기다.
키가 눌렀을때 인식하는 키값을 알아오는것이
event.keyCode

문젠 Firefox의경우 keypress로 처리해버리면
키값이 설정되기 전에 실행해버리기때문에 키값을 얻을 수 없다.

결국 keydown으로 처리


그외에 필요없는 키 입력을 필터링 해버리는 작업을 했다.
아래의 필터제외 대상은 키보드의 숫자. 키패드의 숫자 및 기본적 조작키

키입력 이벤트 취소가 IE와 FF&Chrome의 처리법이 다르므로 분기 작성..

function onlyNumber(evt)
{
    if ((evt.keyCode<8)||((evt.keyCode>9)&&(evt.keyCode<35))||((evt.keyCode>57)&&(evt.keyCode<96))||(evt.keyCode>105))
    {
        if(navigator.appName == "Microsoft Internet Explorer")
        {
            evt.returnValue = false;
            evt.cancelBubble = true;
        }
        if(evt.preventDefault)
        {
            evt.preventDefault();
            evt.stopPropagation();
        }
    }
}

아래는 event.keyCode의 값들이다.

Key code Value
DOM_VK_CANCEL 3
DOM_VK_HELP 6
DOM_VK_BACK_SPACE 8
DOM_VK_TAB 9
DOM_VK_CLEAR 12
DOM_VK_RETURN 13
DOM_VK_ENTER 14
DOM_VK_SHIFT 16
DOM_VK_CONTROL 17
DOM_VK_ALT 18
DOM_VK_PAUSE 19
DOM_VK_CAPS_LOCK 20
DOM_VK_ESCAPE 27
DOM_VK_SPACE 32
DOM_VK_PAGE_UP 33
DOM_VK_PAGE_DOWN 34
DOM_VK_END 35
DOM_VK_HOME 36
DOM_VK_LEFT 37
DOM_VK_UP 38
DOM_VK_RIGHT 39
DOM_VK_DOWN 40
DOM_VK_PRINTSCREEN 44
DOM_VK_INSERT 45
DOM_VK_DELETE 46
DOM_VK_0 48
DOM_VK_1 49
DOM_VK_2 50
DOM_VK_3 51
DOM_VK_4 52
DOM_VK_5 53
DOM_VK_6 54
DOM_VK_7 55
DOM_VK_8 56
DOM_VK_9 57
DOM_VK_SEMICOLON 59
DOM_VK_EQUALS 61
DOM_VK_A 65
DOM_VK_B 66
DOM_VK_C 67
DOM_VK_D 68
DOM_VK_E 69
DOM_VK_F 70
DOM_VK_G 71
DOM_VK_H 72
DOM_VK_I 73
DOM_VK_J 74
DOM_VK_K 75
DOM_VK_L 76
DOM_VK_M 77
DOM_VK_N 78
DOM_VK_O 79
DOM_VK_P 80
DOM_VK_Q 81
DOM_VK_R 82
DOM_VK_S 83
DOM_VK_T 84
DOM_VK_U 85
DOM_VK_V 86
DOM_VK_W 87
DOM_VK_X 88
DOM_VK_Y 89
DOM_VK_Z 90
DOM_VK_CONTEXT_MENU 93
DOM_VK_NUMPAD0 96
DOM_VK_NUMPAD1 97
DOM_VK_NUMPAD2 98
DOM_VK_NUMPAD3 99
DOM_VK_NUMPAD4 100
DOM_VK_NUMPAD5 101
DOM_VK_NUMPAD6 102
DOM_VK_NUMPAD7 103
DOM_VK_NUMPAD8 104
DOM_VK_NUMPAD9 105
DOM_VK_MULTIPLY 106
DOM_VK_ADD 107
DOM_VK_SEPARATOR 108
DOM_VK_SUBTRACT 109
DOM_VK_DECIMAL 110
DOM_VK_DIVIDE 111
DOM_VK_F1 112
DOM_VK_F2 113
DOM_VK_F3 114
DOM_VK_F4 115
DOM_VK_F5 116
DOM_VK_F6 117
DOM_VK_F7 118
DOM_VK_F8 119
DOM_VK_F9 120
DOM_VK_F10 121
DOM_VK_F11 122
DOM_VK_F12 123
DOM_VK_F13 124
DOM_VK_F14 125
DOM_VK_F15 126
DOM_VK_F16 127
DOM_VK_F17 128
DOM_VK_F18 129
DOM_VK_F19 130
DOM_VK_F20 131
DOM_VK_F21 132
DOM_VK_F22 133
DOM_VK_F23 134
DOM_VK_F24 135
DOM_VK_NUM_LOCK 144
DOM_VK_SCROLL_LOCK 145
DOM_VK_COMMA 188
DOM_VK_PERIOD 190
DOM_VK_SLASH 191
DOM_VK_BACK_QUOTE 192
DOM_VK_OPEN_BRACKET 219
DOM_VK_BACK_SLASH 220
DOM_VK_CLOSE_BRACKET 221
DOM_VK_QUOTE 222
DOM_VK_META 224

참고 사이트 : http://blog.naver.com/xtype/10014440515 ,

AND

자바스크립트 인수를 가진 이벤트 등록법

WEB/Javascript 2008. 10. 20. 13:54

t,.찾아본결과 자바스크립트 이벤트중 인수를 가진 메소드를 등록하는 방법은

고전적인 방법으로 태그에 삽입하는법과
동적으로 메소드로 치환하여 할당하는 법

두가지가 있다.  는 결론..

전자는 생략

후자

[element].addEventListener("click", function() { [methodName]([arg0],[arg1],...); }, false);     //NS

[element].attachEvent("onclick", function() { [methodName]([arg0],[arg1],...); });                  //IE

[element].onclick = [methodName];                                                                                   //All?

^^

AND

(펌)Javascript로 이벤트 처리하기

WEB/Javascript 2008. 10. 20. 10:17

Q. Button의 onclick 이벤트 발생 시,

     onclick_button() 이라는 이벤트 핸들러가 수행되도록 설정하려면 어떻게 해야할까?

    : 객체의 이벤트리스너에 이벤트핸들러를 등록한다.

        * 이벤트 핸들러 == 이벤트 처리기, 이벤트 발생 시 수행되는 함수

        * 이벤트 리스너 == 이벤트 발생 인지기, 이벤트 발생을 인지하고, 수행할 함수들을 알고 있다.

 

1,2번은 간편하게 사용되는 등록방법이고,

3번에서 제시되는 등록방법과 삭제방법을 모두 사용하면 이벤트 처리과정을 상세하게 다룰 수 있다.

 

1. HTML 태그에서 등록

형    식

사  용  예

 event = "eventHandler()"  <input type="button" onclick="onclick_button()">

  * 이벤트핸들러에 ""와 ()를 꼭 사용

 

2. javascript에서 등록

형    식

사  용  예

 object.event = eventHandler;

 var btn = document.getElementById("btn");

 btn.onclick = onclick_button;

    * 괄호를 쓰지 않기 때문에 괄호 안에 파라미터들을 넣을 수 없다.

 

3. 이벤트 리스너에 등록 / 삭제 (이벤트에 ""를 사용)

  3.1 등록

        case #1. -  InternetExplorer (이하 IE) 

형    식

사  용  예

 obj.attachEvent("event", eventHandler)

 var btn = document.getElementById("btn"); 

 btn.attachEvent("onclick", onclick_button);

 

 

 

       case #2. -  FireFox 및 기타 브라우저 (이하 FF)

형    식

사  용  예

 obj.addEventListener("event", eventHandler, bool)

 var btn = document.getElementById("btn"); 

 btn.addEventListener("click", onclick_button, false);

   

 

 

 

        * "event" 이름 앞의 on 빠지는 것에 주의 (IE: onclick <--> FF: click)

        * bool: capture 여부

           자세한 사항은 W3C의 HTML 이벤트처리 권고안 또는 이벤트 처리 상세내용(DOM 레벨1) 참고

 

       case #3. - 크로스 브라우저 (IE, FF 등 모든 브라우저에서 사용할 수 있도록)

형    식

사  용  예

 각 브라우저가 제공하는 이벤트리스너를 확인 

 if (obj.attachListener) {                    // IE

  obj.attachEvent("event", eventHandler);

 } else if (obj.addEventListener) {      // FF

  obj.addEventListener("event", eventHandler, bool);

 }

 var btn = document.getElementById("btn");  

 if (btn.attachListener) {                    // IE

  btn.attachEvent("onclick", onclick_button);

 } else if (btn.addEventListener) {      // FF

  btn.addEventListener("click", onclick_button, false);

 }

 

 

 

 

 

 

 

 

         *  IE 7.0 이상에서는 if (window.ActiveXObject)를 사용하여 IE 브라우저임을 확인 (XMLHttpRequest 참조)

 

  3.2 삭제 (3.1 case #3.에 대응) 

형    식

사  용  예

  각 브라우저가 제공하는 이벤트리스너를 확인

 

 if (obj.attachListener) {                    // IE

  obj.detachEvent("event", eventHandler);

 } else if (obj.addEventListener) {      // FF

  obj.removeEventListener("event", eventHandler, bool);

 }

 var btn = document.getElementById("btn"); 

 

 if (btn.attachListener) {                    // IE

  btn.detachEvent("onclick", onclick_button);

 } else if (btn.addEventListener) {      // FF

  btn.removeEventListener("click", onclick_button, false);

 }

 

 

 

 

 

 

 

 

 

        * detachEvent 및 removeEventListener의 사용 시 인수들의 순서는

           attachEvent 와 addEventListener와 동일하다. (3.1 참조)


<예제> 1. "크기 바꾸는 스타일 적용" 버튼을 누르면, 텍스트상자의 크기가 변하고, <-- changeHeight() 함수 호출

            2. "새 버튼 생성" 버튼을 누르면, 새 버튼이 생성되어 화면에 추가된다. <-- createButton() 함수 호출

            3. "메시지 창 띄우기" 버튼을 누르면, 메시지 창이 화면에 나타난다. <-- alertButton_click() 함수 호출

 

1. HTML 태그에 직접 / 2. javascript에서 직접 / 3. javascript에서 이벤트 리스너에

각각 이벤트 핸들러 함수를 등록하여, 이벤트가 발생했을 때 수행되도록 작성했다.   " " 및 ( ) 표시에 주의!

  
<html>
  <head>
    <title>이벤트 핸들러 테스트 페이지</title>
    <script language="javascript">
 
      function changeHeight()
      {
        var obj = document.getElementById("log");
        if(obj.style.height == "200px") {
          obj.style.height = "100px"; 
        } else {
          obj.style.height = "200px";
        }
        obj.value += "변경된 크기: " + obj.style.height + "\n";
      }
 
      function load()
      {
        var obj = document.getElementById("log");
        obj.value = "HTML 객체들의 개수: " + document.all.length + "\n"; 
        obj.value += "log의 객체 태그이름: " + document.all.log.nodeName + "\n";
        obj.value += "info의 HTML 문자열: " + document.all.info.innerHTML + "\n";
        
        // 2. javascript에서 직접등록 ojb.event = eventHandler;
        var btn = document.getElementById("createBtn");
        btn.onclick=createButton;                     
 
       // 3. javascript에서 이벤트 리스너에 등록
        var al = document.getElementById("alertBtn");
        if (al.attachListener) {                     // IE                  * IE 7.0 이상에서는 (window.ActiveXObject)를 사용
          al.attachEvent("onclick", alertButton_click);
        } else if (al.addEventListener) {      // FF
          al.addEventListener("click", alertButton_click, false);
        }
      } 
     
      function createButton()
      {
        var panel = document.getElementById("myDiv");
        var newObj = document.createElement("INPUT");      
        newObj.type = "button";                                   
        newObj.value = "New Button";
        panel.appendChild(newObj);                               
      }
     
      function alertButton_click()
      {
        alert("메시지 창 띄우기 버튼을 클릭했습니다.");
      }
 
    </script>
  </head>
 
 
  <body onload="load()">
    <h2 id="info">연습해보겠습니다.</h2>

    // 1. HTML 태그에서 직접등록
    <input id="heightBtn" type="button" value="크기 바꾸는 스타일 적용" onclick="changeHeight()"></input>
    // 2. javascript에서 직접등록
    <input id="createBtn" type="button" value="새 버튼 생성"></input>
    // 3. javascript에서 이벤트 리스너에 등록
    <input id="alertBtn" type="button" value="메시지 창 띄우기"></input>
    <br>
    <textarea id="log" style="width:100%; height:200px;"></textarea>
    <br>
    <div id="myDiv"></div>
  </body>
</html>

[출처] Javascript로 이벤트 처리하기|작성자 산도하나
AND

(펌)JavaScript의 이벤트 핸들러 등록 방법에 따른 차이점 255, 102, 0

WEB/Javascript 2008. 10. 20. 10:13
* JavaScript에서의 this 지시자

 JavaScript에서 this는 다른 언어에서와 마찬가지로, 해당 함수가 속해있는 객체를 가리킨다. 전역 함수의 경우에 this는 window 객체를 가리킨다.

다음의 예제는 hello 함수를 하나 선언한 후에, 서로 다른 클래스에서 hello 함수를 메소드로 등록하여 사용하는 예제이다.

function hello() 

{

    alert("Hi, I'm "+ this.name);

}



function ClassA() 

{

    this.name = "A";

}



function ClassB() 

{

    this.name = "B";

}



var a = new ClassA;

a.hello = hello;

a.hello();



var b = new ClassB;

b.hello = hello;

b.hello();

 

* JavaScript의 이벤트 핸들러 등록 방법

 JavaScript에서 이벤트 핸들러를 등록하는 방법에는 세 가지가 있다.

1) [Object].addEventListener("name_of_event", fnHandler, bCapture);
 DOM에서 사용하는 방법이다. (IE에서는 지원하지 않는다.) 여러 개의 이벤트 핸들러를 등록할 수 있다.

2) [Object].attachEvent("name_of_event_handler", fnHandler);
 IE 에서 사용하는 방법이다. MSIE에서는 이벤트가 발생했을 때, capturing phase가 없기 때문에 이 함수에는 세번째 인자가 없다. addEventListener 함수를 사용할 때, bCapture=false로 한 것과 같다. 역시 여러 개의 이벤트 핸들러를 등록할 수 있다.

3) [Object].name_of_event_handler = fnHandler;
 JavaScript에서 이벤트 핸들러를 등록하는 전통적인 방법인 대입법이다. 호환성이 좋으나 이벤트 핸들러를 하나밖에 등록할 수 없다.

 그래서, 여러 브라우저에서 동작하도록 이벤트 핸들러 등록 함수를 만들때 다음과 같이 한다. Professional JavaScript for Web Developers(Wrox) p.292에 나온 예제이다.

EventUtil.addEventHandler = function (oTarget, sEventType, fnHandler) 

{

    if (oTarget.addEventListener) 

    { //for DOM-compliant browsers

        oTarget.addEventListener(sEventType, fnHandler, false);

    } 

    else if (oTarget.attachEvent) 

    { //for IE

        oTarget.attachEvent("on" + sEventType, fnHandler);

    } 

    else 

    { //for all others

        oTarget["on" + sEventType] = fnHandler;

    }

};

 정말 이렇게 사용해도 될까?

 대부분의 경우에는 문제 없이 동작할 것이다. 하지만, fnHandler 안에서 this를 사용한다면 문제가 될 수 있다. attachEvent 함수를 통해서 등록된 이벤트 핸들러와 대입법으로 등록된 이벤트 핸들러에 대한 IE의 내부적인 동작 방식이 다르기 때문이다.

 다음의 예제를 보자.

function onClickEventHandler(event) 

{

    if (this == window) 

    {

        alert("This is the window object");

    }

    else 

    {

        alert(this.tagName);

    }

}


myObject.onclick = onClickEventHandler;

myObject.attachEvent("onclick", onClickEventHandler);

 위와 같이 이벤트 핸들러를 작성하여 테스트를 해 보면 차이점을 좀더 확실히 알 수 있다. 같은 객체에 대해 이벤트 핸들러를 두 개 등록했으며, myObject 객체를 클릭하면 alert 창이 두 번 나타날 것을 예상할 수 있다. 하지만 그 메시지의 내용은 다를 것이다.

 대입법으로 이벤트 핸들러를 등록하면, 그 이벤트 핸들러 함수는 해당 객체의 메소드처럼 동작한다. 반면에 attachEvent 함수를 사용하여 등록하면, 이벤트가 발생했을 때 호출될 뿐이지 해당 객체의 메소드가 되는 것은 아니다. 또한, 호출되는 순서도 정해져 있다. 대입법으로 등록된 이벤트 핸들러가 먼저 호출된 후에, attachEvent 함수로 등록된 이벤트 핸들러가 호출된다. attachEvent함수로 등록된 이벤트 핸들러들끼리는 호출 순서의 규칙이 없고 랜덤하게 호출된다. (addEventListener 함수로 등록된 이벤트 핸들러는 등록된 순서대로 호출된다.) 그러므로 위 예제에서 이벤트 핸들러의 등록 순서를 다음과 같이 바꿔도 실제 호출되는 순서는 변함이 없다.

myObject.attachEvent("onclick", onClickEventHandler);


myObject.onclick = onClickEventHandler;

 Professional JavaScript for Web Developers(Wrox Press, 2005)에서는 등록할 수 있는 핸들러의 개수만 빼고 모두 같은 거라고 되어있고 이러한 차이점에 대한 언급이 없다. MSDN에는 이런 차이점이 잘 설명되어 있으므로, Microsoft 관련한 의문사항은 MSDN을 살펴보는 습관을 기르자. ㅡㅂㅡ;

===================================================================================================================

출처 : http://mashedon.egloos.com/1484422

AND

자바스크립트를 통한 테이블의 셀 접근법

WEB/Javascript 2008. 10. 6. 11:51
결과화면 테이블의 필터링을 자바스크립트로 처리하기로 방침을 정한후,

childNodes로 접근해보니 자식개수가 1개밖에 안나오는 상황이 발생..

결국 확인해보니 DOM의 element개체단위론 table까지만 접근가능하고

row나cell로의 접근은 속성(?)으로 처리되는거였다..

에효 간단한거에 또 시간을 잡아먹어버린 하루..

document.getElementById("gridview").rows[i].childNodes[j]

AND

자바스크립트 모음

WEB/Javascript 2007. 11. 9. 17:15

<!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="">
</HEAD>

<BODY>
<script LANGUAGE="JavaScript">
<!--
// ------------------------- 드림위버에 기본적으로 들어간 JS -------------------------
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-------------------------------------------------------------------------------------

// ---------------- 팝업창 시에 사용할 함수 -------------------------------
function getCOOKIE(name){
var nameOfCOOKIE = name + "=";
var x = 0;
while ( x <= document.COOKIE.length ){
var y = (x+nameOfCOOKIE.length);
if ( document.COOKIE.substring( x, y ) == nameOfCOOKIE ){
if ( (endOfCOOKIE=document.COOKIE.indexOf( ";", y )) == -1 )
endOfCOOKIE = document.COOKIE.length;
return UNESCAPE( document.COOKIE.substring( y, endOfCOOKIE ) );
}
x = document.COOKIE.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}

function setCOOKIE( name, value, expiredays ){
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.COOKIE = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}


// ------------------------------------- 기타 함수들 ----------------------------------------

// 메일패턴 체크
function fnc_EmailChk(str_regexp){
var check_string = true;
var check_data = new RegExp('[a-zA-Z0-9@._]');

for(i = 0; i < str_regexp.length ; i++){
check_string = check_data.test(str_regexp.substr(i,1));
if(!check_string){
break;
}
}
return check_string;
}

// ' 와 " 의 입력을 막음
function fnc_NoneWrite(e){
var keyValue = event.keyCode
if((keyValue == 34)||(keyValue == 39)) return false;
}

// 공백제거 함수
function fnc_trim(str){
return str.replace(/(^\s*)|(\s*$)/g, "");
}

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

// - 음수입력
function keyCheck_minus(e) {
var keyValue = event.keyCode
if (((keyValue >= 48) && (keyValue <= 57)) || keyValue==13 || keyValue==45) return true;
else return false
}

// 콤마 넣기(정수만 해당)
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 fnc_currency(Form_name, Field_name){
form = document.forms[Form_name];
tmp_value = form.elements[Field_name].value;
form.elements[Field_name].value = comma(tmp_value);
}

// 영문대소문자, 숫자, 언더바, . 을 포함하여 입력 받음, 한글도 입력 받음
function fnc_Write_dot(e){
var keyValue = event.keyCode
if(!(((keyValue >= 48)&&(keyValue <= 57))||((keyValue >= 65)&&(keyValue <= 90))||((keyValue >= 97)&&(keyValue <= 122))||(keyValue == 46)||(keyValue == 45)||(keyValue == 95))){
return false;
}
}

// 영문대소문자, 숫자, 언더바만 입력받음, 한글도 입력 받음
function fnc_Write_string(e){
var keyValue = event.keyCode
if(!(((keyValue >= 48)&&(keyValue <= 57))||((keyValue >= 65)&&(keyValue <= 90))||((keyValue >= 97)&&(keyValue <= 122))||(keyValue == 45)||(keyValue == 95))){
return false;
}
}

function fnc_ImgExt(ImgFile){
ImgFile = ImgFile.toLowerCase();
if((ImgFile.indexOf(".gif") == -1)&&(ImgFile.indexOf(".jpg") == -1)&&(ImgFile.indexOf(".jpeg") == -1)){
return false;
}else{
return true;
}
}

// 라디오 버튼 체크
function fnc_OptChk(obj){
Optchk = false;
for(i = 0; i < obj.length; i++){
if(obj[i].checked == true){
Optchk = true; break;
}
}
return Optchk
}

function fnc_OptChk_idx(obj){
OptIdx = "";
for(i = 0; i < obj.length; i++){
if(obj[i].checked == true){
OptIdx = i; break;
}
}
return OptIdx
}

function fnc_download(file_origin, file, path, service, div, numseq){
Location.href='/common/download.php?file_origin=' + file_origin + '&file=' + file + '&path=' + path + '&service=' + service + '&div=' + div + '&numseq=' + numseq;
}


function fnc_StrChk(vString, vlength){
var chkBln = true;
if(vString.length >= vlength){
var chkStr = new RegExp('[^a-zA-Z0-9_]');
for(i = 0; i < vString.length; i++){
chkBln = !(chkStr.test(vString.substr(i,1)));
if(chkBln == false){ break; }
}
}else{
chkBln = false;
}
return chkBln;
}

function fnc_HStrChk(vString, vlength){
var chkBln = true;
if(vString.length < vlength){
chkBln = false;
}
return chkBln;
}

function fnc_EmailChk(vString, vlength){
var chkBln = true;
if((vString.length >= vlength) && (vString.indexOf("@") != -1) && (vString.indexOf(".") != -1)){
var chkStr = new RegExp('[^a-zA-Z0-9@._]');
for(i = 0; i < vString.length; i++){
chkBln = !(chkStr.test(vString.substr(i,1)));
if(chkBln == false){ break; }
}
}else{
chkBln = false;
}
return chkBln;
}

function fnc_NumChk(vString, vlength){
var chkBln = true;
if(vString.length >= vlength){
var chkStr = new RegExp('[^0-9]');
for(i = 0; i < vString.length; i++){
chkBln = !(chkStr.test(vString.substr(i,1)));
if(chkBln == false){ break; }
}
}else{
chkBln = false;
}
return chkBln;
}

function fnc_JuminNumChk(vString) {
var chkBln = true;
if(vString.length != 13){
chkBln = false;
}else{
var a= vString.substring(0, 1);
var b= vString.substring(1, 2);
var c= vString.substring(2, 3);
var d= vString.substring(3, 4);
var e= vString.substring(4, 5);
var f= vString.substring(5, 6);
var g= vString.substring(6, 7);
var h= vString.substring(7, 8);
var i= vString.substring(8, 9);
var j= vString.substring(9, 10);
var k= vString.substring(10, 11);
var l= vString.substring(11, 12);
var m= vString.substring(12, 13);

var sum = 2*a + 3*b + 4*c + 5*d + 6*e + 7*f + 8*g + 9*h + 2*i + 3*j + 4*k + 5*l;
var r1 = sum % 11;
var temp = 11*((sum-r1)/11)+11-sum;
var r2 = temp % 10;
var temp1 = temp-10*((temp-r2)/10);

if(m != temp1){
chkBln = false;
}else{
chkBln = true;
}
}
return chkBln;
}

function fnc_ComNoChk(comno) {
var chkBln = true;
if(comno.length != 10){
chkBln = false;
}
sumMod = 0;
sumMod += parseInt(comno.substring(0,1));
sumMod += parseInt(comno.substring(1,2)) * 3 % 10;
sumMod += parseInt(comno.substring(2,3)) * 7 % 10;
sumMod += parseInt(comno.substring(3,4)) * 1 % 10;
sumMod += parseInt(comno.substring(4,5)) * 3 % 10;
sumMod += parseInt(comno.substring(5,6)) * 7 % 10;
sumMod += parseInt(comno.substring(6,7)) * 1 % 10;
sumMod += parseInt(comno.substring(7,8)) * 3 % 10;
sumMod += Math.floor(parseInt(comno.substring(8,9)) * 5 / 10);
sumMod += parseInt(comno.substring(8,9)) * 5 % 10;
sumMod += parseInt(comno.substring(9,10));

if (sumMod % 10 != 0) {
chkBln = false;
}
return chkBln;
}


// ------ 특수문자 예외처리 -----------
function fnc_NotKeywordChk(vString){
blnChk = false;
if(vString.indexOf("~") != -1 || vString.indexOf("`") != -1 || vString.indexOf("!") != -1 ||
vString.indexOf("@") != -1 || vString.indexOf("#") != -1 || vString.indexOf("$") != -1 ||
vString.indexOf("%") != -1 || vString.indexOf("^") != -1 || vString.indexOf("&") != -1 ||
vString.indexOf("*") != -1 || vString.indexOf("(") != -1 || vString.indexOf(")") != -1 ||
vString.indexOf("-") != -1 || vString.indexOf("_") != -1 || vString.indexOf("=") != -1 ||
vString.indexOf("+") != -1 || vString.indexOf("[") != -1 || vString.indexOf("{") != -1 ||
vString.indexOf("]") != -1 || vString.indexOf("}") != -1 || vString.indexOf("\\") != -1 ||
vString.indexOf("|") != -1 || vString.indexOf(";") != -1 || vString.indexOf(":") != -1 ||
vString.indexOf("'") != -1 || vString.indexOf('"') != -1 || vString.indexOf(",") != -1 ||
vString.indexOf("<") != -1 || vString.indexOf(".") != -1 || vString.indexOf(">") != -1 ||
vString.indexOf("/") != -1 || vString.indexOf("?") != -1 )
{
blnChk = false;
}
else
{
blnChk = true;
}
return blnChk;
}

//---------- 텍스트 바이트 체크 (폼이름, 체크필드명, 체크된바이트 리턴필드명) ---------------- //

function fnc_CheckByte(form,checkField,returnField){
checkCount = 0;
checkText = document.forms[form].elements[checkField].value;
checkTmp = checkText.length;

for(k = 0; k < checkTmp; k++){
checkOne = checkText.charAt(k);
if(escape(checkOne).length > 4){
checkCount += 2;
}else{
// 엔터값이 들어왔을때 값(rn)이 두번실행되는데 첫번째 값(n)이 들어왔을때 tcount를 증가시키지 않는다.
if(escape(checkOne) == '%0A') {
}else{
checkCount++;
}
}
}

document.forms[form].elements[returnField].value = checkCount;
}
//-->
</script>
</BODY>
</HTML>


출처 : 다 되게 되어있다! 용호리눅스

AND

HTMLElement 객체의 프로퍼티 (DOM)

WEB/Javascript 2007. 11. 9. 16:25
  --- HTMLElement 객체의 프로퍼티 ---

 all              ⓔ     특정한 HTMLElement 객체에 포함된 모든 태그들의 컬렉션
 align           ⓔ    Block 효과를 가지는 태그의 align 속성을 가리키는 객체의 속성
 className         스타일시트의 Selector로 사용하기 위해 태그에 사용된 class 속성의 값
 children      ⓔ   특정한 태그에 1차적으로 포함되어 있는 HTMLElement 객체들의 컬렉션


 clientHeight         객체에 적용된 여백과 테두리, 스크룰바를 제외한 높이
 clientWidth   ⓔ    객체에 적용된 여백과 테두리, 스크룰바를 제외한 너비
 clientLeft     ⓔ    HTMLElement 객체의 기준위치로부터의 왼쪽 간격(테두리선 두께)
 clientTop    ⓔ    HTMLElement 객체의 기준위치로부터의 위쪽 간격(테두리선 두께)
 dir                      글씨가 오른쪽 혹은 왼쪽부터 써지도록 설정 ("ltr" 혹은 "rtl")


 disabled             HTMLElement 객체의 상태를 사용할 수 없도록 할 것인지의 여부설정
 id                       HTMLElement 객체의 스타일을 적용하기 위해 태그에 사용된 ID 속성
 innerHTML          종료태그를 가진 태그의 마크영역에 포함된 태그를 포함한 문자열
 innerText     ⓔ     종료태그를 가진 태그의 마크영역에 포함된 태그를 제외한 문자열
 outerText     ⓔ     해당 요소에 포함된 태그를 제외하는 모든 문자열
 outerHTML   ⓔ     해당 요소의 시작과 끝태그까지를 포함하는 전체 문자열


 style                  태그에 사용된 STYLE 속성으로서 객체로 취급된다.
 tagName            HTMLElement 객체를 만들어낸 태그의 이름(예 H1, input, div 등)
 this                    해당 html 태그에서 자기 자신의 HTMLElement 객체를 참조
 title                    태그의 title 속성으로 마우스포인터가 왔을 때 나타낼 설명 문자열


 sourceIndex    ⓔ   HTMLElement 객체를 document.all[index]로 접근할 때의 index 값
 parentElement ⓔ   HTMLElement 객체를 포함하고 있는 부모객체를 참조한다.
 offsetParent           HTMLElement 객체의 기준 위치를 결정하는 부모 HTMLElement 객체
 offsetHeight           HTMLElement 객체와 그 내용물을 포함하는 전체 높이
 offsetWidth            HTMLElement 객체와 그 내용물을 포함하는 전체 너비
 offsetLeft              HTMLElement 객체의 왼쪽 좌표로서 부모객체에 상대적인 x 축 기준점
 offsetTop             HTMLElement 객체와 위쪽 좌표로서 부모객체에 상대적인 y 축 기준점
 readyState    ⓔ    HTMLElement 객체의 메모리 로딩상태를 표현(uninitialized ~ complete)


 scrollHeight   ⓔ    스크롤되는 HTMLElement 객체의 스크롤된 부문을 포함하는 전체 높이
 scrollWidth    ⓔ    스크롤되는 HTMLElement 객체의 스크롤된 부문을 포함하는 전체 너비
 scrollLeft       ⓔ    스크롤되는 HTMLElement 객체의 왼쪽으로 스크롤된 부문의 픽셀값
 scrollTop      ⓔ    스크롤되는 HTMLElement 객체의 위쪽으로 스크롤된 부문의 픽셀값


           ※  ⓔ 는 Explorer 에서만 지원되는 컬렉션.

사용자 삽입 이미지


        ----  Collection 의 종류------

 

 all            ⓔ     HTML 문서에 포함된 모든 태그를 배열로 접근하는 컬렉션
 applets           <applet> 태그의 HTMLElment 객체 컬렉션
 anchors          <a>  태그에 name 속성이 사용된 Anchor 객체의 컬렉션


 cells        ⓔ     <table> 에 포함된 <td><th> 태그의 HTMLElement 컬렉션
 children    ⓔ     html 문서에서 태그들의 포함관계에서 자식 객체의 컬렉션
 childNodes       DOM 의 특정노드에 포함된 자식 노들의 노드리스트 컬렉션
 elements         <Form>  태그의 내부에 사용되는는 입력양식 객체들의 컬렉션


 embeds           <embed> 태그의 HTMLElement 객체 컬렉션
 images            <img>   태그의 HTMLElement 객체 컬렉션
 filters      ⓔ      특정      태그의 style 속성에 사용한 필터객체의 컬렉션
 frames             <frame> 혹은 <iframe> 태그로 정의되는 프레임 컬렉션
 links                <a href=""> <area href="">태그로 정의되는 링크 컬렉션


 options          <select> 태그에 포함되는 <option> 태그의 컬렉션
 plugins          <embed>  태그로 만들어지는 멀티미디어 파일의 컬렉션
 scripts            <script> 태그로 만들어지는 스크립터 공간의 컬렉션
 stylesheets      <LINK> <STYLE> 태그로 만들어지는 스타일시트 컬렉션             
            
      ※  ⓔ 는 Explorer 에서만 지원되는 컬렉션.


  all 컬렉션.
    <html>
       <head><title> 제목 </title> </head>
        <body>
            <img src="../aa.gif">
        </body>
     </html>

  document.all[0]= <html>  document.all[1]= <head>
   document.all[2]= <title> document.all[3]= <body>
   document.all[4]= <img>
  
    ID 속성을 사용하면 Document 객체의 all 컬렉션을 이용해서
    특정 HTMLElement 객체을 참조할  수 있다.

    document.all[index]  document.all["name"]
     document.all("name") document.all.name     document.all["ID"]




                    --  Event 의 종류 --

 

  Abort            이미지를 읽어 들이는 일이 도중에 중단될 때 발생하는 이벤트
 BeforeCopy   글씨를 복사하기 위해서 오른쪽 마우스나 CTR+C를 누를 때 발생하는 이벤트
 BeforeCut      글씨를 잘라내기 위해서 오른쪽 마우스나 CTR+x를 누를 때 발생하는 이벤트
 beforePaste   글씨를 붙여넣기 위해서 오른쪽 마우스나 CTR+v를 누를 때 발생하는 이벤트
 
 AfterPrint         브라우저에서 인쇄 버튼을 클릭하면 인쇄영역이 활성화된 후에 발생
 BeforePrint      브라우저에서 인쇄 버튼을 클릭하면 인쇄영역이 활성화되기 전에 발생
 BeforeUnload   문서가 메모리에서 해제될 때  Unload 이벤트보다 일찍 발생하는 이벤트
 
 Blur             특정 객체로부터 포커스가 빠져나갈 때 발생하는 이벤트
 Change       입력양식에서 값이 바뀌게 되는 순간에 발생하는 이벤트
 Click           마우스로 특정 객체를 클릭할 때 발생하는 이벤트
 
 ContextMenu  팝업메뉴를 보기 위해 오른쪽 마우스를 클릭 할때 발생하는 이벤트
 Copy             팝업메뉴의 "복사" 항목을 누르거나 CTR+C를 누를 때 발생하는 이벤트
 Cut                팝업메뉴의 "잘라내기" 항목을 누르거나 CTR+x 를 누를 때 발생하는 이벤트
 DblClick          마우스를 더블클릭했을 때 발생하는 이벤트
 
 Drag            드래그 동안에 드래그를 시작한 객체에서 계속해서 발생하는 이벤트
 DragStart     드래그를 시작한 객체에서 최초에 발생되는 Dragstart 이벤트
 DragEnter    드래그 도중에 만나는 객체의 영역으로 들어가는 순간에 발생하는 이벤트
 DragOver     드래그 도중에 만나는 객체의 영역에서 계속해서  발생하는 이벤트
 DragLeave    드래그 도중에 만나는 객체의 영역에서 벗어나는 순간에 발생하는 이벤트
 DragEnd      드래그가 끝났을때 드래그를 시작한 객체에서 발생하는 Dragend 이벤트
 
 Drop             드래그가 끝났을때 드래그를 끝낸 객체에서 발생하는 Drop 이벤트
 Error             문서나 이미지를 Loading 하다가 에러가 발생할때 의 이벤트
 Focus           특정 객체가 포커스를 얻을 때 발생하는 이벤트

 KeyDown      키보드를 눌러서 글씨가 써지기 전에 최초의 순간에 발생하는 이벤트
 KeyPress      키보드를 눌러서 글씨가 써지기 직전에 발생하는 이벤트(Netscape는 최초)
 KeyUp           키보드를 떼어내는 순간에 발생하는 이벤트


 Load              window에 문서의 내용이 새롭게 Loading 되면 발생하는 이벤트
 Mousedown    문서영역의 특정 객체를 마우스로 누를 때 발생하는 이벤트
 MouseEnter     특정객체에  마우스가 들어오는 최초의 순간에 발생하는 이벤트

 MouseMove    문서영역의 특정 객체에서 마우스를 움직일 때 발생하는 이벤트
 MouseOut       문서영역의 특정 객체에서 마우스가 벗어날 때 발생하는 이벤트
 MouseOver     문서영역의 특정 객체 위에 마우스가 올려져 있을 때 발생하는 이벤트
 MouseUp        마우스 버튼을 뗐을 때 발생하는 이벤트
 MouseWheel   문서영역의 특정 객체에서 마우스휠을 움직일 때 발생하는 이벤트


 Move         윈도우, 프레임같은  객체를 움직이기 시작하는 순간에 발생하는 이벤트
 Paste        팝업메뉴의 "붙여넣기" 항목을 누르거나 CTR+x를 누를 때 발생하는 이벤트
 Reset        입력양식의 Reset 버튼을 눌러서 내용이 초기화될 때 발생하는 이벤트
 Resize       윈도우, 프레임 , HTMLElement 객체의 크기가 변경될 때 발생하는 이벤트


 Scroll          문서나 Textarea와 같은 객체에서 내용을 스크롤시킬 때 발생하는 이벤트
 Select         입력양식에 입력된 문자나 Option 객체를 선택했을 때 발생하는 이벤트
 SelectStart   문서 일부를 복사하기 위애 내용을 선택하는 최초의 순간에 발생하는 이벤트
 Submit        입력양식의 Submit 버튼을 눌러서 내용이 전송되기 직전에 발생하는 이벤트
 Unload        문서 정보가 메모리에서 해제되려는 순간에 발생하는 이벤트



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

     Text 입력요소에 적용되는 IME-MODE의 속성값


active        IME-MODE를 활성화 시켜서 한글이 입력되도록  한다(한/영 변환키 사용가능).

inactive     IME-MODE를 불활성화 시켜서 영문이 입력되도록 한다(한/영 변환키 사용가능).

disabled    IME-MODE를 사용 할 수 없도록 하영 영문만 입력할 수 있는 상태로 만든다.

                 (한/영 변환키를 사용해도 한글 전환이 되지 않는다).

auto          기본값으로 현재 한/영 키의 상태로 입력되도록 한다.

  

<Explorer 5.5이상 전용>

     <input type="text" style="IME-MODE:active">


출처 : http://blog.naver.com/rakis77/70022030743

AND

그간의 내용정리

WEB/Javascript 2007. 11. 9. 10:39

개체.getBoundingClientRect()
출력화면에 기준한 좌표체계를 돌려줌 속성으로 x, y가 있음
출력화면 기준으로인해 브라우저 스크롤의 경우 좌표가 꼬임
우회방법: 레이어의 스크롤을 하게되면 브라우저 스크롤의 좌표와는 상관없이 보여지는 개체의 정확한 위치가 잡아짐

개체.offsetLeft , Top..
내장개체에 position을 absolute를 먹이지 않는 이상 상위 개체의 내부여백의 영향으로 좌표에 문제가 생길 수 있음 (ex:body)
고로 부모의 offset을 체크할 필요가 생김

개체.className
개체에 설정된 스타일 클래스의 값을 돌려줌.

개체.getAttribute('속성명')
특정속성값을 가져옴(id 등 을 못 가져올때 사용)
참고로 id는 닷넷, DOM, HTML, JAVASCRIPT에서 약간씩 다른듯함

innerHtml ?
innerText (IE)
innerXml ?
outerHtml (IE)
outerText (IE)
outerXml ?
등이 존재..
자식포함 옵션도 존재
(조사필요)

document.elementFromPoint(x,y)
좌표체계에 기준을한 개체선택방법
아마도 최상위의 개체를 가져다줄듯함..
익스플로러 전용인듯함

document.createElement("태그명")
or document.createElement("<태그 속성=""....></태그>")
속성이 많아서 설정하기 귀찮을땐 후자를 추천

*요넘들과 함께 사용
개체.setAttribute('속성명','값')
개체.appendChild(자식개체)
개체.removeChild(자식개체)

개체.
부모찾기
개체.parentElement (IE)
자식찾기
개체.children (IE) <==덩어리
개체.childNodes <==덩어리
개체.childNodes[1] <==1+1번째자식
개체.firstChild
개체.lastChild

event.srcElement
이벤트를 일으킨 개체(IE)

parseInt(문자)
닷넷의 int.parse("")와 동일

getParentByAttr(개체,'name','value')
재귀적포함관계를 갖는 구조화된 개체의 부모를 찾기위해만듬
용도는 알아서..
        function getParentByAttr(sender, nm, vlu)
        {
            if(sender.parentElement!=null)
            {
                if(sender.parentElement.getAttribute(nm)==vlu)
                {
                    return sender.parentElement;
                }
                else
                {
                    return getParentByAttr(sender.parentElement, nm, vlu);
                }
            }
            else
            {
                return null;
            }
        }

AND

자바스크립트 정규식

WEB/Javascript 2007. 3. 19. 03:35
출처 : http://blog.naver.com/whycry11/80029925561


1. 개념잡기

일반화 시킨 표현. 이것을 정규표현이라고 요약할 수 있을 것 같다.
다음의 과정을 너무 쉽다 생각말고 따라오길 바란다.

- 감잡기

"12354" -> 숫자
"asdfasf" -> 알파벳
두 가지의 간단정규표현을 만들었다. 실생활의 보기와 비추어보자.
"길이가 3인 이름!"
위의 표현은 길이를 표시하는 방법이 없다. 조금 더 발전시켜서 "알파벳{3}"이런식
으로 길이를 표현할 수 있도록 한다. 그리고, "알파벳"란 것도 너무 길다 "알"
이라고 한 글자로 표현한다. 그러면 "길이가 3인 이름"은
"알{3}"으로 표시가 가능하다.
길이가 10인 숫자는 "수{10}"
"길이가 1인 알파벳이 나오고 그 다음에 길이가 3인 숫자가 나오는 문자열"! ->
"알{1}수{3}"얼핏이나마 감이 올 것이다.
"첫 글자는A, 그 다음은 아무 알파벳 5글자" -> "A알{5}"

- 조금 더

아이디는 대개 첫 글자는 영문이고 두 번째부터는 영문이나 숫자가 온다. 이것을
표현하기 위해선 이것 들 중에 하나란 의미를 갖는 새로운 표현이 필요하다.
"a,b,c,d 중에 하나" -> [abcd]
응용하면,
"알파벳이나, 숫자중 하나" -> [알수]
"[" 안에 있는 문자들의 순서는 의미가 없으며, 그 표현은 (클래스라고 한다.)  
결국 한 글자를 말한다.
위에서 말한 "첫 글자는 영문, 두 번째 부터는 영문이나 숫자가 11자"를
표현하면, "알[알수]{11}".
그런데, 실제로 모든 아이디가 12자인 것은 아니다, 대개 4자부터 12자를 지원한다.
새로운 표현이 등장한다. "몇 자부터 몇 자"
"A가 3글자부터 12자" -> "A{3,12}"
"알파벳이나 숫자가 1자부터 100자" -> "[알수]{1,100}"
이제 아이디를 다시 정의하자.
"첫 글자는 영문, 영문이나 숫자가 3자부터 11자" -> "알[알수]{3,11}"

2. 표현식

지금 까지의 규칙에서 설명한 용어를 실제 정규표현에서 사용하는 표현으로 바꾸고,
다른 세부적인 옵션에 대해 알아보자.

\ : 다음의 글자가 특별한 문자임을 나타낸다. 때론, 그 다음 문자 자체를 의미하기
도 한다.
보기를 들면, "\n"은 문자"\"과 문자"n" 두 글자와 매치되는 것을 의미하는 것이 아
닌,
새줄(New Line)을 의미하며, "\\"은 첫 "\" 다음 문자인 "\" 자체를 의미한다.
즉, "\\"은
"\"과 매칭된다.

^ : 입력문자열의 맨 처음을 의미한다. (맨 첫 글자가 아니라, 맨 처음이란 문맥적 의
미를
말한다. 아주 중요하다) 기본적으로 정규표현은 입력 문자열의 한 줄에만 적용된다.
하지만, 옵션에 따라 여러줄에 적용할 수도 있다. 그럴 경우에는 "^"는  "\n"
나 "\r"
다음의 위치를 의미한다.

$ : "^"는 반대로 입력 문자열의 맨 끝을 의미한다. 역시 여러줄에 정규표현이 적용
될
경우에는 "\n"이나 "\r"의 앞의 위치를 의미한다.

* : 이 문자 앞의 표현이 0번내지 무한번 반복될 수 있음을 말한다.
보기를 들면, /a*/은 "a", "", "aaaa", "aaaaa"와 매칭된다.
(0번이상은 없어도 된다는 것을 의미한다.)

+ : *와 같지만, 0번이상이 아니라 1번이상이라는 점을 제외하곤 /*/와 같다.

? : 앞의 표현이 0번 또는 1번. /do(es)?/는 "do", "does"와 매칭된다.

{n} : 앞의 표현이 n은 음수가 아닌 정수이어야 하며, 앞의 표현이
n번 매치되는 것을 말한다.

{n,} : 앞의 표현이 n은 음수가 아닌 정수이어야 하며, n번 이상
매치되는 것을 말한다.

{n,m} : 앞의 표현이 n번 이상 부터 m번 이하까지 매칭되는 것을
말하며, /*/는 /{0,}/과 같으며, /+/는 /{1,}/과 /?/는 /{0,1}/으로
표현 가능하다.

. : "\n"을 제외한 한 글자를 뜻한다. 만일 모든 글자를 표현하고
싶다면("\n"마저도 합친) /[.\n]/을 사용하면 된다.

x|y : x 또는 y와 매칭된다. 보기를 들면, /z|food/는 "z" 또는
"food"와 매칭된다. /(z|f)ood/는 "zood" 또는 "food"와 매칭된다.
(참고로 괄호는 묶어준 것 이상의 의미가 있다.)

(패턴) : 해당 패턴과 매칭시키고, 그 부분을 특정 변수에 담는다.
그 변수 이름은 JScript는 $0~$9까지의 변수에 저장이 되고(Perl과 같다.),
VBScript에서는 SubMatches 컬렉션에 저장된다.
괄호기호 자체와 매치시키고 싶다면? /\(/와 /\)/를 사용한다.

(?:패턴) : 해당 패턴과 매칭은 시키지만, 그 부분을 특정 변수에
담지 않는다. 왜 이게 필요할까?
위의 보기에서 /(z|f)ood/는 "zood" 또는 "food"와 매칭된다고 했는데,
단순히 매칭의 목적으로 사용했지만, "zood"의 경우 "z"가 $0 이란
변수에 저장이 되고 말았다. 이러한 것을 막기 위해서 사용하는 것이
(?:패턴)이다.

(?=패턴) : (?:패턴)과 동일하지만, 패턴과 일치한 부분이후부터
다음 매치가 일어나지 않고 패턴 앞부터 다시 매칭이 진행된다.
즉, 룩업(lookup, lookahead)을 할 뿐이다. /Windows (?=95|98|NT|2000)/ 은
"Windows 2000"의 "Windows" 부분과 매칭이 되며 다음 매칭은
"2000" 다음 부터가 아닌 "Windows" 다음 부터 진행이 된다.

(?!패턴) : (?=패턴)과 반대다. /Windows (?=95|98|NT|2000)/ 은
"Windows 3.1"의 "Windows" 부분과 매칭이 된다.

[xyz] : "["안에 있는 표현중 하나를 의미한다.

[^xyz] :  "["안에 있는 표현을 제외한 것중 하나를 의미한다.
"[^abc]"는 "plain"의 "p"때문에 매칭된다.

[a-z] : "a"부터 "z" 까지의 문자중 하나

[^a-z] : "a"부터 "z" 까지의 문자를 제외한 하나

\b : 단어의 경계(단어와 공백, "\n", "\r"의 사이)와 매칭된다.
보기를 들면, "er\b"는 "never"와는 매칭되지만, "verb"와는 매칭되지 않는다.

\B : 단어의 경계가 아닌 것과 매칭된다. "er\B"는 "verb"와는
매칭되지만, "never"와는 매칭되지 않는다.

\cx : Ctrl+x 키와 매칭된다. "\cc"는 Ctrl+C와 매칭된다. x의 범위는
[a-zA-Z]이며, 만일 이 이외의 문자를 사용한다면 "\c"는 "c"와 동일하다.

\d : [0-9]와 같다.

\D : [^0-9]와 같다. 참고로 대문자는 소문자의 반대 의미를 갖는다.

\f : 폼피드(form-feed) 문자를 의미하며, "\x0c"와 "\cL"과 동일하다.

\n : 새 줄(newline)를 의미하며, "\x0a"와 "\cJ"와 동일하다.

\r : 캐리지 리턴(carriage return)을 의미하며, "\x0d"와 "\cM"과 동일하다.

\t : 탭. "\x09", "\cI"과 동일

\v : 버티컬 탭. "\x0b", "\cK"과 동일

\s : 화이트스페이스를 의미한다. 화이트스페이스란 공백, 탭, 폼피드,
캐리지리턴등을 의미한다. [ \f\n\r\t\v]과 동일("\f"앞에 공백이 있다. 주의!)

\S : "[^ \f\n\r\t\v]"

\w : "_"를 포함한 일반적인 단어에 사용되는 문자를 말한다.
"[A-Za-z0-9_]" 과 동일

\W : "[^A-Za-z0-9_]"

\xn : n은 2자리 16진수이며, 해당 16진수 코드와 매칭된다. "\x412"는 16진수
41은 "A"이기 때문에 "A2"와 매칭된다.

\num : 캡쳐한 매칭을 가리킨다(백레퍼런스, backreference).
"(.)\1"은 연속된 두개의 문자열을 의미한다.
\n : "\1"은 위에서 캡쳐한 매칭(backreference)를 가리킨다고 했는데,
만일 이 패턴앞에 어떠한 n개의 캡쳐한 표현이 있다면 백레퍼런스이지만,
그렇지 않은 경우에는 8진수로 간주하여 해당 코드의 문자와 매칭된다.

\un : n은 4자리 UNICODE 이다. "\u00A9"은 copyright 심볼인 "ⓒ"와 매칭된다.


greedy, non-greedy

? : 앞에서 설명했는데, 왜 또? 라고 생각할 것이다.
?은 문맥에 따라 특별한 의미를 갖는다.
패턴 "o*"는 "foooood"와 매칭된다. 당연하다! 하지만, "f"앞의 "o"와
매칭되는 것이 아니다!! "ooooo"와 매칭된 것이다. 즉, 기본으로
정규표현 매칭은 가장 큰 범위를 선택한다. 이것을 greedy하다고 한다.
하지만, 때론 작은 범위에 매칭시킬 필요가 있을 경우가 있다.
(이의 적절한 보기는 잠시 후에 나온다.) "o*?"가 방금 말한
non-greedy 매칭이다.
수량관련 문자인 "*", "+", "?", "{n}", "{n,}", "{n,m}" 다음에 "?"가
나오면 non-greedy 매칭이된다.
잠시, 위에서 "o*?"가 "o"와 매칭된다고 했는데 이상하게 생각한 분이
있었을 것이다. 맞다. "o*?"는 ""와 매칭되었다. "*"는 0개이상임을
잊어선 안된다. "o+?"가 "o"와 매칭된다.

4. 보기

- 웹 주소

"http://msdn.microsoft.com:80/scripting/default.htm"
위의 주소를 표현할 수 있는 정규표현은 아래와 같다.
/(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)/
$1 : http
$2 : msdn.microsoft.com
$3 : 80
$4 : /scripting/default.htm

- 중복된 단어를 하나로

중복된 영어단어를 하나로 합치기 위해선, 우선 단어를 찾아야한다.
그리고 단어는 앞 뒤가 단어의 경계이어야한다. (말이 참 이상하지만..)
따라서, 아래와 같은 1차 정규표현을 얻을 수 있다.

/\b([a-z]+)\b/

연속해서 동일한 두개의 단어... 앞에서 캡쳐한 표현을 다시 활용하면 된다.
그리고, 단어와 단어 사이엔 화이트스페이스가 있다.

/\b([a-z]+)\s+\1\b/

- HTML 태그 제거

HTML문서에서 태그를 제거한 문서를 추출하고자 한다.
태그는 "<"와 ">"로 감싸여 있다.

/<.*>.*</.*>/

그런데, 위의 정규표현을 HTML문서에 적용하여 해당 패턴을 "",
빈문자열로 바꾸면 문서는 빈 문서가 되고 만다.

<html>
<title>...</title>
<body>
<font>.... </font>
...
</body>
greedy한 매칭이 기본값이라고 위에서 언급을 했다. 따라서,
위의 HTML 문서를 보면, <html>....</body>로 생각할 수 있다.
따라서, 문서 전체가 사라지는 것이다. 이것을 막기 위해선 "*"뒤에 "?"를
추가하면 된다.                          

/<.*?>.*?</.*?>/

아직 끝나지 않았다. :)

좀더 정제를 한다면, 올바른 HTML 문서는 <태그명>과 </태그명>이
서로 일치한다. 이것도 적용한다면,

/<.(*?)>.(*?)</\1>/

위의 $1에 해당되는 부분을 좀 더 생각해보면, ">"를 제외한 문자로
볼 수 있다. 따라서 최종적으로 아래와 같이 정리된다.

/<(\w+)[^>]*?>(.*?)</\1>/

- URL

/(?:^|")(http|ftp|mailto):(?://)?(\w+(?:[\.:@]\w+)*?)(?:/|@)([^"\?]*?)(?:\?
([^\?"]*?))?(?:$|")/

- float 상수

/^(((+|-)?\d+(\.\d*)?)|((+|-)?(\d*\.)?\d+))$/  -1.1 1.1 .9 .8


정규식 구문

정규식은 일반 문자(예: a에서 z)와 메타문자 로 알려진 특수 문자로 구성된 텍스트 패턴입니다. 패턴은 텍스트 본문을 검색할 때 일치하는 문자열을 하나 이상 설명합니다. 정규식은 검색되는 문자열과 일치하는 문자 패턴을 찾는 템플릿의 역할을 합니다.

일반적으로 볼 수 있는 몇 가지 정규식 예는 다음과 같습니다.

JScript VBScript 검색

/^\[ \t]*$/ "^\[ \t]*$" 빈 줄을 찾습니다.
/\d{2}-\d{5}/ "\d{2}-\d{5}" 2자리, 하이픈 및 5자리로 구성된 ID 번호를 찾습니다.
/<(.*)>.*<\/\1>/ "<(.*)>.*<\/\1>" HTML 태그를 찾습니다.

아래 표는 정규식 컨텍스트에 사용되는 모든 메타문자와 메타문자의 동작을 보여줍니다.

문자 설명

\ 그 다음 문자를 특수 문자, 리터럴, 역참조, 또는 8진수 이스케이프로 표시합니다. 예를 들어, "n"은 문자 "n"을 찾고 "\n"은 줄 바꿈 문자를 찾습니다. "\\" 시퀀스는 "\"를 찾고 "\("는 "("를 찾습니다.
^ 입력 문자열의 시작 위치를 찾습니다. Multiline 속성이 설정되어 있으면 ^는 '\n' 또는 '\r'앞의 위치를 찾습니다.
$ 입력 문자열의 끝 위치를 찾습니다. Multiline 속성이 설정되어 있으면 $는 '\n' 또는 'r'뒤의 위치를 찾습니다.
* 부분식의 선행 문자를 0개 이상 찾습니다. 예를 들어, "zo*"는 "z", "zoo" 등입니다. *는 {0,}와 같습니다.
+ 부분식의 선행 문자를 한 개 이상 찾습니다. 예를 들어, "zo+"는 "zo", "zoo" 등이지만 "z"는 아닙니다. +는 {1,}와 같습니다.
? 부분식의 선행 문자를 0개 또는 한 개 찾습니다. 예를 들어, "do(es)?"는 "do" 또는 "does"의 "do"를 찾습니다. ?는 {0,1}과 같습니다.
{ n } n 은 음이 아닌 정수입니다. 정확히 n 개 찾습니다. 예를 들어, "o{2}"는 "Bob"의 "o"는 찾지 않지만 "food"의 o 두 개는 찾습니다.
{ n ,} n 은 음이 아닌 정수입니다. 정확히 n 개 찾습니다. 예를 들어, "o{2}"는 "Bob"의 "o"는 찾지 않지만 "foooood"의 모든 o는 찾습니다. "o{1,}"는 "o+"와 같고, "o{0,}"는 "o*"와 같습니다.
{ n , m } m 과 n 은 음이 아닌 정수입니다. 여기서 m 은 n 보다 크거나 같습니다. 최소 n 개, 최대 m 개 찾습니다. 예를 들어, "o{1,3}"은 "fooooood"의 처음 세 개의 o를 찾습니다. "o{0,1}"은 "o?"와 같습니다. 쉼표와 숫자 사이에는 공백을 넣을 수 없습니다.
? 이 문자가 다른 한정 부호(*, +, ?, { n }, { n ,}, { n , m }) 의 바로 뒤에 나올 경우 일치 패턴은 제한적입니다. 기본값인 무제한 패턴은 가능한 많은 문자열을 찾는 데 반해 제한적인 패턴은 가능한 적은 문자열을 찾습니다. 예를 들어, "oooo" 문자열에서 "o+?"는 "o" 한 개만 찾고, "o+"는 모든 "o"를 찾습니다.
. "\n"을 제외한 모든 단일 문자를 찾습니다. "\n"을 포함한 모든 문자를 찾으려면 '[.\n]' 패턴을 사용하십시오.
( pattern ) pattern 을 찾아 검색한 문자열을 캡처합니다. 캡처한 문자열은 VBScript의 경우 SubMatches 컬렉션, Jscript의 경우 $0 ... $9 속성을 이용하여 결과로 나오는 Matches 컬렉션에서 추출할 수 있습니다. 괄호 문자인 ( )를 찾으려면 "\(" 또는 "\)"를 사용하십시오.
(?: pattern ) pattern 을 찾지만 검색한 문자열을 캡처하지 않습니다. 즉, 검색한 문자열을 나중에 사용할 수 있도록 저장하지 않는 비캡처 검색입니다. 이것은 패턴의 일부를 "or" 문자(|)로 묶을 때 유용합니다. 예를 들어, 'industr(?:y|ies)는 'industry|industries'보다 더 경제적인 식입니다.
(?= pattern ) 포함 예상 검색은 pattern 과 일치하는 문자열이 시작하는 위치에서 검색할 문자열을 찾습니다. 이것은 검색한 문자열을 나중에 사용할 수 있도록 캡처하지 않는 비캡처 검색입니다. 예를 들어, "Windows(?=95|98|NT|2000)"는 "Windows 2000"의 "Windows"는 찾지만 "Windows 3.1"의 "Windows"는 찾지 않습니다. 예상 검색은 검색할 문자열을 찾은 후 예상 검색 문자열을 구성하는 문자 다음부터가 아니라 마지막으로 검색한 문자열 바로 다음부터 찾기 시작합니다.
(?! pattern ) 제외 예상 검색은 pattern 과 일치하지 않는 문자열이 시작하는 위치에서 검색할 문자열을 찾습니다. 이것은 검색한 문자열을 나중에 사용할 수 있도록 캡처하지 않는 비캡처 검색입니다. 예를 들어, "Windows(?!95|98|NT|2000)"는 "Windows 3.1"의 "Windows"는 찾지만 "Windows 2000"의 "Windows"는 찾지 않습니다. 예상 검색은 검색할 문자열을 찾은 후 예상 검색 문자열을 구성하는 문자 다음부터가 아니라 마지막으로 검색한 문자열 바로 다음부터 찾기 시작합니다.
x | y x 또는 y 를 찾습니다. 예를 들어, "z|food"는 "z" 또는 "food"를 찾습니다. "(z|f)ood"는 "zood" 또는 "food"를 찾습니다.
[ xyz ] 문자 집합입니다. 괄호 안의 문자 중 하나를 찾습니다. 예를 들어, "[abc]"는 "plain"의 "a"를 찾습니다.
[^ xyz ] 제외 문자 집합입니다. 괄호 밖의 문자 중 하나를 찾습니다. 예를 들어, "[^abc]"는 "plain"의 "p"를 찾습니다.
[ a-z ] 문자 범위입니다. 지정한 범위 안의 문자를 찾습니다. 예를 들어, "[a-z]"는 "a"부터 "z" 사이의 모든 소문자를 찾습니다.
[^ a-z ] 제외 문자 범위입니다. 지정된 범위 밖의 문자를 찾습니다. 예를 들어, "[^a-z]"는 "a"부터 "z" 사이에 없는 모든 문자를 찾습니다.
\b 단어의 경계, 즉 단어와 공백 사이의 위치를 찾습니다. 예를 들어, "er\b"는 "never"의 "er"는 찾지만 "verb"의 "er"는 찾지 않습니다.
\B 단어의 비경계를 찾습니다. "er\B"는 "verb"의 "er"는 찾지만 "never"의 "er"는 찾지 않습니다.
\c x X 가 나타내는 제어 문자를 찾습니다. 예를 들어, \cM은 Control-M 즉, 캐리지 리턴 문자를 찾습니다. x 값은 A-Z 또는 a-z의 범위 안에 있어야 합니다. 그렇지 않으면 c는 리터럴 "c" 문자로 간주됩니다.
\d 숫자 문자를 찾습니다. [0-9]와 같습니다.
\D 비숫자 문자를 찾습니다. [^0-9]와 같습니다.
\f 폼피드 문자를 찾습니다. \x0c와 \cL과 같습니다.
\n 줄 바꿈 문자를 찾습니다. \x0a와 \cJ와 같습니다.
\r 캐리지 리턴 문자를 찾습니다. \x0d와 \cM과 같습니다.
\s 공백, 탭, 폼피드 등의 공백을 찾습니다. "[ \f\n\r\t\v]"와 같습니다.
\S 공백이 아닌 문자를 찾습니다. "[^ \f\n\r\t\v]"와 같습니다.
\t 탭 문자를 찾습니다. \x09와 \cI와 같습니다.
\v 수직 탭 문자를 찾습니다. \x0b와 \cK와 같습니다.
\w 밑줄을 포함한 모든 단어 문자를 찾습니다. "[A-Za-z0-9_]"와 같습니다.
\W 모든 비단어 문자를 찾습니다. "[^A-Za-z0-9_]"와 같습니다.
\x n n 을 찾습니다. 여기서 n 은 16진수 이스케이프 값입니다. 16진수 이스케이프 값은 정확히 두 자리여야 합니다. 예를 들어, '\x41'은 "A"를 찾고 '\x041'은 '\x04'와 "1"과 같습니다. 정규식에서 ASCII 코드를 사용할 수 있습니다.
\ num num 을 찾습니다. 여기서 num 은 양의 정수입니다. 캡처한 문자열에 대한 역참조입니다. 예를 들어, '(.)\1'은 연속적으로 나오는 동일한 문자 두 개를 찾습니다.
\ n 8진수 이스케이프 값이나 역참조를 나타냅니다. \ n 앞에 최소한 n개의 캡처된 부분식이 나왔다면 n 은 역참조입니다. 그렇지 않은 경우 n 이 0에서 7 사이의 8진수이면 n 은 8진수 이스케이프 값입니다.
\ nm 8진수 이스케이프 값이나 역참조를 나타냅니다. \ nm 앞에 최소한 nm개의 캡처된 부분식이 나왔다면 nm 은 역참조입니다. \ nm 앞에 최소한 n개의 캡처가 나왔다면 n 은 역참조이고 뒤에는 리터럴 m이 옵니다. 이 두 경우가 아닐 때 n과 m이 0에서 7 사이의 8진수이면 \ nm 은 8진수 이스케이프 값 nm을 찾습니다.
\ nml n 이 0에서 3 사이의 8진수이고 m 과 l 이 0에서 7 사이의 8진수면 8진수 이스케이프 값 nml 을 찾습니다.
\u n n 은 4 자리의 16진수로 표현된 유니코드 문자입니다. 예를 들어, \u00A9는 저작권 기호(©)를 찾습니다.



--------------------------------------------------------------------------------
Visual Basic Scripting Edition에서 정규 표현식 기능 이용하기
--------------------------------------------------------------------------------

정규 표현식이란 무엇인가요?
정 규 표현식이란 무엇일까요? 정규 표현식은 복잡한 패턴 매칭 기능과 텍스트형 검색-대체 알고리즘을 개발할 수 있는 툴을 제공합니다. Perl, egrep, awk, 또는 sed 개발자에게 정규 표현식이 무엇이냐고 물어보면, 정규 표현식은 텍스트와 데이터를 조작 할 때 사용할 수 있는 가장 강력한 유틸리티라고 대답할 것입니다. 개발자는 패턴을 만들어 특정 문자열을 매치키시킴으로써 데이터를 검색하거나 추출하거나 교체하는 일을 완벽하게 제어할 수 있습니다. 간단히 말해서, 정규 표현식을 정복하면 데이터도 정복할 수 있는 것입니다.

여기서는, VBScript 정규 표현식과 관련된 모든 개체를 설명하고, 일반적인 정규 표현식 패턴을 간략하게 살펴보고, 실제 코드로 정규 표현식을 사용하는 예를 들어보도록 합시다.

VBScript RegExp 개체
VBScript 5.0 버전은 정규 표현식을 하나의 개체로서 제공합니다. VBScript RegExp 개체는 설계 면에서 JScript의 RegExp 및 String 개체와 비슷하고, 구문 면에서는 Visual Basic과 일치합니다. 먼저, VBScipt RegExp 개체의 속성 과 메소드에 관해 알아봅시다. VBScript RegExp 개체는 사용자에게 세 개의 속성과 세 개의 메소드를 제공합니다.

속성  메소드  
Pattern Test(검색-문자열)  
IgnoreCase  Replace (검색-문자열, 대체-문자열)  
Global  Execute (검색-문자열  

Pattern - 정규 표현식을 정의하는 데 사용되는 문자열. 이 속성은 정규 표현식 개체를 사용하기 전에 먼저 설정해야 합니다. Pattern에 관한 내용은 아래에 자세히 설명되어 있습니다.
IgnoreCase - 문자열 안에서 일치하는 문자가 발생할 모든 가능성에 대해 정규 표현식을 테스트해야 하는지를 나타내는 부울 논리 속성입니다. IgnoreCase의 기본 설정 값은 False입니다.
Global - 문자열 안에서 일치하는 문자가 발생할 모든 가능성에 대해 정규 표현식을 테스트해야 하는지 여부를 나타내는 읽기 전용 부울 논리 속성입니다. Global의 기본 설정 값은 False입니다.
Test (문자열) - Test 메소드는 문자열을 매개 변수로 받아 그 문자열이 정규 표현식에 일치하면 True를 반환하고 그렇지 않으면 False를 반환합니다.
Replace (검색-문자열, 대체-문자열) - Replace 메소드는 두 개의 문자열을 매개 변수로 받습니다. 검색-문자열 안에 정규 표현식과 일치하는 문자열이 있으면, 그 문자열을 대체-문자열로 바꾸고, 바뀐 새로운 문자열을 반환합니다. 만일 일치하는 문자열이 없으면, 원래의 검색-문자열을 반환합니다.
Execute (검색-문자열) - Execute 메소드는 Matches 컬렉션 개체를 반환하는 점만 제외하면 Replace 메소드의 작동과 비슷합니다. Matches 컬렉션 개체에는 정규 표현식에 일치하는 각 문자열 에 대한 Match 개체가 들어 있습니다. 이 메소드는 원래의 문자열을 변경하지 않습니다.
더 자세한 내용과 예제 코드는,Microsoft Scripting Site  사이트를 참고하시기 바랍니다.

VBScript Matches 컬렉션 개체
앞에서 말했듯이, Matches 컬렉션 개체는 Execute 메소드를 실행한 경우에만 반환됩니다. 이 컬렉션 개체는 0개 이상의 Match 개체를 포함할 수 있으며, 이 개체의 속성은 읽기 전용입니다.

속성  
Count  
Item  

Count -컬렉션 안에 있는 Match 개체의 개수를 나타내는 읽기 전용 값입니다.
Item - Matches 컬렉션 개체에서 Match 개체를 임의로 액세스할 수 있게 만드는 읽기 전용 값입니다. For-Next 루프를 사용하면, Matches 컬렉션 개체에서 Match 개체를 순서대로 액세스할 수도 있습니다.
더 자세한 내용과 예제 코드는, Microsoft Scripting Site  를 참고하시기 바랍니다.

VBScript Match 개체
각 Mathes 개체에는 0개 이상의 Match 개체가 들어 있습니다. 이 Match 개체들은 정규 표현식을 사용했을 때 성공적으로 일치한 문자열 을 나타냅니다. 이 개체의 속성은 읽기 전용이며 일치하는 각 문자열에 대한 정보를 저장합니다.

속성  
FirstIndex
Length  
Value  

FirstIndex - 원래 문자열 안에서 정규 표현식에 일치하는 문자열의 위치를 나타내는 읽기 전용 값입니다. 이 색인은 위치를 기록하는데 0 기준 오프셋(문장의 첫 위치가 0번째임을 뜻함)을 사용합니다.
Length - 일치된 문자열의 전체 길이를 나타내는 읽기 전용 값입니다
Value - 일치된 값이나 텍스트를 나타내는 읽기 전용 값입니다. 이 값은Match 개체를 액세스할 때 사용되는 기본 값이기도 합니다.
더 자세한 내용과 예제 코드는, Microsoft Scripting Site  를 참고하시기 바랍니다.

패턴은 어떤 형태인가?
자, 지금까지는 이 모든 것이 지나치게 훌륭하고 환상적인 것으로 느껴지셨겠지만 실제는 어떨까요? 정규 표현식은 그 자체가 하나의 언어 라고 할 수 있지만, Perl에 익숙한 사용자들이라면 누구나 쉽게 사용할 수 있습니다. VBScript는 Perl로부터 패턴 셋을 유도하기 때문에, 주요 기능도 Perl과 비슷합니다. 그러면, 정규 표현식을 정의하는 데 사용되는 패턴 셋 몇 가지를 살펴보도록 합시다. 패턴 셋은 여러 범주와 영역으로 분류할 수 있습니다.

포지션 매칭

포지션 매칭은 ^와 $ (을)를 사용하여 문자열의 시작이나 끝을 검색합니다. 패턴 속성을 "^VBScript"로 설정할 경우, "VBScript is cool."에는 일치하지만, "I like VBScript."에는 일치하지 않습니다.

기호 기능
^ 문자열의 시작만 비교합니다

"^A"는 "An A+ for Anita."의 첫번째 "A"를 비교합니다.  
$  문자열의 끝을 비교합니다.

"t$"는 "A cat in the hat"의 마지막 "t"를 비교합니다.  
\b  임의의 워드 영역을 비교합니다

"ly\B"는 "possibly tomorrow."의 "ly"를 비교합니다  
\B  Matches any non-word boundary




리터럴

리 터럴은 영숫자 문자, ASCII, 8진수 문자, 16진수 문자, UNICODE, 또는 특수 구분 문자 등을 모두 총칭하는 말입니 다. 특별한 의미를 갖고 있는 몇몇 문자는 구분해야 합니다. 이들 특수 문자를 비교하려면, 정규 표현식을 문자 앞에 \를 사용해야 합니다.

기호 기능
영숫자  영문자와 숫자를 비교합니다.  
\n  새로운 라인을 비교합니다  
\f  용지 공급을 비교합니다  
\r  캐리지 리턴을 비교합니다.
\t  가로 탭을 비교합니다.  
\v  수평 탭을 비교합니다.  
\?  ?(을)를 비교합니다.  
\*  *(을)를 비교합니다.  
\+  +(을)를 비교합니다.  
\.  . (을)를 비교합니다.  
\|  |(을)를 비교합니다.
\{  {(을)를 비교합니다.  
\}  }(을)를 비교합니다.  
\\  \(을)를 비교합니다.  
\[  [(을)를 비교합니다.  
\]  ] (을)를 비교합니다.  
\(  ((을)를 비교합니다.  
\)  ) (을)를 비교합니다.
\xxx  8진수 xxx로 표시된 ASCII 문자를 비교합니다.

"\50"은 "(" 또는 chr (40) (을)를 비교합니다.  
\xdd  16진수 dd로 표시된 ASCII 문자를 비교합니다.

"\x28"은 "(" 또는 chr (40) (을)를 비교합니다.  
\uxxxx  UNICODE xxxx로 표시된 ASCII 문자를 비교합니다.

"\u00A3"은 "&pound;"를 비교합니다.  

문자 클래스

문 자 클래스를 사용하면 괄호 [] 안에 식을 삽입하여 사용자에 의해 정의된 그룹을 만들 수 있습니다. 문자 클래스의 문자들을 제외한 나머지 문자들을 사용하려면 [] 안에 ^(을)를 첫번째 문자로 삽입해야 합니다. 또한, 문자의 범위를 지정할 때는 대시를 사용합 니다. 예를 들어, 정규 표현식 "[^a-zA-Z0-9]"(은)는 영문자와 숫자를 제외한 모든 문자를 비교합니다. 추가로 구분 문 자와 리터럴로 묶인 문자셋도 있습니다.


기호 기능
[xyz] 문자셋 안에 포함되어 있는 임의의 한 문자를 비교합니다.

"[a-e]" (은)는 "basketball" 안의 "b"를 비교합니다.
[^xyz]  문자 셋 안에 포함되어 있지 않은 임의의 한 문자를 비교합니다.

"[^a-e]"는 "basketball" 안의 "s"를 비교합니다.  
.  \n을 제외한 임의의 문자를 비교합니다.  
\w  임의의 워드 문자를 비교합니다.
[a- zA-Z_0-9]와 동일함.  
\W  워드 문자를 제외한 임의의 문자를 비교합니다.
[^a-zA-Z_0-9]와 동일함.
\d  임의의 숫자를 비교합니다. [0-9].  
\D  숫자를 제외한 임의의 문자를 비교합니다.
[^0-9]와 동일함.
\s  임의의 공백 문자를 비교합니다.
[ \t\r\n\v\f]와 동일함.  
\S  공백 문자가 아닌 임의의 문자를 비교합니다.
[^ \t\r\n\v\f]와 동일함.  

반복

반복 매칭을 사용하면 정규 표현식 안에 있는 특정 절에 대한 검색을 여러 번 수행할 수 있습니다. 반복 매칭에서는 어떤 요소가 정규 표현식 안에서 몇 번 반복될 것인지를 지정할 수 있습니다.

기호 기능  
{x}  {x} 정규 표현식을 x번 비교합니다.

"\d{5}"는 5개의 숫자를 비교합니다.
(x,}  정규 표현식을 x번 이상 비교합니다.

"\s{2,}"는 최소한 두 개의 공백 문자를 비교합니다
{x,y}  정규 표현식을 x부터 y번까지 비교합니다.

"\d{2,3}"는 2개 이상 3개 미만의 숫자를 비교합니다. . 
?  0번 또는 한 번 비교합니다. {0,1}와 동일함.

"a\s?b"는 "ab" 또는 "a b"를 비교합니다.
*  0번 이상 비교합니다. {0,}와 동일함.  
+  한번 이상 비교합니다.{1,}과 동일함.  


교체와 그룹핑

교체와 그룹핑은 보다 복잡한 정규 표현식을 만들 때 사용합니다. 교체와 그룹핑 기술은 정규 표현식 안에 복잡한 절을 만들고, 보다 많은 융통성과 제어 능력을 제공합니다.

기호 기능  
()  절을 그룹핑하여 절을 만듭니다. 중첩하여 사용할 수도 있습니다.

"(ab)?(c)"는 "abc" 또는 "c"를 비교합니다.  
|  교체는 여러 절을 하나의 정규 표현식으로 조합한 다음 개별적인 절을 비교합니다.

"(ab)|(cd)|(ef)"는 "ab" 또는 "cd" 또는 "ef"를 비교합니다.

역방향 참조

프 로그래머는 역방향 참조를 통해 정규 표현식의 일부를 다시 참조할 수 있습니다. 그 방법은 괄호와 백슬레시(\) 뒤에 한 개의 숫자 를 사용하는 것입니다. 첫 번째 괄호 절은 \1로 참조되고 두 번째 괄호 절은 \2로 참조되는 식입니다.

기호 기능  
()\n  왼쪽 괄호에 있는 표현식을 n번 반복해서 문장을 비교합니다.

"(\w+)\s+\1"는 "hubba hubba" 같이, 한 열 안에서 두 번 나타나는 임의의 워드를 비교합니다.."  

예제로 확인하기!
이 예제는 지금까지 설명한 것을 적용한 것으로, 정규 표현식을 이용하여 유효한 입력 값이 입력되어 있는지 검사하는 간단한 응용 프로그 램입니다. 사용자가 유효한 값을 입력할 때까지 사용자에게 입력을 요구하는 프롬프트가 반복적으로 나타납니다. 먼저 초기 패턴을 자세 히 설명하겠습니다.

"^\s*((\$\s?)|(&pound;\s?))?((\d+(\.(\d\d)?)?)|(\.\d\d))\s*(UK|GBP|GB|USA|US|USD)?)\s*$"

"^\s*…" 와 "…\s*$" - 앞과 뒤에 몇 개의 공백 문자든지 올 수 있음을 나타내며, 입력은 반드시 라인 자체 위에 있어야 합니다.
"((\$\s?)|(?\s?))?" - 옵션 공백 앞에 오는 옵션 $ 또는 ￡ 기호를 나타냅니다..
"((\ d+(\.(\d\d)?)?)|(\.\d\d))" - 생략 가능한 십진수 소수점 2자리 또는 십진수 소수점 2 자리수 앞에 오는 한 자리 이상의 숫자를 찾습니다. 이 말은 6., 23.33, .88와 같은 숫자는 사용 가능하나 5.5는 사용할 수 없음을 의미합 니다.
"\s*(UK|GBP|GB|USA|US|USD)?" - 문자열에 대하여 생략 및 사용이 가능하고 인수 앞에서 유효한 공백 문자의 수를 의미합니다.
본 예제의 경우, 정규 표현식은 사용자의 US 달러 또는 영국 파운드 입력 여부를 결정하는 데 사용됩니다. 필자는 ￡, UK, GBP, 또는 GB 문자열을 검색하고 있습니다. 정규 표현식 결과가 참이면 사용자는 영국 파운드 단위의 액수를 입력한 것이라고 보면 됩니다. 그렇지 않다면 USD 통화를 사용한 것이겠지요.

이 코드를 사용하려면 코드를 CurrencyEx.vbs로 저장하고 Windows Script Host를 이용해 코드를 실행시킨 다음 VB에 복사하거나(이 경 우, Microsoft VBScript 정규 표현식에 참조를 추가할 필요가 있음) HTML 파일에 코드를 포함시킵니다.

Sub CurrencyEx
Dim inputstr, re, amt
Set re = new regexp  'Create the RegExp object

'Ask the user for the appropriate information
inputstr = inputbox("I will help you convert USA and CAN currency. Please enter the amount to convert:")
'Check to see if the input string is a valid one.
re.Pattern = "^\s*((\$\s?)|(&pound;\s?))?((\d+(\.(\d\d)?)?)|(\.\d\d))\s*(UK|GBP|GB|USA|US|USD)?)\s*$"
re.IgnoreCase = true
do while re.Test(inputstr) <> true
'Prompt for another input if inputstr is not valid
inputstr = inputbox("I will help you convert USA and GBP currency. Please enter the amount to(USD or GBP):")

loop
'Determine if we are going from GBP->US or USA->GBP
re.Pattern = "&pound;|UK|GBP|GB"
if re.Test(inputstr) then
'The user wants to go from GBP->USD

re.Pattern = "[a-z$&pound; ]"
re.Global = True
amt = re.Replace(inputstr, "")
amt = amt * 1.6368
amt = cdbl(cint(amt * 100) / 100)
amt = "$" & amt
else
'The user wants to go from USD->GBP

re.Pattern = "[a-z$&pound; ]"
re.Global = True
amt = re.Replace(inputstr, "")
amt = amt * 0.609
amt = cdbl(cint(amt * 100) / 100)
amt = "&pound;" & amt
end if

msgbox ("Your amount of: " & vbTab & inputstr & vbCrLf & "is equal to: " & vbTab & amt)
End sub


더욱 강력한 파워를!
Visual Basic 개발자들이 정규 표현식을 사용할 수 있도록 VBScript 정규 표현식 엔진은 COM 개체로 구현되어 왔습니다. 이 경우, 정규 표현식은 보다 강력한 힘을 발휘하게 되는데 즉, Visual Basic 또는 C와 같은 VBScript 외의 다양한 소스로부터 호 출이 가능하기 때문입니다. 예컨대, 필자는 Outlook(R) 97, Outlook 98 또는 Outlook 2000의 접속 목록 을 통해 내용을 추적하고 특정 도시에 사는 접속자 이름을 반환하는 작은 Visual Basic 응용 프로그램을 만든 경험이 있습니 다.

이 프로그램은 매우 간단합니다. 먼저 사용자는 검색할 대상 도시명을 입력하고, 구분 표시에는 쉼표를 사용합니 다. 그런 다음, Outlook에 작성할 새 접속 폴더의 이름을 입력합니다. 각 접속이 일치하면 이 내용은 새로 작성된 접속 폴더 에 복사됩니다.

Microsoft VBScript 정규 표현식 개체 라이브러리에 참조를 추가할 경우 몇 가지 유용한 조기 바인딩 기능(early binding)을 사용할 수 있습니다. 이 조기 바인딩 개체는 몇 가지 이점을 제공하는데 즉, 속도 가 빠르고 코딩 프로그램 사용이 간편하다는 점입니다. "new RegExp"가 즉시 사용되므로 사용자는 개체에 참조를 추가하고 VBScript코드를 오려내어 VB에 그대로 붙일 수 있습니다.

이러한 이유로 필자 또한 정규 표현식과 동일한 방 법을 사용하여 Outlook 9.0 개체 라이브러리를 참조한 적이 있습니다. 물론, 여러분은 여전히 CreateObject() (을)를 사용하여 COM 호출을 생성시킬 수도 있으나 상기 방법을 더 간편하게 사용할 수 있을 것입니다. 이 개체들을 작성한 후  간단한 코드를 사용하여 도시명과 일치하는 폴더와 트리를 액세스할 수 있습니다. 본인은 2개의 모음 개체를 가지는 작은 도움 함수 compareCollectionObjects(x,y)(을)를 사용/비교하여 일치 여부를 확인합니다.

이 프로그램을 사용하려면 단순히 코드를 VB(참조 추가에 필요함)에 복사한 다음 FindCityContacts() 함수를 호출하면 됩니다. .


Sub FindCityContacts()

   Dim strTemp
   Dim index
  Dim citySearch
   Dim myNameSpace, myContacts, newCityContacts, newCityContactsName
   Dim contact
   Dim newContact

   'Set the early binding objects
   Dim re as New RegExp  
   Dim myApp as New Outlook.Application

   re.Global = True
   re.IgnoreCase = True

   citySearch = InputBox("Please enter the cities of your search, separated by commas.")
   newCityContactsName = InputBox("Please enter the new contact folder name")

   'Set some of the objects and create the new Contacts folder
   Set myNameSpace = myApp.GetNamespace("MAPI")
  'olFolderContacts = 10
   Set myContacts = myNameSpace.GetDefaultFolder(10)  
   Set newCityContacts = myContacts.Folders.Add(newCityContactsName)

   'Set cities, using regular expressions to contain the city names
   re.Pattern = "[^,]+"
  Set cities = re.Execute(citySearch)
   For Each city In cities

      'Set citytokens to be the individual tokens in the city name
      'Then we compare them to the address tokens in each contact
       re.Pattern = "[^ ]+"
       Set citytokens = re.Execute(city)

       For i = 1 to myContacts.Items.Count
           re.Pattern = "[^ ]+"
           Set contact = myContacts.Items.Item(i)

           Set HomeAddressCityTokens = re.Execute(contact.HomeAddressCity)
           If compareCollectionObjects(HomeAddressCityTokens, citytokens) = 1 Then

               Set newContact = contact.Copy
               newContact.Move newCityContacts
           End If

           Set OtherAddressCityTokens = re.Execute(contact.OtherAddressCity)
           If compareCollectionObjects(OtherAddressCityTokens, citytokens) = 1 Then
               Set newContact = contact.Copy
               newContact.Move newCityContacts
           End If

           Set BusinessAddressCityTokens = re.Execute(contact.BusinessAddressCity)
          If compareCollectionObjects(BusinessAddressCityTokens, citytokens) = 1 Then
               Set newContact = contact.Copy
              newContact.Move newCityContacts
           End If
       Next
  Next

MsgBox "done"

End Sub

'This function is provided as a helper-function
' to compare two collection objects.
Function compareCollectionObjects(x, y)

   Dim index
   Dim flag
   flag = 1

   If x.Count <> y.Count Then
       flag = 0
  Else
       index = x.Count

       For i = 0 To (index - 1)
           If StrComp(x.Item(i), y.Item(i), 1) Then
               flag = 0
           End If
       Next
   End If

   compareCollectionObjects = flag

End Function


넘치는 정보!
앞 에서 보았듯이, Microsoft는 정규 표현식(버전 5.0)을 이용하여 VBSscript를 강화시키는데, 이것은 VBScript 와 Jscript 비교에서 가장 중요한 부분이었습니다. 스크립팅 엔진 버전 5.0에서 우리는 VBScript의 기능을 향상시키는 데 특히 비중을 두었습니다. 이제 여러분은 정규 표현식을 추가시킴으로써 데이터를 보다 확실하게 관리하고 그 효과를 높일 수 있게 되었으며, 클라이언트와 서버에서 보다 강력한 웹 응용 프로그램을 만들 수 있게 되었습니다.

AND

즉석 HTML 에디터 / 폰트 확인프로그램 / 블로그홈

WEB/Javascript 2006. 9. 17. 22:03
http://www.squarefree.com/htmledit/

http://typetester.maratz.com/

http://www.allblog.net/Home/
AND

CSS정리

WEB/Javascript 2006. 9. 11. 02:24

ㅁ font(글꼴) ㅁ text(글자)ㅁ background(배경)
ㅁ border(테두리)ㅁ margin(여백)ㅁ padding(안쪽여백)
ㅁ list(목록)ㅁ position(위치)ㅁ classification(식별)
ㅁ table(표)ㅁ Printing(프린트)ㅁ scrollbar(스크롤바 색상)
ㅁ filter(필터 : Alpha, Blur, Chroma, FlipH, FlipV, Gray, Invert, Light, Mask, Xray)
○○
/ CSS(Cascading Style Sheet) 의 속성 및 속성값
ㅁ NN: Netscape, ㅁ IE: Internet Explorer, ㅁ W3C: Web Standard
○○
/ FONT(글꼴)TOP
CSSScript내 용NNIEW3C
fontfont글꼴에 관련된 속성을 설정4.04.0CSS1
font-familyfontFamily글꼴이름을 설정4.03.0CSS1
font-sizefontSize글자 크기를 설정4.03.0CSS1
font-stylefontStyle글자의 형태를 설정4.04.0CSS1
font-variantfontVariant글자의 대/소문자 설정6.03.0CSS1
font-weightfontWeight글자의 두께 설정4.04.0CSS1
○○
/ TEXT(글자)TOP
CSSScript내 용NNIEW3C
colorcolor글자 색 설정4.03.0CSS1
directiondirection글자를 표시하는 방향 설정CSS2
letter-spacingletterSpacing글자 사이의 간격 설정6.03.0CSS1
text-aligntextAlign글자의 정렬 설정4.04.0CSS1
text-decorationtextDecoration글자의 꾸밈 및 형식 설정4.04.0CSS1
text-indenttextIndent문단의 첫 줄 들여쓰기 설정4.04.0CSS1
text-transformtextTransform대.소문자 변환 여부 설정4.04.0CSS1
line-heightlineHeight줄 간격 설정4.04.0CSS1
text-underline-positiontextUnderlinePosition밑줄이 그어지는 위치 지정5.5
word-spacingwordSpacing단어 사이의 간격 설정6.0CSS1
ime-modeimeMode입력모드 IME(한/영) 설정5.0CSS1
○○
/ BACKGROUND(배경)TOP
CSSScript내 용NNIEW3C
backgroundbackground웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정 가능6.03.0CSS1
background-attachment backgroundAttachment 배경그림을 고정 또는 스크롤 설정6.03.0CSS1
background-colorbackgroundColor배경색 설정4.04.0CSS1
background-imagebackgroundImage배경그림 설정4.04.0CSS1
background-positionbackgroundPosition배경그림 위치 설정6.03.0CSS1
background-repeatbackgroundRepeat배경그림 반복 여부 설정4.04.0CSS1
○○
/ BORDER(테두리)TOP
CSSScript내 용NNIEW3C
borderborder테두리의 너비, 형식, 색을 설정 두 개이상 설정 가능4.04.0CSS1
border-topborderTop위쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-bottomborderBottom아래 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-leftborderLeft왼쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-rightborderRight오른쪽 테두리의 너비, 형식, 색등을 설정6.03.0CSS1
border-colorborderColor테두리의 색을 설정6.03.0CSS1
border-top-colorborderTopColor위쪽 테두리의 색을 설정6.04.0CSS2
border-bottom-colorborderBottomColor아래 테두리의 색을 설정6.04.0CSS2
border-left-colorborderLeftColor왼쪽 테두리의 색을 설정6.04.0CSS2
border-right-colorborderRightColor오른쪽 테두리의 색을 설정6.04.0CSS2
border-styleborderStyle테두리 형식 설정6.03.0CSS1
border-top-styleborderTopStyle위쪽 테두리 형식 설정6.04.0CSS2
border-bottom-styleborderBottomStyle아래 테두리 형식 설정6.04.0CSS2
border-left-styleborderLeftStyle왼쪽 테두리 형식 설정6.04.0CSS2
border-right-styleborderRightStyle오른쪽 테두리 형식 설정6.04.0CSS2
border-widthborderWidth테두리 두께 설정4.04.0CSS1
border-top-widthborderTopWidth위쪽 테두리 두께 설정4.04.0CSS1
border-bottom-widthborderBottomWidth아래 테두리 두께 설정4.04.0CSS1
border-left-widthborderLeftWidth왼쪽 테두리 두께 설정4.04.0CSS1
border-right-widthborderRightWidth오른쪽 테두리 두께 설정4.04.0CSS1
○○
/ MARGIN(여백)TOP
CSSScript내 용NNIEW3C
marginmargin여백의 속성을 설정4.04.0CSS1
margin-topmarginTop위쪽 여백 설정4.03.0CSS1
margin-bottommarginBottom아래 여백 설정4.04.0CSS1
margin-leftmarginLeft왼쪽 여백 설정4.03.0CSS1
margin-rightmarginRight오른쪽 여백 설정4.03.0CSS1
○○
/ PADDING(테두리와 내용과의간격 = 안쪽여백을 뜻함)TOP
CSSScript내 용NNIEW3C
paddingpadding테두리와 글자 사이 간격 설정4.0
padding-toppaddingTop위쪽 테두리와 글자 사이 간격 설정4.04.0CSS1
padding-bottompaddingBottom아래 테두리와 글자 사이 간격 설정4.04.0CSS1
padding-leftpaddingLeft왼쪽 테두리와 글자 사이 간격 설정4.04.0CSS1
padding-rightpaddingRight오른쪽 테두리와 글자 사이 간격 설정4.04.0CSS1
○○
/ LIST(목록)TOP
CSSScript내 용NNIEW3C
displaydisplay객체에 인라인 또는 블럭단위의 박스를 생성 4.04.0CSS1
list-stylelistStyle목록의 형식,위치,그림의 속성을 설정6.03.0CSS1
list-style-imagelistStyleImage목록의 표시를 그림으로 설정6.03.0CSS1
list-style-positionlistStylePosition목록 항목의 위치를 설정6.03.0CSS1
list-style-typelistStyleType목록의 항목 표시자의 속성을 설정4.04.0CSS1
○○
/ POSITION(위치)TOP
CSSScript내 용NNIEW3C
heightheight영역의 높이를 설정6.03.0CSS1
widthwidth영역의 너비를 설정4.04.0CSS1
toptop상단 테두리에서 떨어진 간격 설정4.04.0CSS2
bottombottom하단 테두리에서 떨어진 간격 설정5.0CSS2
leftleft상단 테두리을 기준으로 왼쪽 간격을 설정4.04.0CSS2
rightright상단 테두리을 기준으로 오른쪽 간격을 설정5.0CSS2
clipclip4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 설정6.04.0CSS2
overflowoverflowwidth 속성이나 height 속성에 의해서 내용에 따라 화면의 크기를 제어6.04.0CSS2
positionposition화면에 표시할 위치를 설정6.04.0CSS2
visibilityvisibility화면에 표시 여부를 설정6.03.0CSS1
z-indexzIndexNetscape의 와 같은 개념6.04.0CSS2
○○
/ CLASSIFICATION(식별)TOP
CSSScript내 용NNIEW3C
cursorcursor커서의 모양을 설정6.04.0CSS2
floatfloat상위 요소안에서 좌.우로 이동할 것인가를 설정4.04.0CSS1
clearclear상위 요소안에서 좌.우로 이동하지 않고 줄바꿈 설정4.04.0CSS1
zoomzoom객체의 크기를 확대/축소5.5CSS1
linklink링크 설정 : 링크관련 가상 클래스(link,visited,active,hover)3.0CSS1
○○
/ TABLE(표)TOP
CSSScript내 용NNIEW3C
border-collapseborderCollapse표(TABLE)에 셀간격 설정5.0CSS2
table-layouttableLayout테이블(표)의 테이블 셀(cell), 줄(row), 컬럼(column)들의 배치에 사용되는 기능5.0CSS2
○○
/ Printing (프린트)TOP
CSSScript내 용NNIEW3C
page-break-afterpageBreakAfter프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정7.04.0CSS2
page-break-beforepageBreakBefore프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정7.04.0CSS2
○○
/ SCROLLBAR COLOR(스크롤바 색상)TOP
CSS내 용NNIEW3C
scrollbar-3dlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색상 설정5.5CSS1
scrollbar-arrow-color스크롤바의 화살표 박스의 화살표에 색상을 설정5.5CSS1
scrollbar-base-color스크롤바의 arrow, shadow, darkshadow를 제외한 기본적인 곳에 설정5.5CSS1
scrollbar-darkshadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽 가장 자리에 색상 설정5.5CSS1
scrollbar-face-color스크롤바의 스클롤 박스와 화살표 박스 그리고 트랙의 표면 설정5.5CSS1
scrollbar-highlight-color스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리의 하이라이트 부분과 트랙 설정5.5CSS1
scrollbar-shadow-color스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽의 그림자 부분 설정5.5CSS1
scrollbar-track-color스크롤바의 트랙에 설정5.5CSS1
○○
/ FILTER(필터)TOP
CSSScript내 용NNIEW3C
AlphaAlpha그림이나 글자에 투명도를 조정할 수 있는 명령어4.0
BlurBlur흐리게 하는 효과4.0
ChromaChroma지정된 특정색을 투명하게 하는 효과4.0
DropshadowDropshadow특정위치에 그림자를 만들어 줍니다4.0
FlipHFlipH이미지나 좌우가 바뀝니다.4.0
FlipVFlipV이미지나 상하가 바뀝니다.4.0
GlowGlow글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다4.0
GrayGray흑백 이미지를 만듭니다.4.0
InvertInvert색조, 순도, 명도(필름 효과)를 반전4.0
LightLight조명 효과를 주어 이미지의 특정 부분을 밝게 해줍니다.4.0
MaskMask불투명한 것은 투명한 마스크를 씌우고 투명한 것은 지정된 색으로 마스크를 씌워 줍니다.4.0
ShadowShadow지정하는 색상과 방향으로 그림자를 만들어 줍니다.4.0
WaveWave물결 형태의 웨이브를 만들어 주는 필터입니다.4.0
XrayXrayX-ray 사진 같은 효과를 나타내 주는 필터입니다.4.0
AND

IE계층도

WEB/Javascript 2006. 9. 7. 17:25

0

AND

티스토리툴바