Select 태그에 CSS를 적용시키는 방법

http://eond.com/index.php?mid=css&category=357730
오래 전에 작성한 글인데 정리차 써봅니다.

1. 정찬명님의 CSS Drop Down : Emulate Select/Option.
URL : http://naradesign.net/wp/2010/02/18/1192/
Demo : http://naradesign.net/ouif/uio/select/xhtml.html 
select 태그가 아닌 ul 태그를 css와 jQuery 를 사용하여 마치 셀렉트폼인 것 처럼 꾸며 사용합니다.

제이쿼리를 단순히 짠 용도라서 제이쿼리 고수분들이 보기에 소스가 다소 효율적이지 못할 수도 있는 것 같습니다.

2. 셀렉트태그를 일반 ul 태그로 변경시키는 자바스크립트
URL : http://eond.com/index.php?mid=css&category=357730&document_srl=350009
Demo : http://blog.naver.com/baeumteo/140176485849
셀렉트 태그를 사용해넣으면 자바스크립트에서 해당 태그를 UL 태그로 변경해버립니다.

1번과 방법은 유사합니다. 1번과 차이점이라면 1번은 처음부터 UL 태그 등으로 꾸민 반면,

2번 방법은 셀렉트 태그를 스크립트를 사용해서 UL 태그로 변경해버리는 점입니다. 

3. 셀렉트태그를 DIV 요소로 가리기
http://eond.com/index.php?mid=css&category=357730&document_srl=350007
셀렉트태그를 CSS 를 활용하여 감춰버립니다.

단순히 가리는 용도에 불과할 뿐이라 디자인적으로 활용도가 높긴 합니다만, 

브라우저에 따라 셀렉트 기본 요소가 나타날 수도 있습니다.

단순히 가리는 용도에 그칠 뿐인게 다소 아쉬운 부분이 있어요.

4. [jQuery Selectbox plugin] select-box

URL : https://code.google.com/p/select-box/
Demo : http://codepen.io/eond/pen/mezYrm
jQuery Selectbox plugin인 select-box를 활용한 예제입니다. 

디자인적으로 고치기 쉽지 않아 보입니다만, 확실히 예쁘네요. 좀 더 다양한 예제가 있으면 좋을 뻔 했어요.

소스를 보면 이것도 셀렉트폼을 숨겨버리고 자체적으로 ul 태그를 생성하여 해당 태그에 css를 입힌 소스네요. ㅎ;

전부 다 방법은 유사하네요.

셀렉트태그는 css 디자인이 안 먹히니, 아예 ul 요소로 작업해라.. ^^;

1은 아예 ul 요소로 만든 것이고

2와 4는 모두 셀렉트를 js를 이용해서 ul 등 다른 태그로 변경한 것이고

3은 단순히 셀렉트 요소를 가린 것이니;;

1번이 아예 처음부터 디자인하기에는 쉬울 것 같습니다;