0Pricing
HTML Academy · 강의

select와 option 드롭다운 메뉴

select와 option으로 드롭다운 선택 메뉴 만들기

select와 option 드롭다운 메뉴은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

select 요소

<select> 요소는 드롭다운 메뉴를 만듭니다:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

옵션의 값과 텍스트

각 <option>에는 서버로 전송되는 value와 화면에 표시되는 텍스트가 있습니다:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

selected 속성

selected 속성으로 옵션을 미리 선택하십시오:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

범주별 옵션을 위한 옵션 그룹

<optgroup>으로 관련 옵션을 그룹화하십시오:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

multiple 속성

multiple 속성으로 여러 옵션을 선택할 수 있게 하십시오:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

size 속성

size 속성은 표시할 수 있는 옵션의 수를 제어합니다:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

비활성화된 옵션 및 그룹

개별 옵션이나 전체 그룹을 비활성화하십시오:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

select 스타일 지정

기본 <select>의 스타일 지정에는 제한이 있습니다 — 다음과 같은 작업은 가능합니다:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

사용자 지정 드롭다운과 기본 select 비교

사용자 지정 드롭다운 구성 요소를 고려할 때의 장단점:

  • 기본 select — 기본적으로 접근성을 지원하고, 모바일에 적합하며, JavaScript 없이 작동합니다
  • 사용자 지정 드롭다운 — 스타일을 완전히 제어할 수 있지만, ARIA를 완전히 구현하고 키보드 처리를 해야 합니다

대부분의 사용 사례에서는 기본 <select>을 우선 사용하십시오.

JavaScript에서 선택된 값 읽기

JavaScript로 선택된 값을 가져오거나 설정하십시오:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

자리 표시자 옵션 패턴

선택할 수 없는 자리 표시자 옵션을 만드십시오:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

빠른 확인

select 드롭다운 안에서 관련 옵션을 그룹화하는 요소는 무엇인가요?

복습: select 및 옵션

드롭다운 핵심 사항:

  • <select> + <option> — 드롭다운 메뉴
  • 옵션의 value — 서버로 제출되는 값
  • selected — 옵션을 미리 선택합니다
  • <optgroup label> — 관련 옵션을 그룹화합니다
  • multiple — 여러 항목을 선택할 수 있게 합니다
  • size — 드롭다운 없이 N개의 옵션을 표시합니다

자주 묻는 질문

“select와 option 드롭다운 메뉴” 강의는 무료인가요?

네 — “select와 option 드롭다운 메뉴” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“select와 option 드롭다운 메뉴”에서 뭘 배우나요?

select와 option으로 드롭다운 선택 메뉴 만들기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“select와 option 드롭다운 메뉴” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. select와 option 드롭다운 메뉴
  2. 여러 줄 입력을 위한 textarea
  3. 체크박스 및 라디오 버튼 그룹
  4. 자동 완성을 위한 datalist
← HTML Academy(으)로 돌아가기