HTML에서 <select> 요소에 한 번에 표시되는 옵션의 개수를 지정하려면 size 속성을 사용하면 됩니다.
기본적으로 드롭다운 목록은 클릭했을 때 옵션이 펼쳐지지만, size 속성에 원하는 숫자를 지정하면 해당 개수만큼의 옵션이 화면에 항상 표시됩니다.
예제
다음 코드를 실행하여 size 속성이 어떻게 동작하는지 직접 확인해 보세요.
<!DOCTYPE html> <html> <body> <p>지금까지 방문한 국가를 선택하세요,</p> <select size = "5"> <option value = "india">인도</option> <option value = "us">미국</option> <option value = "canada">캐나다</option> <option value = "aus">호주</option> <option value = "bangladesh">방글라데시</option> </select> </body> </html>
설명
위 예제에서 size = "5"로 지정했기 때문에 드롭다운을 열지 않아도 다섯 개의 국가 옵션이 동시에 화면에 나타납니다. 만약 옵션의 총 개수가 size 값보다 많다면 스크롤바가 자동으로 생성되어 나머지 옵션을 탐색할 수 있습니다.
또한 size 속성을 1보다 큰 값으로 설정하면 여러 항목을 선택할 수 있는 목록 형태로 동작하며, 이 경우 Ctrl(Windows) 또는 Command(Mac) 키를 누른 상태에서 클릭하면 복수 선택도 가능합니다.