[HTML] 콤보박스(select) (2) - 사이즈 지정, 중복선택, 카테고리 설정

 

지난 번에는 콤보박스(select)를 활용하는 기본적인 방법들을 알아보았습니다.

 

[HTML] 콤보박스(select) (1) - 기본값 지정, 비활성화, 항목 비활성화

 

이번에는 콤보박스의 사이즈를 지정하는 법, 중복 선택이 가능하도록 설정하는 법, 카테고리를 설정하는 법을 알아보도록 하겠습니다.

 

 

 

콤보박스의 사이즈 늘리기

See the Pen select by anna (@hianna) on CodePen.

위와 같이 <select> 태그에 'size' 속성을 지정해 주면

드롭다운 목록이 아닌, 선택 목록이 지정된 크기만큼 보여지게 됩니다.

선택 항목의 갯수보다 size가 작으면 자동으로 스크롤이 생성됩니다.

 

 

콤보박스 중복 선택 설정하기

See the Pen select by anna (@hianna) on CodePen.

콤보박스에 나타난 항목을 중복 선택할 수 있도록 하기 위해서는

<select> 태그에 'multiple'을 지정해 줍니다.

이렇게 설정이 되면,

'shift' 또는 'ctrl' 키를 누르고 항목을 선택하면

중복으로 항목 선택이 가능하게 됩니다.

 

 

콤보박스 항목에 카테고리 설정하기

See the Pen select by anna (@hianna) on CodePen.

콤보박스 항목에 <optgroup> 태그를 사용하면

콤보박스에 나오는 항목의 카테고리를 구분하여 보여줄 수 있습니다.

<optgroup>의 'label' 속성에는 카테고리를 구분할 때 보여줄 text를 넣어줍니다.

 

 

 

여기까지 콤보박스의 여러가지 설정들을 알아보았습니다.