HTML / Reference / select
개요
- 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>
em 태그는 주로 말투나 감정적인 강조 또는 문장의 맥락에서 중요한 부분을 나타낼 때 사용합니다. strong 태그는 중요성, 경고 또는 텍스트에서 매우 중요한 정보를 나타낼 때 사용됩니다.
abbr은 약자(abbreviation)임을 나타냅니다. title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻이 툴팁으로 나옵니다.
q는 인용임을 나타내는 태그입니다. 인용임을 나타내는 태그에는 blockquote와 q가 있는데, blockquote는 블록 요소이고 q는 인라인 요소입니다.
del과 ins 태그는 HTML에서 텍스트의 수정 이력을 표현하는 데 사용됩니다. del은 텍스트를 삭제했음을 나타냅니다. 취소선이 있는 게 기본 모양입니다. ins는 새로 추가되었음을 나타냅니다. 밑줄이 있는 게 기본 모양입니다.
blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
caption은 표에 제목을 붙일 때 사용합니다. caption 태그는 반드시 table 태그 내부에 있어야 하며, thead, tbody, tr 등의 다른 테이블 요소들보다 먼저 위치해야 합니다. 기본 위치는 표 위 가운데입니다. 위치는 CSS의 caption-side로 정합니다.
HTML / Reference / input type="number"
type이 number인 input은 숫자를 입력받는 양식입니다. 숫자 이외의 값을 입력하면 경고 메시지를 출력합니다. 숫자 범위, 값의 증감 단위 등을 설정할 수 있는 다양한 속성을 제공합니다. 이 입력 필드는 나이, 수량, 가격 등의 숫자 데이터를 입력받을 때 유용합니다.
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.
progress는 HTML5에서 제공하는 태그로, 작업의 진행 상태를 나타내기 위해 사용됩니다. 주로 파일 업로드, 다운로드, 로딩 진행 상황 등을 시각적으로 보여줄 때 유용합니다. progress 태그는 기본적으로 게이지 형태로 표시되며, 사용자가 커스텀 스타일을 적용할 수도 있습니다.