Original article: HTML Select Tag – How to Make a Dropdown Menu or Combo List

1
여러분은 사용자가 원하는 값을 선택할 수 있도록 HTML select 태그를 이용해서 드롭다운 메뉴를 만듭니다. 이는 서버로 전송할 데이터를 수집하는 데 중요한 기능입니다.

select 태그는 보통 form 요소 안에 들어가며, 선택 항목은 또 다른 태그인 <option>에서 코드화됩니다. 또한 독립적인 요소로도 쓸 수 있는데, 이 요소는 여전히 특수 속성 중 하나인 form과 연관되어 있습니다.

이 튜토리얼에서는 select 태그로 여러분의 코딩 프로젝트에서 데이터를 수집할 수 있게 드롭다운 메뉴를 만드는 방법을 알려드립니다. select 태그는 스타일링이 어렵기로 악명이 높기 때문에 스타일링하는 방법도 가르쳐드릴 겁니다.

Select 태그의 속성

select 태그로 드롭다운 메뉴를 만드는 방법을 자세히 살펴보기 전에, select 태그가 가진 속성들에 대해 알아봐야 합니다.

속성은 다음과 같습니다.

  • name: 데이터가 서버에 제출된 후 데이터를 참조하는 데 사용되므로 모든 form 컨트롤에 name을 넣어야 합니다.
  • multiple: 이 속성은 사용자가 드롭다운 메뉴에서 여러 옵션을 선택할 수 있도록 합니다.
  • required: 이 속성은 일반적으로 유효성 검사를 위해 사용됩니다. 이 속성을 통해, 사용자가 드롭다운 메뉴에서 하나 이상의 옵션을 선택하지 않으면 form이 제출되지 않습니다.
  • disabled: 사용자가 옵션을 선택할 수 없도록 합니다.
  • size: 이 속성은 숫자로 표현되며, 한 번에 표시되는 옵션 수를 정하는데 사용됩니다.
  • autofocus: 이 속성은 페이지가 로드 될 때 포커스가 있어야 할 입력 요소를 지정합니다. select를 포함한 모든 form 요소들에 사용될 수 있습니다.

Select 태그를 사용하여 드롭다운 메뉴를 만드는 방법

select 태그로 드롭다운 메뉴를 만들려면, 먼저 form 요소가 필요합니다. 왜냐하면 서버에 데이터를 제출할 submit 버튼이 form 요소 안에 있기 때문입니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

드롭다운과 버튼을 중앙에 놓고, body에 밝은 회색 배경을 주기 위해 몇 가지 간단한 CSS를 추가했습니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}
input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

접근성을 높이기 위해서, select 박스를 label 요소에 붙일 수도 있습니다. 그러면 label 텍스트가 클릭 될 때 포커스가 됩니다.

아래의 코드와 같이 하실 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

저는 action 속성의 값으로 숫자 기호(#)를 넣었습니다. 이렇게 하면 submit 버튼을 눌렀을 때 404 에러가 나오지 않습니다.

하지만 이제 CSS를 약간 수정 해야 합니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
  background-color: #f1f1f1;
}
input {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
select {
  margin-bottom: 10px;
  margin-top: 10px;
}

마침내, 결과가 나왔습니다.

회색 배경에 있는 드롭다운 요소가 작동하는 모습

저기서 끝이 아닙니다. 드롭다운 항목 중 하나가 기본값으로 보이고 있으며, 페이지에 도착한 사용자가 그냥 submit 버튼을 누른다면 바로 이 항목이 선택될 겁니다.

하지만 이건 좋은 사용자 경험이 아닙니다. 여러분은 드롭다운의 첫 번째를 “select a language”로 코딩해서 이를 방지할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

사용자가 select 박스를 클릭하여 항목을 선택할 때, 드롭다운이 submit 버튼도 가립니다- 좋은 사용자 환경에 부정적인 영향을 미치는 또 다른 요소입니다.

여러분은 크기 속성으로 이 부분을 바꿀 수 있습니다. 이 속성은 기본적으로 특정 항목의 개수를 보여주고 드롭다운의 다른 항목들을 위해 스크롤을 보여줄 겁니다.

또한 일부 항목들은 사용자들에게 자동으로 보여지기 때문에 가짜 첫 번째 항목을 제거할 수 있도록 해줍니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" size="4">
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

드롭다운에 스크롤이 작동하는 모습

multiple 속성으로 사용자가 드롭다운 메뉴에서 여러 항목을 선택할 수 있도록 할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang" multiple>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

이렇게 하면 기본적으로 4개의 항목이 표시됩니다. 여러 항목을 선택하기 위해서는 사용자가 Shift 또는 Ctrl 키를 누른 상태에서 마우스로 선택해야 합니다.

스크롤이 있는 드롭다운에서 여러 항목을 동시에 선택하는 모습

select와 <option> 태그로 할 수 있는 작업은 이뿐만이 아닙니다. <select> 태그 안에 <optgroup> 요소를 넣어 다층 선택 박스도 만들 수 있습니다.

이미 만든 드롭다운을 다음과 같이 다층 선택 상자로 변환할 수 있습니다.

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <optgroup label="first-choice">
      <option value="select">Select a language</option>
      <option value="javascript">JavaScript</option>
      <option value="php">PHP</option>
      <option value="java">Java</option>
      <option value="golang">Golang</option>
    </optgroup>
    <optgroup label="second-choice">
      <option value="python">Python</option>
      <option value="c#">C#</option>
      <option value="C++">C++</option>
      <option value="erlang">Erlang</option>
    </optgroup>
  </select>
  <input type="submit" value="Submit" />
</form>

다층선택 요소가 있는 드롭다운 메뉴

Select 요소 스타일 하는 방법

select 요소를 스타일링하는 건 가끔 혼란스럽고 브라우저 안에서 일관성이 없게 만듭니다. 그러나 언제든 다음처럼 시도해볼 수 있습니다:

<form action="#">
  <label for="lang">Language</label>
  <select name="languages" id="lang">
    <option value="select">Select a Language</option>
    <option value="javascript">JavaScript</option>
    <option value="php">PHP</option>
    <option value="java">Java</option>
    <option value="golang">Golang</option>
    <option value="python">Python</option>
    <option value="c#">C#</option>
    <option value="C++">C++</option>
    <option value="erlang">Erlang</option>
  </select>
  <input type="submit" value="Submit" />
</form>

select {
  margin-bottom: 10px;
  margin-top: 10px;
  font-family: cursive, sans-serif;
  outline: 0;
  background: #2ecc71;
  color: #fff;
  border: 1px solid crimson;
  padding: 4px;
  border-radius: 9px;
}

저는 위의 CSS 코드에서 select 박스의 텍스트에 다음과 같은 모습을 주었습니다.

  • cursive 글꼴과 white 글자 색,
  • 포커스 될 때 생기는 못생긴 아웃라인을 없애기 위해 outline에 0,
  • 초록빛을 띤 배경,
  • 1 px 두께의 진홍색 테두리,
  • 모든 면의 약간 둥근 테두리를 위한 border-radius 4 px,
  • 그리고 약간의 공백을 위한 padding 4 px.

이제 select 박스가 훨씬 나아 보이네요.

초록빛 배경의 둥근 테두리를 가진 드롭박스에서 메뉴를 선택하는 모습

결론

select 태그는 HTML 안에 드롭다운과 콤보 리스트를 만들 때 정말 유용해요. 마치 라디오 버튼과 체크 박스가 하나의 패키지에 들어있는 거 같아요.

라디오 버튼으로는 리스트에서 하나의 항목만 선택할 수 있다는 거 기억하세요 - 그런데 체크박스로는 여러 항목을 선택할 수 있답니다. select는 하나의 항목 또는 여러 항목을 선택할 수 있게 설정할 수 있어 더 유연해요.

select 태그의 단 한 가지 문제점은 스타일링 하기가 무척 까다롭다는 거예요. 합리적인 해결방안은 훌륭한 유틸리티 클래스를 제공 select 요소와 form을 스타일링 할 수 있게 해주는 CSS 라이브러리를 사용하는 거예요.

이 튜토리얼을 통해 select 태그가 익숙해져 여러분의 프로젝트에 사용할 수 있기를 바라요.

읽어주셔서 감사하고 코딩 계속해주세요!