사용자 지정 선택 드롭 다운 구성 요소를 만드는 것은 웹 개발에서 가장 일반적인 요구 사항 중 하나입니다. 선택 드롭 다운을 사용하면 미리 정의 된 목록에서 하나의 값을 선택할 수 있습니다. 궁금한 점이있을 수 있습니다.

“이미 HTML 선택 태그가있는 경우 사용자 지정 선택 드롭 다운 구성 요소를 만들어야하는 이유는 무엇입니까? CSS 스타일을 적용 할 수 있습니다. 그게 전부입니다!”

안타깝게도 선택 드롭 다운 스타일 지정은 그렇게 간단하지 않습니다. 기본 HTML 선택 요소는 스타일 지정 옵션 태그를 허용하지 않습니다.

요즘에는 선택 드롭 다운이 다양한 변형으로 나타납니다. 다양한 자바 스크립트 라이브러리와 CSS 프레임 워크를 찾을 수 있습니다. , 사용자 정의 선택 드롭 다운에 대한 자체 구현이 있습니다. 검증 된 브라우저 간 기능이 있고 매우 안정적입니다. 대부분의 경우 사용자 정의 선택 드롭 다운을 쉽게 만들 수 있으므로 라이브러리 나 프레임 워크를 사용할 필요가 없습니다.

이 블로그 게시물에서는 라이브러리와 프레임 워크를 사용하지 않고 기능 선택 드롭 다운을 빌드하는 방법을 공유하고 싶습니다. 스타일을 적용하여 옵션을 선택하고 여기에 맞춤 구성 요소를 추가 할 수 있습니다.

p>

맞춤 선택 드롭 다운 만들기를 시작하기 전에 다음 질문 :

선택 드롭 다운에 수백 또는 수천 개의 옵션이 있습니까?

사용자가 여러 옵션을 선택할 수 있습니까?

두 경우 모두 자체 구현에는 많은 시간이 걸릴 수 있기 때문입니다. 수백 가지 옵션이있는 드롭 다운이 필요한 경우 사용자에게 검색 기능을 제공해야합니다. 드롭 다운에 수천 개의 옵션이있는 경우 “윈도우”기술을 사용해야합니다. 자세한 내용은 고급 선택 드롭 다운을 확인하세요.

사용자 지정 선택 드롭 다운 예

여기에서 기본 선택 요소를 볼 수 있습니다. 사용중인 브라우저에 따라 약간 다르게 보일 수 있습니다.

이 자습서에서는 기본 선택 요소를 다음과 같이 변경합니다.

HTML

전통적으로 사용자 지정 선택 드롭 다운을 만들어야하는 경우 다음 구조를 사용하십시오.

select 태그를 사용할 수 없으므로 html 구조를 선택할 수있는 더 많은 옵션이 있습니다. . ul 및 li 요소 또는 div를 요소. div 및 span 구조를 선택하겠습니다.

CSS

CSS 재설정으로 시작하여 브라우저 불일치를 줄입니다. Eric Meyer의 CSS 재설정을 선택했습니다.

출처 : https://meyerweb.com/eric/tools/css/reset/

선호합니다 너비 = 요소 너비 + 패딩 + 테두리 인 상자 모델을 사용합니다.

먼저 html 요소에 대한 몇 가지 기본 스타일을 추가했습니다. <div class=”custom-select”> 위치는 상대적입니다. 드롭 다운 목록에 절대 위치를 적용해야하기 때문입니다.

다음 CSS는 드롭 다운 화살표에 사용됩니다.

CSS3 속성 전환 및 변형을 볼 수 있습니다. 전환은 드롭 다운 목록의 페이드 인 및 페이드 아웃에 사용됩니다. Transform은 드롭 다운 상태를 나타내는 화살표 애니메이션에 사용됩니다.

자바 스크립트

dom 조작을 위해 타사 라이브러리를 사용할 필요가 없습니다. 간단한 드롭 다운의 경우 기본 자바 스크립트 이벤트 만 필요합니다.

래퍼에 클릭 기능을 추가했습니다. 클릭 함수는 옵션 목록이 열리거나 닫혔는지 여부를 나타내는 .open 클래스를 토글합니다. 클릭 기능 내에서 this.querySelector(".custom-select")로 <div class=”custom-select”>를 검색합니다. 클릭 함수 내부의 This는 클릭 된 요소를 나타냅니다. DOM 내부에 더 많은 드롭 다운이있는 경우 document.querySelector(".custom-select")로 전체 문서를 쿼리하지 않습니다.

위의 자바 스크립트 스 니펫에서 모든 옵션을 반복하고 클릭을 추가합니다. 함수, .selected 클래스를 추가하여 선택한 옵션을 변경합니다. 다시 말하지만, 클릭 함수 내에서 클릭 한 옵션 (스 니펫의 this) 내에서 쿼리합니다. 한 페이지에서 여러 드롭 다운을 지원하도록 이벤트 핸들러를 변경하려는 경우입니다.

마지막 스 니펫은 선택 사항이며 사용자가 드롭 다운을 클릭하면 드롭 다운 목록을 닫을 수 있습니다.

한 페이지에 여러 선택 드롭 다운

하나에 여러 선택 드롭 다운을 사용하려는 경우 페이지에서 모든 .custom-select-wrapper 요소에 클릭 리스너를 연결하고 사용자가 드롭 다운을 클릭하면 모든 드롭 다운을 닫아야합니다.

고급 선택 드롭 다운

수백 개의 옵션 또는 다중 선택이있는 선택 드롭 다운이 필요한 경우 사용 가능한 라이브러리 중 일부를 확인할 수 있습니다. 이 기사에서는 가장 인기있는 라이브러리의 비교를 확인할 수 있습니다.

수천 개의 옵션을 처리해야하는 경우 수천 개의 옵션 요소로 DOM을 렌더링 할 수 없습니다.백엔드를 사용할 수없는 경우 “윈도우”기술을 사용해야합니다.

“윈도우”기술이란 무엇입니까?

목록에서 수천 개의 요소를 렌더링하는 대신 “윈도우”또는 가상화는 사용자가 볼 수있는 항목 만 렌더링하는 데 초점을 맞추고 있습니다. Brian David Vaughn이 “윈도우”기술을 구현하는 방법에 대한 설명을 확인할 수 있습니다. 이는 구현하기 쉽고 엄청난 성능 향상을 제공 할 수 있습니다.

결론

이 블로그 게시물이 맞춤 선택 드롭 다운 구성 요소를 빌드하는 방법에 도움이되기를 바랍니다. 처음에는 선택 드롭 다운에 많은 옵션이 포함되어 있는지 또는 사용자가 여러 옵션을 선택할 수 있는지 알아야합니다. 기본 선택 구성 요소가 필요한 경우 블로그 게시물에서 HTML, CSS 및 JavaScript의 전체 구현에 대해 설명합니다. Github에서 소스 코드를 확인할 수 있습니다.