드롭다운 메뉴(Dropdown menu), 셀렉트박스(Select box)

1. 셀렉트 박스, 드롭다운 메뉴

• 셀렉트ㅏ 박스와 드롭다운 메뉴는 같은 의미
• 메뉴 제목이 표시된 곳을 선택하면 메뉴 리스트가 아래로 펼쳐지며, 하단 항목을 클릭하면 그 항목이 선택되어 실행되는 가장 일반적인 메뉴

 

2. 드롭다운 리스트

• 드롭다운 메뉴(=셀렉트 박스) 내 화살표를 누르면 출력되는 리스트를 지칭
• 화살표를 누르면 숨어있던 항목들이 아래로 펼쳐져서 원하는 항목 선택 가능
• 다수의 선택할 수 있는 항목이 존재하고 유저가 1개의 값을 선택해야 하는 목적으로 많이 쓰임

 

3. 화면설계서 사용 예시

• 드롭다운 메뉴(=셀렉트 박스) 구성
  • title
    • 취미
  • 선택필드
    • Placeholder: 취미를 선택해주세요.
    • 삼각형 아이콘:선택 시 드롭다운 리스트 출력
  • 드롭다운 리스트
    • 리스트 항목: 클라이밍, 크로스핏, 스쿼시, 수영, 복싱
    • 삼각형 아이콘 선택 시 리스트 숨김(hidden)