💡 퀵 접속: htm.kr/select
Select 태그는 HTML 문서에서 드롭다운 목록을 생성하는 데 사용되는 태그입니다. 사용자가 여러 옵션 중에서 하나 또는 여러 개를 선택할 수 있게 해주며, `option` 태그와 함께 사용됩니다.
<div class="form-group">
<label for="country">국가 선택:</label>
<select id="country" name="country">
<option value="">국가를 선택하세요</option>
<option value="kr">대한민국</option>
<option value="us">미국</option>
<option value="jp">일본</option>
<option value="cn">중국</option>
</select>
</div>
<div class="form-group">
<label for="languages">사용 가능한 언어:</label>
<select id="languages" name="languages" multiple>
<option value="ko">한국어</option>
<option value="en">영어</option>
<option value="ja">일본어</option>
<option value="zh">중국어</option>
</select>
</div>| 속성 | 설명 | 예시 |
|---|---|---|
| name | 선택 필드 이름 | <select name="country"> |
| id | 선택 필드 식별자 | <select id="country"> |
| multiple | 다중 선택 가능 | <select multiple> |
| required | 필수 선택 | <select required> |
| size | 표시할 옵션 수 | <select size="3"> |
| disabled | 비활성화 | <select disabled> |
<form class="user-form">
<div class="form-group">
<label for="job-category">직무 분야</label>
<select id="job-category" name="job-category" required>
<option value="">직무 분야를 선택하세요</option>
<optgroup label="개발">
<option value="frontend">프론트엔드 개발</option>
<option value="backend">백엔드 개발</option>
<option value="mobile">모바일 개발</option>
</optgroup>
<optgroup label="디자인">
<option value="ui">UI 디자인</option>
<option value="ux">UX 디자인</option>
<option value="graphic">그래픽 디자인</option>
</optgroup>
</select>
<span class="error-message">직무 분야를 선택해주세요.</span>
</div>
<div class="form-group">
<label for="skills">보유 기술</label>
<select id="skills" name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="react">React</option>
<option value="node">Node.js</option>
<option value="python">Python</option>
<option value="java">Java</option>
</select>
<small>Ctrl(Windows) 또는 Command(Mac) 키를 누른 상태에서 여러 개 선택할 수 있습니다.</small>
</div>
<div class="form-group">
<label for="experience">경력</label>
<select id="experience" name="experience">
<option value="">경력을 선택하세요</option>
<option value="0">신입</option>
<option value="1-3">1-3년</option>
<option value="4-7">4-7년</option>
<option value="8-10">8-10년</option>
<option value="10+">10년 이상</option>
</select>
</div>
<div class="form-buttons">
<button type="submit" class="submit-btn">제출</button>
<button type="reset" class="reset-btn">초기화</button>
</div>
</form><style>
/* 폼 컨테이너 스타일 */
.user-form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 폼 그룹 스타일 */
.form-group {
margin-bottom: 20px;
}
/* 라벨 스타일 */
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #333;
}
/* 선택 필드 스타일 */
select {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
background-color: #fff;
cursor: pointer;
}
/* 옵션 그룹 스타일 */
optgroup {
font-weight: 600;
color: #666;
}
/* 옵션 스타일 */
option {
padding: 8px;
}
/* 다중 선택 스타일 */
select[multiple] {
height: auto;
min-height: 100px;
}
/* 에러 메시지 스타일 */
.error-message {
display: none;
color: #dc3545;
font-size: 14px;
margin-top: 5px;
}
/* 도움말 텍스트 스타일 */
small {
display: block;
color: #666;
font-size: 12px;
margin-top: 5px;
}
/* 버튼 스타일 */
.form-buttons {
display: flex;
gap: 10px;
margin-top: 20px;
}
.submit-btn,
.reset-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.submit-btn {
background-color: #007bff;
color: #fff;
}
.reset-btn {
background-color: #6c757d;
color: #fff;
}
/* 반응형 스타일 */
@media (max-width: 768px) {
.user-form {
padding: 15px;
}
.form-buttons {
flex-direction: column;
}
.submit-btn,
.reset-btn {
width: 100%;
}
}
</style>select 태그가 올바르게 사용되었는지 확인하는 방법: