HTML <option> 태그

<select name="country">
    <option value="kr">대한민국</option>
    <option value="us">미국</option>
    <option value="jp">일본</option>
    <option value="cn">중국</option>
</select>

<select name="size">
    <option value="s">Small</option>
    <option value="m" selected>Medium</option>
    <option value="l">Large</option>
    <option value="xl" disabled>X-Large</option>
</select>

<!-- 1. 카테고리 선택 -->
<div class="form-group">
    <label for="category">카테고리 선택</label>
    <select id="category" name="category" class="form-select">
        <option value="">카테고리를 선택하세요</option>
        <optgroup label="프론트엔드">
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="js">JavaScript</option>
        </optgroup>
        <optgroup label="백엔드">
            <option value="node">Node.js</option>
            <option value="python">Python</option>
            <option value="java">Java</option>
        </optgroup>
    </select>
</div>

<!-- 2. 다중 선택 -->
<div class="form-group">
    <label for="skills">보유 기술</label>
    <select id="skills" name="skills" multiple class="form-select">
        <option value="react">React</option>
        <option value="vue">Vue.js</option>
        <option value="angular">Angular</option>
        <option value="svelte">Svelte</option>
    </select>
</div>

<!-- 3. 스타일링 예제 -->
<style>
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #333;
}

.form-select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    font-size: 1rem;
}

.form-select:focus {
    outline: none;
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.form-select option {
    padding: 0.5rem;
}

.form-select optgroup {
    font-weight: 600;
    color: #666;
}

.form-select option:disabled {
    color: #999;
    background-color: #f5f5f5;
}
</style>