프론트엔드 개발자가 알아야 할 UI요소

UI 요소들을 이해하고 구현하는 방법을 익히자.

제품을 만들때 사용자의 입장에서 생각하고 어떤 UI가 좋을지 고민하자. 

적절한 UI를 선택해 사용성, 편의성을 높이자.

 

1. 아코디언(Accordion)

2. 벤토 메뉴(Bento Menu)

3. 브레드크럼(Breadcrumb)

4. 버튼(Button)

5. 카드(Card)

6. 캐러셀(Carousel)

7. 체크박스(Checkbox)

8. 코멘트(Comment)

9. 도너 메뉴(Doner Menu)

10. 드롭 다운(Dropdown)

11. 피드(Feed)

12. 폼(Form)

13. 햄버거 메뉴(Hamburger Menu)

14. 아이콘(Icon)

15. 인풋 필드(Input Field)

16. 케밥 메뉴(Kebab Menu)

17. 로더(Loader)

18. 미트볼 메뉴(Meatballs Menu)

19. 모달(Modal)

20. 뱃지(Badge)

21. 페이지네이션(Pagenation)

22. 픽커(Picker)

23. 프로그레스 바(Progress Bar)

24. 라디오 버튼(Radio Button)

25. 서치 필드(Search Field)

26. 사이드바(Sidebar)

27. 슬라이더 컨트롤(Slider Control)

28. 스텝퍼(Stepper)

29. 태그(Tag)

30. 탭 바(Tab Bar)

31. 툴팁(Tooltip)

32. 토글(Toggle)