select

1 개요
2 문법
3 속성
4 예제

개요

select 태그는 드롭다운 목록을 생성하는 데 사용됩니다. 사용자는 이 드롭다운에서 하나 이상의 옵션을 선택할 수 있습니다.
드롭다운 목록의 내용은 option 태그로 만듭니다.

문법

<select>
  <option>...</option>
  <option>...</option>
  <option>...</option>
</select>

속성

select 태그에 사용하는 주요 속성은 다음과 같다.

autofocus : 페이지가 로드되었을 때 해당 목록으로 바로 포커스가 맞춰집니다.
disabled : 화면에는 보이지만 사용할 수 없도록 만듭니다.
multiple : 여러 값을 선택할 수 있도록 합니다.
name : 이름을 붙입니다.
size : 목록을 펼치기 전에 보여질 목록의 개수를 정합니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML Reference | select</title>
  </head>
  <body>
    <h1>General</h1>
    <form>
      <select>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Autofocus</h1>
    <form>
      <select autofocus>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Disabled</h1>
    <form>
      <select disabled>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Multiple</h1>
    <form>
      <select multiple>
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
    <h1>Size</h1>
    <form>
      <select size="2">
        <option>Lorem</option>
        <option>Ipsum</option>
        <option>Dolor</option>
        <option>Amet</option>
      </select>
    </form>
  </body>
</html>

HTML / Reference / br

HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.

HTML / Reference / label

label은 폼의 양식에 이름 붙이는 태그입니다. 주요 속성은 for입니다. label의 for의 값과 양식의 id의 값이 같으면 연결됩니다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나, 체크를 하거나, 체크를 해제합니다.

HTML / Reference / q

q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.

HTML / Reference / del, ins

del과 ins 태그는 HTML에서 텍스트의 수정 이력을 표현하는 데 사용됩니다. del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.

HTML / Reference / address

address는 소유자 또는 작성자의 연락처를 나타내는 태그입니다. body 태그 안에 있으면 문서의 소유자 또는 작성자의 연락처를 나타냅니다. article 태그 안에 있으면 기사의 소유자 또는 작성자의 연락처를 나타냅니다. 기본 모양은 기울임꼴입니다.

HTML / Reference / video

video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.

HTML / Reference / figure, figcaption

figure는 사진, 이미지, 다이어그램 등을 감싸는 테그입니다. figcaption은 figure 요소에 캡션을 만듭니다. figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치합니다.

HTML / Reference / input type="time"

type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.

HTML / Reference / input type="radio"

radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.

HTML / Reference / input type="range"

type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.