HTML select 태그

■ 이번 포스팅에서는 html 양식 중에서 [select] 태그에 대해서 알아보겠습니다. select 태그는 '리스트 박스'와 '콤보 박스'를 만들 수 있는 태그인데요. 먼저 형식과 속성을 살펴보고, 예제를 만들어 가면서 자세히 살펴보도록 하겠습니다. 




■ 먼저 <select> 태그를 이용해서 묶어 주면 되구요. 이름과 출력된 항목의 수(size)와 multiple(여러 항목 선택) 등의 속성이 있는데요. 글로 설명 드리는 것보단 예제를 만들고 그림을 보면서 정리해볼게요. 







■ 먼저 첫 번째 예제는 size만 "3"으로 설정하고 option(항목)을 세 개 입력해봤습니다. 세 개의 프로그램을 항목으로 입력해봤는데요. 이렇게 하면 세 개 중 하나만 선택을 할 수 있게 됩니다. 이 예제를 인터넷에서 열어보겠습니다. 



■ 이렇게 리스트 박스가 만들어지고, 그 안에 option에 입력한 세 개의 프로그램 이름이 보여게 되는데요. 여기서는 한가지만 선택할 수 있습니다. 




 다음은 [multiple] 속성을 입력해보겠습니다. 



■ multiple은 단어의 뜻 그대로 목록 중에서 여러 개의 항목을 선택할 수 있다는 의미입니다. 여러 개를 선택할 때는 "Ctr"l을 누른 상태에서 마우스로 클릭해서 선택하면 




■ 이렇게 리스트 박스 안에 있는 여러 개의 항목을 동시에 선택할 수 있는 속성이 multiple 속성입니다. 




 다음은 size 속성을 제거해보겠습니다. 



■ size 속성을 제거하면 option 속성으로 입력한 항목들이 [콤보박스] 형태로 출력되는데요. 



■ 그림처럼 펼침버튼()이 생기면서 콤보박스 형태로 리스트를 출력되고, 선택한 option이 선택란에 보여게 됩니다. 


이렇게 해서 간단하게 select 태그에 대해서 알아봤는데요. '콤보 박스'와 '리스트 박스'의 차이를 아시겠죠? 마치기 전에 간략하게 정리하자면 size의 유무에 따라서 콤보와 리스트 박스로 바뀌고, multiple 속성에 따라서 여러 개의 항목을 선택할 수 있게 된다는 내용이었습니다. ^^ 수고하셨어요.