HTML5+CSS3]4-4 여러 데이터 나열해 보여 주기

https://www.youtube.com/user/easyspub

 

easyspub

✔<select>, <optgroup>, <option>태그 : 드롭다운 목록 만들기

👉기본형

<select 속성="속성 값">

<option value="값" [속성="속성 값"]> 내용1 </option>

<option value="값" [속성="속성 값"]> 내용2 </option>

<option value="값" [속성="속성 값"]> 내용3 </option>

</select>

 

👉여러 옵션중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용한다.

👉공간을 최소한으로 사용하면서 여러 옵션을 표시하려면 드롭다운 목록이 가장 적합하다.

<select>태그로 ㅡ롭다운 목록의 시작과 끝을 표시하고 그 안에 <option>태그를 사용해 원하는 항목들을 추가한다.

<option>태그에는 value 속성을 이용해 서버로 넘겨주기 위한 값을 지정한다.

 

👉<select>태그의 속성

<select>태그를 사용해 만든 드롭다운 목록은 기본적으로 한 가지 옵션이 표시된다.

 

👉<option>태그의 속성

드롭다운 목록에 표시되는 옵션들은 <option>태그를 이용해 지정한다.

 

 

✔<optgroup>태그 : 옵션끼리 묶기

👉여러 항목들을 몇가지 그룹으로 묶어야 할 경우 사용한다.

label속성을 사용해 그룹의 제목을 붙인다.

 

✔<datalist>태그, <option>태그

👉기본형

<input type="text" list="이터 목록 id">

<datalist id="데이터 목록 id">

<option>  ~ </option>

<option> ~ </option>

👉데이터 목에 제시한 값 중에서 선택하면 그 값이 자동으로 입력된다.

<input>태그의 list 속성 값과 데이터 목록의 id를 같게 만든다.

<datalist>태그를 이용해 데이터 목록의 시작과 끝을 표시하고 그 사이에 <option>태그를 사용해 각 데이터 옵션을 표시한다.

👉이때 <option>태그에는 value속성과 label속성을 사용할 수 있다.

 

 

✔<textarea>태그 : 여러 줄 입력하는 텍스트 영역 만들기

👉기본형 : <textarea [속성="속성 값"]> 내용 </textarea>

👉직접 여러 줄의 텍스트를 입력하는 영역을 만들수 있다.

게시판에서 게시물을 입력하거나 회원가입 양식에서 사용자 약관을 표시할 때 자주 사용한다.

👉<textarea>태그의 속성