[개미의 걸음 HTML&CSS 6차시] 드롭다운 목록을 생성하는 태그(select, optgroup, option)

<select>, <option>,<optgroup>태그

<select>
    <option>내용1</option>
    <option>내용2</option>
             :
             :
</select>

<select>
    <optgroup label="옵션의 그룹명1">
        <option>옵션1</option>
        <option>옵션2</option>
                 :
                 :
    </optgroup>
    <optgroup label="옵션의 그룹명2">
        <option>옵션1</option>
        <option>옵션2</option>
                 :
                 :
    </optgroup>
</select>

• <select> 태그를 이용하여 드롭다운 목록을 생성할 수 있음
• <option>태그를 이용하여 드롭다운 목록에 들어갈 옵션들을 설정할 수 있음
• <optgroup>태그를 이용하여 옵션들을 그룹별로 묶을 수 있음

 

   <select>태그의 주요속성

주요 속성	설    명
size	화면에 표실될 드롭다운 메뉴의 항목 개수를 지정
multiple	브라우저 화면에 여러 개의 옵션이 전부 표시됨 [ctrl]키를 눌린 채 클릭하면 여러 항목을 선택 가능

 

   <option>태그의 주요속성

주요 속성	설    명
value	옵션을 선택했을 때 서버로 넘겨질 값을 설정하는 속성
selected	화면에 표시될 때 기본으로 선택되는 옵션을 설정하는 속성