[HTML] 드롭다운 리스트(목록) 만들기

사용자가 여러 옵션 중에서 하나를 선택하도록 하고 싶을 때 드롭다운 리스트를 사용합니다. 드롭다운 리스트란 클릭 했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 생긴 명칭입니다. 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다.
 

 
드롭다운 리스트는 <select> 태그와 <option> 태그를 사용하여 생성합니다. <select> 태그로 드롭다운 목록의 시작과 끝을 표시하고 그 안에 <option> 태그를 사용해 원하는 항목들을 추가합니다.
 

 드롭다운 리스트 만들기 

See the Pen 드롭다운 리스트1 by wjdxo513 (@wjdxo513) on CodePen.

 
드롭다운 리스트는 위 예제처럼 <select> 태그를 사용하여 드롭다운 리스트를 만들고, <option> 태그를 사용하여 드롭다운 리스트 내에 선택할 수 있는 항목들을 만들어주면 됩니다. 여기서 value 속성은 해당 항목이 선택되었을 때 서버로 전송되는 값입니다.
 
또한, <option> 태그의 내용은 드롭다운 리스트에 표시되는 텍스트입니다. 위 코드에서는 "선택하세요"라는 기본적인 텍스트가 드롭다운 리스트의 첫 번째 항목으로 표시됩니다. 이 항목은 선택되어도 실제로 서버로 전송되는 값이 없도록 value 속성이 빈 문자열로 설정되어 있습니다.
 

<select> 태그의 속성들 (크기 지정, 다중선택)

See the Pen 드롭다운 리스트2 by wjdxo513 (@wjdxo513) on CodePen.

• size : 화면에 표시 될 드롭다운 메뉴의 항목 개수를 지정합니다.
• multiple : 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 Ctrl을 누른 상태로 드롭다운 리스트에 있는 여러 항목을 선택할 수 있습니다.

드롭다운 리스트의 시작을 알리는 <select>태그에는 size와 multiple 속성이 있습니다. 위의 예제처럼 size는 드롭다운 리스트를 한 번에 보여주는 숫자를 지정할 수 있고 multiple 속성을 지정하여 드롭다운 목록에서 여러 항목을 동시에 선택할 수 있게끔 할 수 있습니다. 
 

<option> 태그의 속성들 (값, 기본값)

See the Pen 드롭다운리스트3 by wjdxo513 (@wjdxo513) on CodePen.

• value : 옵션을 선택했을 때 서버로 넘겨질 값을 지정합니다.
• selected : 화면에 표시될 때 기본으로 선택되어 있는 옵션을 지정합니다.

드롭다운 리스트의 항목을 설정하는 <option> 태그에는 value와 selected 속성이 있습니다. 위의 예제처럼 <option> 태그에 selected를 설정하면 기본 선택이 지정되며 서버로 전송했을 때는 select 된 항목의 value 값이 서버로 전송되게 됩니다.
 

<optgroup> 태그 같은 리스트 묶기

See the Pen 드롭다운 리스트4 by wjdxo513 (@wjdxo513) on CodePen.

 
드롭다운 리스트에서 여러 항목들을 몇 가지 그룹으로 묶어야 할 경우에 위의 예제처럼 <optgroup> 태그를 사용할 수 있습니다. <optgroup> 태그를 사용하면 label 속성을 이용해서 위와 같이 드룹다운 리스트의 항목 그룹의 제목을 붙일 수 있습니다.