.htc 이용하여 select 디자인 적용하기

Programming/html

by luckey 2010. 4. 1. 14:30

위와 같이 select box에 style을 적용하기 위해서 .htc 파일을 사용하였다.
.htc 파일은 HTC(HTML Component) 로 Microsoft사에서 개발한 JScript 라고 한다.
Javascript는 Netscape사에서 만든 것이다.
보통 Style은 CSS 에서 제어를 하지만 select의 경우 CSS에서는 모든 제어가 힘들기 때문에 HTC를 사용하며 장점으로는 이벤트 제어도 가능하다는 점이다.

첨부된 htc 파일을 받아서 보게 되면 크게 어려운 부분은 없으리라 생각한다.

적용방법은 select{behavior: url('selectbox.htc');} 이런식으로 모든 select 항목에 적용하는 방법도 있으며
만약 selectbox 별로 다르게 적용하고 싶다면 해당 select box에 적용될 style 안에 behavior을 적용하는 방법도 있다.
하지만 behavior 자체가 웹표준에 적용되는 사항이 아니기 때문에 크롬이나 파이어폭스에서는 적용되지 않을 것이다.

직접 적용하는 방법은
<select style="behavior: url('selectbox.htc');">
<option value=""></option>
</select>

위와 같이 직접 style을 넣어주거나 css class를 사용하면 된다.

추가로

<select style="behavior: url('selectbox.htc');" setImage="arrow.gif" setDisplayCount="10">
<option value=""></option>
</select>

위와 같은 형태로도 사용이 가능한데 setImage는 selectbox의 오른쪽 삼각형을 이미지로 바꾸는 것이고 setDisplayCount는 스크롤에서 보여질 아이템의 개수이다.

selectbox.htc