[HTML] 드롭다운 리스트(목록) 만들기
- Web/HTML, CSS
- 2023. 4. 24.
사용자가 여러 옵션 중에서 하나를 선택하도록 하고 싶을 때 드롭다운 리스트를 사용합니다. 드롭다운 리스트란 클릭 했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 생긴 명칭입니다. 공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적당합니다.
드롭다운 리스트는 <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 속성을 이용해서 위와 같이 드룹다운 리스트의 항목 그룹의 제목을 붙일 수 있습니다.
'Web > HTML, CSS' 카테고리의 다른 글
[HTML] 체크박스 만들기 (input type="checkbox") (0) | 2023.04.28 |
---|---|
[HTML] 라디오 버튼 만들기 (input type="radio") (0) | 2023.04.27 |
[HTML/CSS] float 속성 사용법 총정리 (왼쪽 or 오른쪽에 배치하기) (0) | 2023.04.03 |
[CSS] CSS 주석 처리하는 법 & 단축키 (0) | 2023.04.02 |