Select 커스텀
<select>의 <option>항목은 브라우저가 네이티브로 렌더링하는 부분이라 CSS로 완전한 스타일 제어가 어렵다.
특히 height를 적용해도 <option>에는 잘 반영되지 않는 경우가 많다.
그래서 input에 List layer를 띄우는 방법으로 커스텀 한다.

input에 List layer를 띄우는 방법 고려사항
1. select의 리스트 드롭 아이콘을 만들기 위해 input type='text' 가성요소를 만들 수 없다. input은 가상요소가 생성이 안된다.
2. input을 감사고 있는 부모 요소에 가상요소를 만들고 아이콘을 만든다. div를 삼각형으로 만들어 적용 가능
3. input은 readyonly로 만들고 click하면 list-layer를 show한다.
4. list-layer는 overflow-y:scroll, height:100px; 속성을 주고  option에 해당하는 부분은 list는 <button></button>으로 만들어 click하면
input에 값이 insert되게 스크립트 처리한다.
여기서 input 을 클릭해 list-layer를 띄우고 list-layer의 button을 클릭하지 않고 dom을 크릭해도 값 설정 없이 list-layer를 닫기 위해특정 영역을 제외 하는 스크립트를 사용

$(document).on("click", function (e) {
  if (
    !$(e.target).closest("#layer").length && // 레이어 바깥이고
    !$(e.target).closest(".except-area").length // 제외할 영역도 아닌 경우
  ) {
    $("#layer").hide();
  }
});