동해둘리의 IT Study

selectbox 라이브러리 selectric selectbox 라이브러리 중에서 selectric 을 이용하면 아래와 같이, 다양한 형태의 selectbox를 쉽게 만들 수 있습니다. 아래 사이트에 접속하시면 데모코드를 확인하실 수 있습니다. 기본적인 사용방법 selectbox 라이브러리를 이용하기 위해서는 CDN을 이용하거나, 소스코드를 다운로드 받아서 사용하시면 됩니다. 아래와 같이 1번 또는 2번의 방법으로 라이브러리를 포함시킵니다. selectric.css 도 포함시켜줍니다. 그런후에 적용하려는 selectbox에 selectric() 를 실행시켜주기만 하면 됩니다. 다양한 테마와 커스텀 기능 sectctric 홈페이지에서는 아래와 같이 테마를 제공합니다. 기본테마부터 다양한 형태와 색상의 테마..

IT공부방/개발환경,오픈소스 2023. 6. 23. 17:56

기본적인 셀렉트 박스 기본적인 selectbox 태그를 사용하게 되면, 아래와 같은 모양의 selectbox 가 나타나게 됩니다. 그런데, 별로 이쁘지가 않고, 리스트의 내용이 아주 길 경우에는 검색을 할 수가 없기때문에 스크롤을 엄청 오래 해야하는 불편함이 있습니다. select2 라이브러리를 사용하자 select2 라이브러리를 사용하게되면, 아주 손쉽게 아래와 같이 모양도 이쁘고, 검색도 가능한 selectbox를 만들 수 있습니다. * select2 라이브러리를 사용하려면 먼저 아래와 같은 코드를 페이지에 삽입해야 합니다. 1 2 3 cs * 그런 후에 아래와 같이 document.ready 에서 해당 selectbox에 select2() 함수를 적용시켜주기만 하면 됩니다. 1 2 3 4 5 6 /..

IT공부방/HTML5, CSS 2023. 6. 21. 11:43