사용자가 정의한 엘레멘트를 참조한다.
|
Script | [propVal=]parentObj.customObj.propName; |
| HTML | <CUSTOMTAG:className propName="propVal">innerString</CUSTOMTAG:className> |
사용자 정의 엘레멘트를 생성하기 위해서는 이름자리(namespace)를 지정하여야 한다. 이름자리를 지정하지 않으면 오류를 발생시키지는 않지만 인식하지 못하는 태그로 인정되고 당연히 다른 엘레멘트를 포함할 수 없으며 적용될 비헤이버를 포함할 수 없다.
이름자리를 선언하기 위햐여 HTML 엘레멘트의 xmlns 애트리뷰트를 사용한다.
사용자 정의 엘레멘트 태그를 정의하기 위하여 @media 속에서 CUSTOMTAG를 정의하여야 한다.
CUSTOM 태그는 DHTML(Dynamic HTML)에서 사용하면 더 유용하고 CSS(카스케이딩 스타일쉬트)도 다른 엘레멘트들과 같은 방식으로 적용된다.
이 개체는 IE5 이상에서 엘레멘트와 스크립트를 사용할 수 있다.
이 엘레멘트는 인라인 엘레멘트이다.
이 엘레멘트는 종료태그가 필요하다.
 object ⇒ | custom⇒ |  | ⇒ |        |    | |
custom 설명을 위한 예제
|
|
| <style> @media all { CUSTOMTAG:green { behavior:url{../public/hilite.htc);color:green; }} .testClass{line-height:1.2em} </style> <customtag:green id="oObj" dir="ltr" style="background:efd" blockdirection="ltr" class="testClass" lang="ko" language="javascript" title="CUSTOM Title">CUSTOMTAG 내용 <sub>내부 SUB</sub> <span>CUSTOMTAG 내부 SPAN</span></customtag:green> |
| object ⇒ | custom⇒ | | ⇒ | | | |
| 컬렉션 | 설명과 예제 코드 | 결과 | 참고 |
|---|---|---|---|
| all | 개체에 포함되어 있는 모든 엘레멘트들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.all.length)</SCRIPT> | |||
| behaviorUrns | 엘레멘트에 첨부된 비해이버(behavior)들을 인식하는 주소(URN) 문자열들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.behaviorUrns.length)</SCRIPT> | |||
| children | 개체의 바로 종속된 DHTML 개체들인 자식들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.children.length)</SCRIPT> | 2 | ||
| filters | 개체에 적용된 모든 filter들의 배열변수를 참조하고 반환한다. | ||
| <SCRIPT>document.write(oObj.filters.length)</SCRIPT> | |||
| object ⇒ | custom⇒ | | ⇒ | | | |
| 개체 | 설명 | 결과 |
|---|---|---|
| currentStyle | 공통 스타일쉬트, 인라인 스타일 HTML 애트리뷰트등으로 지정한 개체의 카스케이딩 형식과 스타일들 참조한다. | |
| <SCRIPT>document.write(oObj.currentStyle.color)</SCRIPT> | ||
| document | 주어진 윈도우 개체의 HTML 문서를 참조하는 개체이다. | |
| <SCRIPT>document.write(oObj.document.linkColor)</SCRIPT> | ||
| runtimeStyle | 덮어 씌워진 최종 공통 스타일쉬트, 인라인 스타일 HTML 애트리뷰트등으로 지정한 개체의 카스케이딩 형식과 스타일들 참조한다. | |
| <BUTTON onclick="oObj.runtimeStyle.color='red'">적색으로</BUTTON> 단추를 클릭하고 예제의 색상을 확인하라. |
||
| style | 개체의 현재 모든 가능한 인라인 스타일 설정들을 참조한다. | |
| <SCRIPT>document.write(oObj.style.cssText.length))</SCRIPT> | 0 | |
| object ⇒ | custom⇒ | | ⇒ | | | |
| object ⇒ | custom⇒ | | ⇒ | | | |
| style | script |
|---|---|
| {accelerator:val} | obj.style.accelerator[=val] |
| ⇒ 개체가 단축키를 가지고 있는가를 부울값으로 반환하거나 설정한다. | |
| {background:val} | obj.style.background[=val] |
| ⇒ 개체의 배경 속성들을 5개까지 반환하거나 설정한다. | |
| {background-attachment:val} | obj.style.backgroundAttachment[=val] |
| ⇒ 문서 속의 배경 이미지를 개체에 배열 방식을 반환하거나 설정한다. | |
| {background-color:val} | obj.style.backgroundColor[=val] |
| ⇒ 개체의 배경에 깔리는 색상을 반환하거나 설정한다. | |
| {background-image:val} | obj.style.backgroundImage[=val] |
| ⇒ 개체의 배경 이미지를 반환하거나 설정한다 . | |
| {background-position:val} | obj.style.backgroundPosition[=val] |
| ⇒ 개체의 배경 이미지의 위치를 반환하거나 설정한다. | |
| {background-position-x:val} | obj.style.backgroundPositionX[=val] |
| ⇒ backgroundPosition 속성의 x 좌표를 반환하거나 설정한다. | |
| {background-position-y:val} | obj.style.backgroundPositionY[=val] |
| ⇒ backgroundPosition 속성의 y 좌표를 반환하거나 설정한다. | |
| {background-repeat:val} | obj.style.backgroundRepeat[=val] |
| ⇒ 개체 backgroundImage 속성의 반복 방식을 반환하거나 설정한다. | |
| {behavior:val} | obj.style.behavior[=val] |
| ⇒ DHTML behavior의 소개 위치를 반환하거나 설정한다. | |
| {border:val} | obj.style.border[=val] |
| ⇒ 개체의 테두리 속성들을 일괄적으로 반환하거나 설정한다. | |
| {border-bottom:val} | obj.style.borderBottom[=val] |
| ⇒ 개체의 바닥 테두리 속성들을 반환하거나 설정한다. | |
| {border-bottom-color:val} | obj.style.borderBottomColor[=val] |
| ⇒ 개체의 바닥 테두리의 색상을 반환하거나 설정한다. | |
| {border-bottom-style:val} | obj.style.borderBottomStyle[=val] |
| ⇒ 개체의 바닥 테두리 형태를 반환하거나 설정한다. | |
| {border-bottom-width:val} | obj.style.borderBottomWidth[=val] |
| ⇒ 개체의 바닥 테두리의 두께를 반환하거나 설정한다. | |
| {border-color:val} | obj.style.borderColor[=val] |
| ⇒ 개체의 테두리 색상들을 반환하거나 설정한다. | |
| {border-left:val} | obj.style.borderLeft[=val] |
| ⇒ 개체 왼쪽 테두리의 속성들을 반환하거나 설정한다. | |
| {border-left-color:val} | obj.style.borderLeftColor[=val] |
| ⇒ 개체 왼쪽 테두리의 색상을 반환하거나 설정한다. | |
| {border-left-style:val} | obj.style.borderLeftStyle[=val] |
| ⇒ 개체 왼쪽 테두리의 형태를 반환하거나 설정한다. | |
| {border-left-width:val} | obj.style.borderLeftWidth[=val] |
| ⇒개체 왼쪽 테두리의 두께를 반환하거나 설정한다. | |
| {border-right:val} | obj.style.borderRight[=val] |
| ⇒ 개체 오른쪽 테두리의 속성들을 반환하거나 설정한다. | |
| {border-right-color:val} | obj.style.borderRightColor[=val] |
| ⇒ 개체 오른쪽 테두리의 색상을 반환하거나 설정한다. | |
| {border-right-style:val} | obj.style.borderRightStyle[=val] |
| ⇒ 개체 오른쪽 테두리의 형태를 반환하거나 설정한다. | |
| {border-right-width:val} | obj.style.borderRightWidth[=val] |
| ⇒ 개체 오른쪽 테두리의 두께를 반환하거나 설정한다. | |
| {border-style:val} | obj.style.borderStyle[=val] |
| ⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리들의 형태를 일괄적으로 반환하거나 설정한다. | |
| {border-top:val} | obj.style.borderTop[=val] |
| ⇒ 개체 위쪽 테두리의 속성들을 반환하거나 설정한다. | |
| {border-top-color:val} | obj.style.borderTopColor[=val] |
| ⇒ 개체 위쪽 테두리의 색상을 반환하거나 설정한다. | |
| {border-top-style:val} | obj.style.borderTopStyle[=val] |
| ⇒ 개체 위쪽 테두리의 형태를 반환하거나 설정한다. | |
| {border-top-width:val} | obj.style.borderTopWidth[=val] |
| ⇒ 개체 위쪽 테두리의 두께를 반환하거나 설정한다. | |
| {border-width:val} | obj.style.borderWidth[=val] |
| ⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리들의 두께를 일괄적으로 반환하거나 설정한다. | |
| {bottom:val} | obj.style.bottom[=val] |
| ⇒ 개체 체계도상 아래쪽 개체와의 거리를 반환하거나 설정한다. | |
| {clear:val} | obj.style.clear[=val] |
| ⇒ 개체에서 부동(float)부분의 면의 왼쪽, 오른쪽 혹은 양쪽으로 표현이 허용하는가를 반환하거나 설정한다. | |
| {clip:val} | obj.style.clip[=val] |
| ⇒ 개체의 어느 부분을 보이게 할 것인가를 반환하거나 설정한다. | |
| {color:val} | obj.style.color[=val] |
| ⇒ 개체의 글자 색상을 반환하거나 설정한다. | |
| {cursor:val} | obj.style.cursor[=val] |
| ⇒ 개체위에서 마우스 포인터의 보이는 형태를 반환하거나 설정한다. | |
| {direction:val} | obj.style.direction[=val] |
| ⇒ 개체의 읽는 순서를 반환하거나 설정한다. | |
| {display:val} | obj.style.display[=val] |
| ⇒ 개체를 디스플레이할 것인가를 반환하거나 설정한다. | |
| {filter:val} | obj.style.filter[=val] |
| ⇒ 개체에 적용되는 필터들의 컬렉션(filters)을 반환하거나 설정한다. | |
| {font:val} | obj.style.font[=val] |
| ⇒ 개체의 font 속성들 조합하여 반환하거나 설정하거나, 사용자 선호 글꼴들을 6개까지 반환하거나 설정한다. | |
| {font-family:val} | obj.style.fontFamily[=val] |
| ⇒ 사용한 글꼴의 이름들을 반환하거나 설정한다. | |
| {font-size:val} | obj.style.fontSize[=val] |
| ⇒ 개체 텍스트에서 사용한 글꼴의 크기를 나타내는 수치를 반환하거나 설정한다. | |
| {font-style:val} | obj.style.fontStyle[=val] |
| ⇒ 개체의 글꼴 형태을 italic, normal, oblique등으로 반환하거나 설정한다. | |
| {font-variant:val} | obj.style.fontVariant[=val] |
| ⇒ 개체의 문자를 작은 대문자들로 변형할 것인가를 반환하거나 설정한다. | |
| {font-weight:val} | obj.style.fontWeight[=val] |
| ⇒ 개체의 글꼴 두께를 반환하거나 설정한다. | |
| 없슴 | obj.style.hasLayout |
| ⇒ 개체가 레이아웃(layout)을 가지고 있는가를 부울값으로 반환한다. | |
| {height:val} | obj.style.height[=val] |
| ⇒ 개체의 높이를 반환하거나 설정한다. | |
| {layout-flow:val} | obj.style.layoutFlow[=val] |
| ⇒ 개체 내용의 방향이나 흐름방향을 반환하거나 설정한다. | |
| {layout-grid:val} | obj.style.layoutGrid[=val] |
| ⇒ 문자들의 레이아웃을 지정하는 문서 그리드(grid) 속성들을 일괄적으로 반환하거나 설정한다. | |
| {layout-grid-mode:val} | obj.style.layoutGridMode[=val] |
| ⇒ 텍스트 레이아웃 그리드에 가로, 세로가 사용되었는가를 반환하거나 설정한다 | |
| {left:val} | obj.style.left[=val] |
| ⇒ 개체 체계도상 왼쪽 개체와의 거리를 반환하거나 설정한다.. | |
| {letter-spacing:val} | obj.style.letterSpacing[=val] |
| ⇒ 개체 속에서 글자들 사이의 간격을 반환하거나 설정한다. | |
| {line-height:val} | obj.style.lineHeight[=val] |
| ⇒ 개체 속에서 줄과 아래줄과의 거리를 반환하거나 설정한다. | |
| {margin:val} | obj.style.margin[=val] |
| ⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 마진(주변 개체와의 간격)들의 두께를 일괄적으로 반환하거나 설정한다. | |
| {margin-bottom:val} | obj.style.marginBottom[=val] |
| ⇒ 개체의 아래쪽 마진 두께을 반환하거나 설정한다. | |
| {margin-left:val} | obj.style.marginLeft[=val] |
| ⇒ 개체의 왼쪽 마진 두께을 반환하거나 설정한다. | |
| {margin-right:val} | obj.style.marginRight[=val] |
| ⇒ 개체의 오른쪽 마진 두께을 반환하거나 설정한다. | |
| {margin-top:val} | obj.style.marginTop[=val] |
| ⇒ 개체의 위쪽 마진 두께을 반환하거나 설정한다. | |
| {overflow:val} | obj.style.overflow[=val] |
| ⇒ 개체의 내용이 높이나 너비를 초과하였을 때 어떻게 처리할 것인가를 나타내는 값을 반환하거나 설정한다. | |
| {overflow-x:val} | obj.style.overflowX[=val] |
| ⇒ 개체의 내용이 너비를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다. | |
| {overflow-y:val} | obj.style.overflowY[=val] |
| ⇒ 개체의 내용이 높이를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다. | |
| {padding:val} | obj.style.padding[=val] |
| ⇒ 개체들 사이, 그들에 소속된 마진, 보더까지의 간격을 반환하거나 설정한다. | |
| {padding-bottom:val} | obj.style.paddingBottom[=val] |
| ⇒ 개체의 아래쪽 보더와 내용 사이의 간격을 반환하거나 설정한다. | |
| {padding-left:val} | obj.style.paddingLeft[=val] |
| ⇒ 개체의 왼쪽 보더와 내용 사이의 간격을 반환하거나 설정한다. | |
| {padding-right:val} | obj.style.paddingRight[=val] |
| ⇒ 개체의 오른쪽 보더와 내용 사이의 간격을 반환하거나 설정한다. | |
| {padding-top:val} | obj.style.paddingTop[=val] |
| ⇒ 개체의 위쪽 보더와 내용 사이의 간격을 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelBottom[=val] |
| ⇒ 개체의 아래쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelHeight[=val] |
| ⇒ 개체의 높이를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelLeft[=val] |
| ⇒ 개체의 왼쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelRight[=val] |
| ⇒ 개체의 오른쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelTop[=val] |
| ⇒ 개체의 위쪽 위치를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.pixelWidth[=val] |
| ⇒ 개체의 너비를 픽셀단위로 반환하거나 설정한다. | |
| 없슴 | obj.style.posBottom[=val] |
| ⇒ bottom 애트리뷰트로 지정된 단위로 개체의 아래쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posHeight[=val] |
| ⇒ height 애트리뷰트로 지정된 단위로 개체의 높이를 반환하거나 설정한다. | |
| {position:val} | obj.style.position[=val] |
| ⇒ 개체의 위치시킴 방식을 반환하거나 설정한다. | |
| 없슴 | obj.style.posLeft[=val] |
| ⇒ left 애트리뷰트로 지정된 단위로 개체의 왼쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posRight[=val] |
| ⇒ right 애트리뷰트로 지정된 단위로 개체의 오른쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posTop[=val] |
| ⇒ top 애트리뷰트로 지정된 단위로 개체의 위쪽 위치를 반환하거나 설정한다. | |
| 없슴 | obj.style.posWidth[=val] |
| ⇒ width 애트리뷰트로 지정된 단위로 개체의 너비를 반환하거나 설정한다. | |
| {scrollbar-3dlight-color:val} | obj.style.scrollbar3dLightColor[=val] |
| ⇒ 스크롤 박스와 스크롤바 화살의 위쪽면과 왼쪽면의 색상을 반환하거나 설정한다. | |
| {scrollbar-arrow-color:val} | obj.style.scrollbarArrowColor[=val] |
| ⇒ 스크롤바의 화살의 색상을 반환하거나 설정한다. | |
| {scrollbar-base-color:val} | obj.style.scrollbarBaseColor[=val] |
| ⇒ 스크롤바의 기본 색상(스크롤바, 스크롤 박스, 트랙, 화살)을 반환하거나 설정한다. | |
| {scrollbar-darkshadow-color:val} | obj.style.scrollbarDarkShadowColor[=val] |
| ⇒ 스크롤바의 색상을 반환하거나 설정한다. | |
| {scrollbar-face-color:val} | obj.style.scrollbarFaceColor[=val] |
| ⇒ 스크롤 박스와 스크롤바의 화살의 색상을 반환하거나 설정한다. | |
| {scrollbar-highlight-color:val} | obj.style.scrollbarHighlightColor[=val] |
| ⇒ 스크롤 박스와 스크롤바 화살의 위쪽면과 왼쪽면의 색상을 반환하거나 설정한다. | |
| {scrollbar-shadow-color:val} | obj.style.scrollbarShadowColor[=val] |
| ⇒ 스크롤 박스와 스크롤바 화살의 아래쪽면과 오른쪽면의 색상을 반환하거나 설정한다. | |
| {scrollbar-track-color:val} | obj.style.scrollbarTrackColor[=val] |
| ⇒ 스크롤바 트랙(track) 엘레멘트의 색상을 반환하거나 설정한다. | |
| {float:val} | obj.style.styleFloat[=val] |
| ⇒ 개체에서 어느 방향으로 텍스트가 흐를 것인가를 반환하거나 설정한다. | |
| {text-align-last:val} | obj.style.textAlignLast[=val] |
| ⇒ 개체 속의 문자나 개체 마지막 줄의 수평 정렬 방식을 반환하거나 설정한다. | |
| {text-autospace:val} | obj.style.textAutospace[=val] |
| ⇒ 조정된 문자를 위한 자동 문자 간격 맞추기를 반환하거나 설정한다. | |
| {text-decoration:val} | obj.style.textDecoration[=val] |
| ⇒ 개체 속의 문자 장식(깜박거림, 중간줄, 윗줄, 아랫줄)을 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationBlink[=val] |
| ⇒ 개체의 textDecoration 속성값이 'blink'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationLineThrough[=val] |
| ⇒ 개체의 textDecoration 속성값이 'line-through'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationNone[=val] |
| ⇒ 개체의 textDecoration 속성값이 'none'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationOverline[=val] |
| ⇒ 개체의 textDecoration 속성값이 'overline'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| 없슴 | obj.style.textDecorationUnderline[=val] |
| ⇒ 개체의 textDecoration 속성값이 'underline'로 설정되었는가를 부울값으로 반환하거나 설정한다. | |
| {text-kashida-space:val} | obj.style.textKashidaSpace[=val] |
| ⇒ 개체 속에서 문자 정렬 방식을 사용할 때 공백 표시에 kashida 비율을 반환하거나 설정한다. 아랍어에서 사용된다. | |
| {text-overflow:val} | obj.style.textOverflow[=val] |
| ⇒ IE6 개체에서 문자의 넘처흐름을 표시하는 방식값을 반환하거나 설정한다. | |
| {text-transform:val} | obj.style.textTransform[=val] |
| ⇒ 개체 속에서 문자의 변환 표현 방식을 반환하거나 설정한다. | |
| {text-underline-position:val} | obj.style.textUnderlinePosition[=val] |
| ⇒ 개체의 textDecoration 속성이 'underline'로 설정된 경우 밑줄의 위치를 반환하거나 설정한다. | |
| {top:val} | obj.style.top[=val] |
| ⇒ 개체 체계도 상 바로위의 개체로부터의 거리를 반환하거나 설정한다. | |
| {unicode-bidi:val} | obj.style.unicodeBidi[=val] |
| ⇒ 양방향 알고리즘에 관한 깔린 수준을 반환하거나 설정한다. | |
| {vertical-align:val} | obj.style.verticalAlign[=val] |
| ⇒ 개체의 수직 정렬 방식을 반환하거나 설정한다. | |
| {visibility:val} | obj.style.visibility[=val] |
| ⇒ 개체의 내용이 디스플레이될 것인가를반환하거나 설정한다. | |
| {white-space:val} | obj.style.whiteSpace[=val] |
| ⇒ 개체 속에서 길이가 긴 문자열의 자동 줄바꿈을 빈칸에서 할 것인가를 반환하거나 설정한다. | |
| {width:val} | obj.style.width[=val] |
| ⇒ 개체의 너비를 반환하거나 설정한다. | |
| {word-spacing:val} | obj.style.wordSpacing[=val] |
| ⇒ 개체 속에서 단어간의 간격을 증가시키는 정도를 반환하거나 설정한다. | |
| {word-wrap:val} | obj.style.wordWrap[=val] |
| ⇒ 내용이 용기 개체의 범위를 초과하면 단어를 자를 것인가를 반환하거나 설정한다. | |
| {writing-mode:val} | obj.style.writingMode[=val] |
| ⇒ 개체속 내용의 방향이나 흐름을 반환하거나 설정한다. | |
| {z-index:val} | obj.style.zIndex[=val] |
| ⇒ 위치가 정해져 있는 개체의 스택킹(위에서 보이는) 순서를 반환하거나 설정한다. | |
| {zoom:val} | obj.style.zoom[=val] |
| ⇒ 개체의 확대 배율을 반환하거나 설정한다. | |
| object ⇒ | custom⇒ | | ⇒ | | | |
| 필터 속성 | 설명 |
|---|---|
| Alpha | 개체 내용의 명도(opacity)를 조정한다. |
| AlphaImageLoader | 개체의 테두리 속에서 잘라내기나 이미지의 크기를 조정할 수 있으며, 내용과 배경 사이에 디스플레이 된다. |
| Barn | 미닫이 문을 닫고 여는 것과 유사한 움직임으로 개체의 내용을 새로이 표시한다. |
| BasicImage | 개체 내용을 색상을 처리하거나, 이미지를 회전시키거나, 선명도를 조정한다. |
| BlendTrans | 개체의 원본 내용을 점진적으로 변화시켜 새로운 내용으로 표현한다. |
| Blinds | 개체의 원본 내용을 브라인드를 열고 닫는 것처럼 점진적으로 변화시켜 새로운 내용으로 표현한다. |
| Blur | 개체의 원본 내용을 초점을 흐리게 하여 표현한다. |
| CheckerBoard | 원본 내용을 서양 장기판처럼 작은 사각형으로 잘라 점진적으로 변화시켜 새로운 내용으로 표현한다. |
| Chroma | 개체의 내용 중 지정한 색상을 투명하게 표현한다. |
| Compositor | 미리 정의된 기능에따라 원래 이미지와 새 이미지의 논리적 색상 조합으로 개체의 새로운 내용을 표현한다. |
| DropShadow | 개체의 내용을 위로 띄우는 것 처럼되고 그림자가 나타나는 효과를 생성하여 표현한다. |
| Emboss | 개체의 내용을 회색(grayscale)값을 사용하여 음각으로 조각한 모양(emboss)으로 표현한다. |
| Engrave | 개체의 내용을 회색(grayscale)값을 사용하여 양각으로 조각한 모양(engrave)으로 표현한다. |
| Fade | 개체의 원본 내용을 점진적으로 새로운 내용으로 변경시켜 표시한다. |
| FlipH | 개체의 내용을 수평으로 뒤집어 표현한다. |
| FlipV | 개체의 내용을 수직으로 뒤집어 표현한다. |
| Glow | 개체의 내용 주위에 에 지정된 색상과 강도로 반경을 확장하여 표현한다. |
| Gradient | 배경과 개체들의 색상을 점진적으로 적용하여 디스플레이 한다. |
| GradientWipe | 개체의 원본 내용을 변환 밴드를 점진적으로 이동히키면서 새로운 내용으로 표현한다. |
| Gray | 개체의 내용을 회색 스케일(grayscale)로 표현한다. |
| ICMFilter | ICM 프로파일에 맞춰 개체 내용의 색상을 변환한다. 이는 특정 내용의 표현을 개선하거나 프린터나 모니터와 같은 하드웨어 장치에 맞춰준다. |
| Inset | 대각선 방향으로 개체의 내용을 새롭게 변환시킨다. |
| Invert | 개체 내용 색상의 포화도, 밝기등을 역전 시킨다. |
| Iris | 개체의 내용을 안에서부터 밖으로 혹은 밖에서부터 안으로 열리면서 변환하여 새 내용으로 변환한다. |
| Light | 개체의 내용에 빛이 비치는 것과 같은 효과를 준다. |
| MaskFilter | 개체의 투명한 내용을 색상을 넣어 표시하고, 투명하지 않은 부분은 투명하게 표현한다. |
| Matrix | 개체의 내용의 크기 조정, 회전, 역회전등 변환하여 표현한다. |
| MotionBlur | 개체의 내용이 달리는 것 같은 상태로 표현된다. |
| Pixelate | 개체의 내용을 픽셀들이 위치한 사각형부분의 색상의 평균 색상으로 모두 변환하여 표현한다. |
| RadialWipe | 개체을 내용을 반경 돌아가는에 따라 변환하여 새로운 내용으로 표현한다. |
| RandomBars | 개체의 내용을 무작위 줄을 추가하면서 새로운 내용으로 변환하여 표현한다. |
| RandomDissolve | 개체의 내용을 무작위 픽셀 점들의 추가로 변환하여 새로운 내용으로 표현한다. |
| Redirect | 현재로서는 지원되지 않는 필터 속성이다. |
| RevealTrans | 24개의 사전에 정의된 기능에 의하여 개체의 내용을 변환시켜 새로운 내용을 표현한다. |
| Shadow | 개체의 내용을 그림자 진 것처럼 변형하여 새로운 내용으로 표현한다. |
| Slide | 개체의 내용을 여러 띄로 나누어 흐르면서 새로운 내용으로 표현한다. |
| Spiral | 개체의 내용을 나선형으로 변환시키면서 새로운 내용을 표현한다. |
| Stretch | 개체의 내용을 잡아 늘리는 모양으로 변형하여 새로운 내용을 표현한다. |
| Strips | 개체의 내용을 톱날처럼 모서리에서 반대편 모서리로 점진적으로 변환하며 새로운 내용을 표현한다. |
| Wave | 개체의 내용을 수직 축으로 사인(sine)커브로 파도 효과를 준다. |
| Wheel | 원본 이미지의 회전 움직임으로 변환(transition)하여 개체의 내용을 새로이 표현한다. |
| Xray | 개체의 내용을 색상을 변경시켜 흑백으로 디스플레이하는 효과를 준다. |
| Zigzag | 개체의 내용을 왼쪽에서 오른쪽으로, 위에서 아래로 이동하면서 새로운 내용을 만든다. |
| object ⇒ | custom⇒ | | ⇒ | | | |
| 메서드 | 설명 |
|---|---|
| addBehavior | 엘레멘트에 behavior를 추가한다. |
| applyElement | 개체를 다른 엘레멘트의 자식이나 모체 개체로 만든다. |
| attachEvent | IE -
이벤트에 특정 기능을 묶어, 기능함수가 개체에서 이벤트가 발생되면 언제나 호출되게 한다. 이벤트의 제거는 detachEvent에서 한다. 반환값은 부울값이다. 문법: [bVal=]customObj.object.attachEvent(event,functObj)
event는 필수요소이고, 표준 이벤트 문자열이다. functObj도 필수요소이고 이벤트가 발생되면 호출될 기능함수이다.코드: function callFunc(){alert('ondblclick 이벤트 발생')}document.attachEvent('ondblclick',callFunc) 결과: // 문서 위 아무데서나 더블클릭 해 보라. 코드:<INPUT type=button value="attachEvent 재설정" onclick="document.detachEvent('ondblclick',callFunc);document.attachEvent('ondblclick',callFunc)"></SPAN> 결과: |
| blur | 
IE NS
custom 개체가 초점을 잃고 onblur 이벤트가 발생된다.
문법: customObj.blur() |
| clearAttributes | custom 개체의 모든 애트리뷰트들과 값들을 삭제한다. |
| click |
IE NS
개체를 클릭하는 것과 동일하게 onclick 이벤트가 발생된다.
문법: customObj.click() |
| componentFromPoint | 어떤 이벤트에서 지정된 좌표에 위치한 콤포넨트를 반환한다. |
| contains | custom 개체 속에 주어진 엘레멘트가 있는가를 점검한다. |
| detachEvent | IE5 -
attachEvent 이벤트로 첨부된 이벤트를 제거한다. 반환값은 없다.
문법: customObj.detachEvent(event,funcion)
코드: <INPUT type=button value="detachEvent" onclick="document.detachEvent('ondblclick',callFunc)"></SPAN>결과: // 클릭 후에는 attachEvent에서 설정된 이벤트가 제거된다. 제거 후 더블클릭해 보라. |
| doScroll | 스크롤바를 클릭한 것과 같은 효과를 준다. |
| fireEvent | custom 개체에서 지정한 이벤트를 발생시킨다. |
| focus |
custom 개체에 초점을 주고 onfocus이벤트에 지정한 처리자 코드를 수행한다.
문법: customObj.focus()
|
| getAdjacentText | 개체의 인접 문자열을 반환한다. |
| getAttribute | 지정된 애트리뷰트의 값을 반환한다. |
| getAttributeNode | IE6 attribute.name속성을 참조하는 attribute 개체를 반환한다. |
| getBoundingClientRect | TextRectangle 개체들의 컬렉션에 연결됨을 지정하는 개체를 반환한다. |
| getClientRects | 개체의 내용이나 클라이언트 범위(range)의 배치(layout)를 기술하는 사각형(rectangle)들의 컬렉션을 반환한다. 각 사각형은 한 줄이다. |
| getElementsByTagName | 지정된 엘레멘트의 이름에 맞는 개체들의 컬렉션을 반환한다. |
| getExpression | 주어진 속성의 표현(expression)을 반환한다. |
| insertAdjacentHTML | 엘레멘트의 지정된 위치에 주어진 HTML 문자열을 삽입한다. |
| insertAdjacentText | 엘레멘트의 지정된 위치에 주어진 문자열을 삽입한다. |
| mergeAttributes | 지정된 개체에 모든 읽기/쓰기 애트리뷰트를 복사한다. |
| normalize | IE6 custom 개체의 인접 TextNode 개체를 통합하여 문서 개체 모델을 정상화한다. |
| releaseCapture | 현재 문서의 custom 개체로 부터 마우스 캡쳐를 제거한다. |
| removeAttribute | custom 개체로 부터 애트리뷰트를 제거한다. |
| removeAttributeNode | IE6 custom 개체로 부터 애트리뷰트 개체 노드를 제거한다. |
| removeBehavior | custom 개체로부터 behavior를 제거한다. |
| removeExpression | 지정한 속성으로부터 표현(expression)을 제거한다. |
| replaceAdjacentText | 개체에 인접 문자열을 교체한다. |
| scrollIntoView | custom 개체를 보기게 굴림(scroll)하고 윈도우의 맨위나 아래에 정렬한다. |
| setActive | custom 개체에 초점을 주지 않은 상태에서 활성으로 설정한다. |
| setAttribute | 지정된 애트리뷰트를 설정한다. |
| setAttributeNode | IE6 custom 개체의 부분으로 애트리뷰트 개체 노드를 설정한다. |
| setCapture | 현재 문서에 소속된 custom 개체의 마우스 캡쳐를 설정한다 |
| setExpression | 지정된 개체의 표현(expression)을 설정한다. |
| object ⇒ | custom⇒ | | ⇒ | | | |
| 이벤트 | 설명 |
|---|---|
| onactivate | 엘레멘트 개체가 activeElement 속성으로 설정되면 발생한다. |
| onafterupdate | 데이터 원본이 있는 개체가 성공적으로 업데이트되면 데이터를 갖는 개체에 발생한다. |
| onbeforeactivate | IE6 엘레멘트 개체가 activeElement 속성으로 설정되기 바로 전에 발생한다. |
| onbeforecopy | 선택된 내용이 시스템 클립보드(clipboard)로 복사하기 바로 전에 원본 개체에 발생된다. |
| onbeforecut | 문서로 부터 선택한 부분의 잘라내기 하기 바로 전에 원본 개체에 발생한다. |
| onbeforedeactivate | 모체 문서에서 activeElement 속성의 엘레멘트 개체가 현재 개체로 다른 개체로 변경되기 바로 전에 발생한다. |
| onbeforeeditfocus | 편집 가능한 개체가 활성화되거나 편집 가능한 용기에 제어 선택이 이루어 지기 바로 전에 발생한다. |
| onbeforepaste | 시스템 클립보드(잘라낸거나 복사한 내용이 있는)로부터 문서의 목표개체에 붙여 넣기 바로 전에 발생한다. |
| onbeforeupdate | 원본 데이터를 갖는 개체의 연관된 데이터가 업데이트되기 바로 전에 데이터를 받는 개체에 발생된다. |
| onblur |
IE4 NS3
custom 개체가 초점을 생실했을 때 발생한다.
문법: customObj.onblur='JsCode' |
| onclick |
custom 개체에서 마우스를 클릭(눌럿다 놓음)하면 발생되고 지정된 JsCode를 수행한다.
문법: customObj.onclick='JsCode' |
| oncontextmenu | 클라이언트 지역에서 오른쪽 마우스 단추를 클릭하였을 때나 콘텍스트(context) 메뉴를 열었을 때 발생 |
| oncontrolselect | 사용자가 개체의 제어 선택을 하려고 할 때 발생한다. |
| oncopy | 선택된 내용이 시스템 클립보드(clipboard)로 복사하였을 때 원본 개체에 발생된다. |
| oncut | 문서의 선택한 내용을 잘라 시스템 클립보드(잘라낸거나 복사한 내용이 있는)에 넣을 때 원본 개체에 발생 |
| ondblclick |
custom 개체에서 마우스를 연속 두번 클릭하면 발생되고 지정된 JsCode를 수행한다.
문법: customObj.ondblclick='JsCode' |
| ondeactivate | 모체 문서에서 activeElement 속성의 엘레멘트 개체가 현재 개체로 다른 개체로 변경되면 발생한다. |
| ondrag | 연속 끌기 동작이 진행되는 동안 원본 개체에 발생한다. |
| ondragend | 연속 끌기 동작에서 마우스를 해제하여 진행이 완료되면 원본 개체에 발생한다. |
| ondragenter | 연속 끌기 동작에서 성공적인 끌어 놓기가 완료면 목표 개체에 발생한다. |
| ondragleave | 연속 끌기 동작에서 성공적인 끌어 놓기가 완료되어 목표 개체를 이탈하면 목표 개체에 발생한다. |
| ondragover | 연속 끌기 동작에서 유효한 목표 개체 위에 있는 동안 연속적으로 목표 개체에 발생한다. |
| ondragstart | 연속 끌기 동작에서 선택한 텍스트나 개체를 끌기 시작하면 원본 개체에 발생한다. |
| ondrop | 연속 끌기 동작에서 마우스 단추를 해제하면 목표 개체에 발생한다. |
| onerrorupdate | 데이터 원천 개체에서 관련된 데이터가 업데이트되는 동안에 오류가 발생되면 발생된다. |
| onfilterchange | 시각적 필터 상태를 변경하거나 변경이 완료되면 발생한다. |
| onfocus |
IE NS
custom 개체가 초점을 받으면 발생되고 JsCode를 수행한다.
문법: customObj.onfocus='JsCode' |
| onfocusin | IE6 엘레맨트에 초점을 조기 바로 전에 엘레멘트에 발생한다. |
| onfocusout | IE6 다른 엘레맨트로 초점을 이동하면 바로 현재 엘레멘트에 발생한다. |
| onhelp | 활성 윈도우에서 도움말을 위하여 F1 키를 누르면 발생된다. |
| onkeydown |
custom 개체에서 자판(key)을 누르면 발생되고 지정된 JsCode를 수행한다.
문법: customObj.onkeydown='JsCode' |
| onkeypress |
custom 개체에서 자판(key)을 누르고 있으면 발생되고 지정된 JsCode를 수행한다.
문법: customObj.onkeypress='JsCode' |
| onkeyup |
custom 개체에서 자판(key) 누름을 해제하면 발생되고 지정된 JsCode를 수행한다.
문법: customObj.onkeyup='JsCode' |
| onlosecapture | 개체가 마우스 캡쳐(capture)를 해제하면 발생한다. |
| onmousedown |
custom 개체에서 마우스 단추를 눌렀을 때 발생되고 지정된 JsCode를 수행한다.
문법: customObj.onmousedown='JsCode' |
| onmouseenter | 마우스 포인터가 개체 위로 이동하면 발생한다. |
| onmouseleave | 마우스 포인터가 개체 밖으로 이동하면 발생한다. |
| onmousemove | 마우스 포인터가 개체 위에서 이동하면 발생한다. |
| onmouseout | 마우스 포인터가 개체 밖으로 이동하면 발생한다. |
| onmouseover | 마우스 포인터가 개체 위로 이동하면 발생한다. |
| onmouseup |
custom 개체에서 단추 누름을 해제하면 발생되고 지정된 JsCode를 수행한다.
문법: customObj.onmouseup='JsCode' |
| onmousewheel | IE6 마우스 휠(wheel)을 굴리면 발생한다. |
| onmove | 개체가 이동하면 발생한다. |
| onmoveend | 개체의 이동이 중지되면 발생한다. |
| onmovestart | 개체가 이동하기 시작하면 발생한다. |
| onpaste | 시스템 클립보드(잘라낸거나 복사한 내용이 있는)로부터 문서의 목표개체에 붙여 넣으면 발생한다. |
| onpropertychange | 개체의 속성을 변경발생한다. |
| onreadystatechange | 개체의 준비상태(readyState) 속성을 변경시키면 발생한다. |
| onresize | 윈도우나 프레임이등 개체의 크기가 조정되었 때 발생한다 |
| onresizeend | 제어 섹션에서 개체의 크기 변경이 완료되면 발생한다. |
| onresizestart | 제어 섹션에서 개체의 크기 변경이 시작되면 발생한다. |
| onscroll | 개체의 스크롤 박스의 스크롤바를 굴려 위치를 변경시키면 발생한다. |
| onselectstart | 개체가 선택되기 시작하면 발생한다. |
| object ⇒ | custom⇒ | | ⇒ | | | |
custom 개체 예제
사용자가 정의한 custom 엘레멘트 CUSTOMTAG는 각각 red, green, blue 엘레멘트들이다.
해당 태그에 지정한 스타일이 적용된다.
<HTML xmlns:CUSTOMTAG>
<STYLE>
@media all{
CUSTOMTAG\:red{color:red;background-color:ffffaa;}
CUSTOMTAG\:green{color:green;background-color:ddffdd;}
CUSTOMTAG\:blue{color:blue;background-color:ddeeff}
}
</STYLE>
<CUSTOMTAG:red>CUSTOMTAG:red 태그 속에 있으므로 문자열은 적색이다.</CUSTOMTAG:red></BR>
<CUSTOMTAG:green>CUSTOMTAG:green 태그 속에 있으므로 문자열은 녹색이다.</CUSTOMTAG:green></BR>
<CUSTOMTAG:blue>CUSTOMTAG:red 태그 속에 있으므로 문자열은 청색이다.</CUSTOMTAG:blue>
| object ⇒ | custom | ⇒ | | | |
| 최종 수정: 05/17/2025 17:14:27 |  All right reserved | 비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다. 오류가 나면 정상적 접속으로 시도해 보세요. | http://koxo.com/lang/js/object/custom.html |