HTML 입력 양식 태그 / select 태그 익히기

HTML 입력 양식 태그 / select 태그 익히기

[참고] HTML 입력 양식 태그 지난글

1. 개요 바로가기

2. 간단한 입력 양식 만들기

정말 간만에 HTML 포스팅을 한다. 최근 공부도 안하고 게을렀다.... 이번에는 입력 양식 태그의 마지막 <select>를 진행하려고 한다.

select 태그

select 태그는 목록으로 보여주는 항목 중 하나 or 여러 개를 선택할 수 있는 입력 양식 요소 이다. 

기본적으로는 하나만 선택할 수 있다. select 태그를 사용할 때는 optgroup, option 태그를 함께 사용한다. 예제코드로 바로 확인해보자!

   one
   two
   three
   four

one two three four

옵션을 선택할 수 있는 요소가 생성된게 보인다. 스마트폰에서는 내장된 옵션 선택화면을 사용하는데, 만약 내장된 화면이 싫고 커스텀을 하고 싶다면 직접 관련된 내용을 코딩해서 만들어야 한다.

위 예제에서는 고르는 항목 중 한 가지만 선택이 가능했다. 이제 여러 개를 선택할 수 있게 만들어보자! 

방법은 간단하다. select 태그에 multiple 속성을 추가하면 된다.

   one
   two
   three
   four

one two three four

스마트폰에서 확인하면 디자인이 보기 좋게 나오는데 데스크톱에서는 완전 별로다. 그리고 최근에는 select 태그를 사용하지 않아도 같은 기능을 수행하게 만들 수 있다고한다. 자바스크립트를 사용해 하나하나 만들면 된다고 하니 select 태그는 이런게 있다는 것만 알고 넘어가면 될 것 같다.