CodeGym/행동/Frontend SELF KO/다중 선택과 리스트

다중 선택과 리스트

사용 가능

5.1 <select> 요소

HTML 폼에서 <select>, <option> 그리고 <optgroup> 요소는 드롭다운 리스트와 다중 선택 리스트를 만드는 데 사용돼. 덕분에 사용자가 미리 정해진 값의 세트에서 하나 또는 여러 옵션을 선택할 수 있어.

<select> 요소는 드롭다운 리스트를 만드는 데 사용돼. 이 요소는 선택할 수 있는 가능성 있는 옵션들을 나타내는 하나 이상의 <option> 요소를 포함하고 있어.

사용 예시:

HTML
<label for="country">나라 선택:</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="mx">Mexico</option>
</select>

<select>의 주요 속성

name 속성: 폼 요소의 이름을 설정하며 선택된 값과 함께 서버로 전송돼.

HTML
<select name="country"></select>

id 속성: 요소의 고유 식별자를 설정하며, <label> 요소와 연결하는 데 사용돼.

HTML
<select id="country" name="country"></select>

multiple 속성: 사용자가 여러 옵션을 동시에 선택할 수 있도록 해. 외관상으로는 리스트가 여러 줄로 표시돼.

HTML
<select name="fruits" id="fruits" multiple>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="cherry">Cherry</option>
</select>

size 속성: 드롭다운 리스트에서 보이는 줄 수를 설정해. 스크롤이 가능한 리스트를 만드는 데 유용해.

HTML
<select name="cities" size="4">
  <option value="ny">New York</option>
  <option value="la">Los Angeles</option>
  <option value="chicago">Houston</option>
</select>

5.2 <option> 요소

<option> 요소는 사용자가 선택할 수 있는 각 옵션을 정의하기 위해 <select> 안에 사용돼.

사용 예시:

HTML
<select name="color">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<option>의 주요 속성:

value 속성: 이 옵션 선택 시 서버로 전송될 값을 설정해.

HTML
<option value="red">Red</option>

selected 속성: 기본적으로 이 옵션이 선택되어야 하는지를 결정해.

HTML
<option value="green" selected>Green</option>

disabled 속성: 이 옵션을 선택 불가능하게 만들어.

HTML
<option value="blue" disabled>Blue</option>

5.3 <optgroup> 요소

<optgroup> 요소는 <select> 내에서 관련된 옵션들을 그룹화하는 데 사용돼. 이 요소를 통해 드롭다운 리스트를 더 조직적이고 이해하기 쉽게 카테고리로 나눌 수 있어.

사용 예시:

HTML
<select name="car">
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Japanese Cars">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
    <option value="nissan">Nissan</option>
  </optgroup>
</select>

<optgroup>의 주요 속성:

label 속성: 옵션 그룹의 제목을 설정해.

HTML
<optgroup label="German Cars"></optgroup>

disabled 속성: 이 그룹 내의 모든 옵션을 선택 불가능하게 만들어.

HTML
<select name="car">
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Japanese Cars" disabled>
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
    <option value="nissan">Nissan</option>
  </optgroup>
</select>

<select>, <option> 및 <optgroup> 사용에 대한 유용한 팁

  1. 논리적 그룹화: <optgroup>을 사용하여 관련된 옵션들을 논리적으로 그룹화해봐. 이렇게 하면 폼이 사용자에게 더 편리하게 느껴질 거야.
  2. 다중 선택: 사용자가 여러 옵션을 선택할 수 있도록 하려면, <select>multiple 속성을 사용해봐.
  3. 접근성: 폼 요소의 접근성을 향상시키기 위해 idlabel 속성을 사용해. 올바른 label 사용은 보조 기술을 사용하는 사용자를 포함해 모든 사용자와의 상호작용을 개선시킬 수 있어.
  4. 스타일링: 드롭다운 리스트와 다중 선택 리스트의 외관을 개선하기 위해 CSS를 사용해. 예를 들어:
CSS
select {
  width: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
1
과제
Frontend SELF KO,  레벨 8레슨 5
잠금
나라 선택
나라 선택
1
과제
Frontend SELF KO,  레벨 8레슨 5
잠금
자동차 선택
자동차 선택
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다