-
HTML5 - Form 셀렉트 박스(Select box) 만들기front-end/HTML 2021. 10. 14. 19:42728x90
이번 포스팅에서는 HTML에서 많이 사용되는 셀렉트 박스를 구현해보는 시간을 가져보겠다.
Select box(셀렉트 박스)?
- 셀렉트 박스는 콤보 박스라고도 하며, Pull-Down Menus라고도 한다.
- 주로 회원가입시에 많이 볼 수 있다.
네이버 회원 가입 셀렉트 박스
Select box 구현 하기
- 네이버 회원 가입시 성별 셀렉트 박스를 만들어보자.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <body> <form> <fieldset> <legend>성별</legend> <div> <select name="sex"> <option value="">성별</option> <option value="man"> 남자 </option> <option value="girl"> 여자 </option> <option value="none"> 선택 안함 </option> </select> </div> </fieldset> <input type="reset" value="초기화" /> </form> </body> </html>
https://codesandbox.io/s/festive-tesla-f6jq3?file=/index.html 에서 확인 가능하다
festive-tesla-f6jq3 - CodeSandbox
festive-tesla-f6jq3
codesandbox.io
정리 및 느낀 점
- Select box를 구현하기 위해서는 Select 안에 option tag들을 넣어서 구현할 수 있었다.
- select, option tag가 없이 구현할 수는 있지만, 이 방법이 훨씬 간편하고 초기화하기도 쉽다.
- 어떤 기능을 구현하기에 앞서 모두 다 구현하려고 하기보다는 기존에 html에서 제공되는 게 있는지, 확인하고 개발하는 게 매우 중요하다는 것을 다시 한번 느꼈다.
참고
https://developer.mozilla.org/ko/docs/Web/HTML/Element/select
728x90'front-end > HTML' 카테고리의 다른 글
HTML - 웹페이지 기본 태그 (html, head, body) (0) 2021.10.21 HTML5 시맨틱(Semantic) 요소 (0) 2021.10.06 HTML 이란? (0) 2021.10.04