select element - by. UXKM

2025-05-16

요약 설명
<select> 요소는 웹 폼에서 미리 정의된 여러 옵션 중 하나 또는 여러 개를 선택할 수 있는 드롭다운 목록을 생성하는 시맨틱 태그입니다.
내부에 <option> 요소들을 포함하여 선택지를 정의하며, multiple 속성을 지정하면 다중 선택도 가능합니다.
<select> 요소는 기본적으로 첫 번째 <option>이 선택된 상태로 화면에 표시되지만, selected 속성을 사용해 다른 옵션을 초기 선택값으로 지정할 수도 있습니다.
사용자 입력을 제한하고, 정형화된 값 선택을 유도할 때 유용하게 사용됩니다.

주요 역할 및 특징

드롭다운 목록 제공
- <select> 요소는 기본적으로 드롭다운 형태의 선택 목록을 생성합니다.
- 사용자는 하나 또는 여러 개의 옵션을 선택할 수 있습니다.
사용자가 선택할 수 있는 옵션 목록 제공
- <select> 내부에는 여러 개의 <option> 요소가 포함되어야 합니다.
- <option> 요소를 사용하여 각 선택지를 정의할 수 있습니다.
단일 선택 및 다중 선택 가능
기본적으로 하나의 옵션만 선택할 수 있지만, multiple 속성을 사용하면 여러 개의 옵션 선택이 가능합니다.
optgroup 요소를 사용해 옵션 그룹화 가능
<optgroup> 요소를 사용하면 옵션을 논리적으로 그룹화할 수 있습니다.
폼과 연동 가능
- <select> 요소는 name 속성을 통해 폼 데이터로 전송될 수 있습니다.
- 선택된 값은 서버로 제출됩니다.
기본 스타일이 다름
브라우저마다 <select> 요소의 기본 디자인이 다르므로, CSS 스타일을 직접 지정하는 것이 좋습니다.

CSS 기본 값

<select> 요소는 기본적으로 인라인 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							select {
								display: inline-block;
								margin: 0;
								background-color: white;  /* 브라우저마다 다름 */
								border: 1px solid black;  /* 브라우저마다 다름 */
								box-sizing: border-box;
								cursor: default;
							}

기본 문법

							<select name="category">
								<option value="1">옵션 1</option>
								<option value="2">옵션 2</option>
								<option value="3">옵션 3</option>
							</select>

속성

`<select>` 속성 요약

속성명
설명

name

서버로 전송할 때 사용될 이름을 지정
multiple

여러 개의 옵션을 선택할 수 있도록 허용
size

보이는 옵션 개수를 지정
disabled

선택 상자를 비활성화
autofocus

페이지 로드 시 자동으로 포커스 설정
required

반드시 하나 이상의 옵션을 선택하도록 설정
form

특정 <form>과 연결

[name] 선택 사항 <select name="값">

<select> 요소의 이름을 지정하여, 폼 제출 시 해당 필드의 데이터를 식별하고 서버로 전송할 키 값으로 활용됩니다.

								<select name="city" id="city">
									<option value="seoul">서울</option>
									<option value="busan">부산</option>
								</select>

[multiple] Boolean - 선택 사항 <select multiple>

하나의 <select> 요소에서 여러 개의 옵션을 선택할 수 있도록 허용합니다.
Ctrl(Windows) 또는 Command(Mac) 키를 누른 상태에서 여러 개 선택 가능합니다.

								<select name="fruits" id="fruits" multiple>
									<option value="apple">사과</option>
									<option value="banana">바나나</option>
									<option value="grape">포도</option>
								</select>

[size] 선택 사항 <select size="number">

size 속성은 <select> 요소에서 한 번에 표시되는 옵션 항목의 개수를 지정합니다.
size 속성을 설정하면 지정된 개수만큼 옵션 목록이 펼쳐진 상태로 표시되며, 드롭다운 형태가 아닌 내부 스크롤이 있는 목록 형태로 변경됩니다.

								<select name="animals" id="animals" size="3">
									<option value="dog">개</option>
									<option value="cat">고양이</option>
									<option value="rabbit">토끼</option>
								</select>

[disabled] Boolean - 선택 사항 <select disabled>

<select> 요소를 비활성화하여 사용자가 옵션 항목을 선택할 수 없도록 설정하는 속성으로, disabled 속성이 적용되면 스타일도 비활성화된 상태로 변경됩니다.

								<select name="drinks" id="drinks" disabled>
									<option value="coffee">커피</option>
									<option value="tea">차</option>
								</select>

[autofocus] Boolean - 선택 사항 <select autofocus>

페이지가 로드될 때 해당 요소에 자동으로 포커스를 받도록 설정하는 속성으로, 한 문서 내에서 하나의 요소에만 적용할 수 있습니다.

								<select name="color" id="color" autofocus>
									<option value="red">빨강</option>
									<option value="blue">파랑</option>
								</select>

[required] Boolean - 선택 사항 <select required>

사용자가 반드시 하나의 옵션을 선택하도록 강제합니다.
폼 제출 시 required 속성이 적용된 <select> 요소에서 옵션이 선택되지 않은 경우, 브라우저는 자동으로 유효성 검사를 수행합니다.
이때 사용자는 옵션을 선택해야 하며, 그렇지 않으면 브라우저가 경고 메시지를 표시하여 선택을 유도합니다.

								<select name="country" id="country" required>
									<option value="">-- 선택하세요 --</option>
									<option value="korea">대한민국</option>
									<option value="japan">일본</option>
								</select>

[form] 선택 사항 <select form="form 요소의 id">

<select> 요소의 form 속성에 <form> 요소의 id와 같은 값을 지정하여, <select> 요소가 <form> 요소 내부에 없더라도 <form>의 데이터로 제출되도록 설정할 수 있습니다.

								<form id="userForm" action="submit.php">
									<button type="submit">전송</button>
								</form>

								<select name="job" id="job" form="userForm">
									<option value="developer">개발자</option>
									<option value="designer">디자이너</option>
								</select>