[Frontend/HTML] 드롭다운(Select) 만들기

안녕하세요. 이번 포스팅에서는 예쁜 셀렉트를 만들어 보도록 하겠습니다.

select 태그는 css를 이용하여 예쁘게 꾸밀 수 있지만 ... 문제는 그 안에 들어가는 option 태그입니다!

이 option 태그는 css가 ... 거의 먹지를 않아요 ... 이러한 select 태그를 이용한 단점을 극복하하기 위해!

 

div 태그로 select를 표현하고!

ul + li 태그로 option 을 표현하여!

훨씬 예쁜 셀렉트를 만들어 보겠습니다!

 

---

HTML Markup

우선은 다음과 같이 HTML 태그를 작성합니다. select 역할을 하는 div가 가장 바깥에서 태그를 감싸주고 있습니다. 그 안에는 선택한 값을 표현하는 div와 option 목록을 대신하는 ul, li 태그가 순서대로 표현됩니다.

 

<div class="select">
  <div class="text">선택</div>
  <ul class="option-list">
    <li class="option">샤인머스켓</li>
    <li class="option">체리</li>
    <li class="option">홍시</li>
  </ul>
</div>

 

---

Javascript Event

우선 화면이 셀렉트처럼 동작하도록 만들어야합니다. 그러려면 클릭을 했을 때에 option-list가 보여지도록 하면 됩니다.

이를 위해 css로 잘 꾸며보겠습니다. css는 별도로 설명하지 않고 다음 코드를 그대로 복사해서 사용하시면 될 것 같습니다. 이 부분은 꾸미는 부분이 아니라 구조를 잡는 부분이기에 동일하게 작성할 필요가 있기 때문입니다.

 

.select {
  position: relative;
}

.select .option-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  overflow: hidden;
  max-height: 0;
}

.select.active .option-list {
  max-height: none;
}

 

위에서 작성한 CSS 코드를 보시면 class="select", class="select active" 두가지에 따라서 option-list 태그의 max-height 값이 변하는 부분을 확인할 수 있습니다.

 

이렇게 active가 추가되었을 경우에만 option-list가 보이도록 하기 위해서 active 클래스를 추가/제거를 해주는 역할을 하는 이벤트 함수를 작성해 보겠습니다.

 

function onClickSelect (e) {
  const isActive = e.currentTarget.className.indexOf("active") !== -1;
  if (isActive) {
    e.currentTarget.className = "select";
  } else {
    e.currentTarget.className = "select active";
  }
}

이제 기존에 HTML 태그에 위의 함수를 바인딩(태그와 이벤트 함수를 연결하기) 해보겠습니다.

 

document.querySelector(".select").addEventListener("click", onClickSelect);

 

그러면~!!! 바로 아래와 같이 셀렉트가 거의 완성된 것을 보실 수 있습니다!

 

 

이제 마지막 단계가 남았습니다. option 태그를 클릭하면 선택된 값으로 바뀌어야 합니다. 이전과 마찬가지로 onClickOption 이라는 이벤트 함수를 먼저 만들어 보겠습니다.

 

function onClickOption(e) {
  const selectedValue = e.currentTarget.innerHTML;
  document.querySelector(".text").innerHTML = selectedValue;
}

 

이제 기존의 HTML 태그에 option 태그를 클릭시 호출되는 이벤트를 바인딩 해보겠습니다. 원래는 forEach 함수라는 편리한 함수가 있지만 그 함수는 IE11 버전에서 호환이 되지 않기 때문에 아래와 다음과 같은 방법으로 바인딩을 하였습니다.

 

var optionList = document.querySelectorAll(".option");
for (var i = 0; i < optionList.length; i++) {
  var option = optionList[i];
  option.addEventListener("click", onClickOption);
}

그러면~!! 이제 셀렉트가 완성되었습니다!

 

 

이렇게 완성된 태그에는 어마어마한 예뻐질 수 있는 가능성이 있습니다.

 

다음 완성된 Codepen의 코드에서 디자인의 가능성을 확인해 보시면 될 것 같습니다!

 

---

CSS Design

See the Pen Select by HongJiseong (@as-you-say) on CodePen.