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

 

사용자로부터 선택 입력을 받을 수 있는 콤보박스(드롭다운 박스)를 만드는 방법을 알아보도록 하겠습니다.

 

 

기본 콤보박스 만들기

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

HTML에서 콤보박스를 만들기 위해서는 <select>, <option>을 사용합니다.

<select> 태그 안에 <option> 태그를 포함시키고, 선택할 값들을 <option> 태그 안에 지정해 줍니다.

 

 

기본값(default) 지정

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

기본값을 지정하지 않으면 가장 위에 있는 값이 기본으로 선택됩니다.

특정한 값 하나를 기본값(default)으로 지정하고 싶으면,

위와 같이 기본으로 지정하고 싶은 값의 <option> 태그에 'selected'라고 지정해주면,

해당 항목이 기본값으로 지정이 되고,

화면을 열었을 때 그 값이 자동으로 선택되게 됩니다.

 

 

콤보박스 비활성화

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

사용자가 콤보박스의 값을 수정하지 못하도록 콤보박스를 비활성화해야 할 때가 있습니다.

그럴 때는 <select> 태그에 'disabled'라고 써주면,

콤보박스가 비활성화 되고, 사용자가 콤보박스의 값을 변경할 수 없게 됩니다.

 

 

 

특정한 항목만 비활성화 하기 (특정 항목 선택 금지 시키기)

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

콤보박스에 나타나는 여러 항목 중, 특정한 항목을 선택할 수 없게 만들기 위해서는

해당 항목의 <option>에 'disabled'라고 써주면

해당 항목은 콤보박스 리스트에 보여지지만, 선택은 할 수 없게 됩니다.

 

 

특정한 항목만 목록에서 안보이도록 하기

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

특정한 항목을 콤보박스의 리스트에서 보여지지 않도록 해야 할 때는

<option>에 'hidden'이라고 지정해 줍니다.

그러면, 해당 항목은 콤보박스 목록에서 보여지지 않게 되고,

당연히 사용자는 그 항목을 선택할 수도 없게 됩니다.

 

 

 

여기까지 HTML에서 콤보박스를 만들고 활용하는 방법을 알아보았습니다.

다음 번에는 계속해서, 콤보박스의 크기를 늘리는 방법, 카테고리를 구분하는 방법 등을 알아보도록 하겠습니다.