2023.09.19
현재 진행중인 배달 앱에 써먹기 좋을 만한 기능들 정리해놓기
1. Container
- 반응형 웹 -> 화면 사이즈에 따른 설정 필요
2. Floating labels
- input + label 을 같이써서 박스를 만들고 있다.
- 지금 구현하려는 배달 시스템에 사업자 번호, 가이드라인을 할 때 사용하기 유용
3. Validation
- 입력이 되지 않는 곳은 활성화가 되어 있다.
4. Alerts
- 알림이나 경고성 메시지 표시에 유리
5. Breadcrumb
- 링크의 위치 표시, 현재 어디 있는지
6. Card
- 쇼핑몰, 숙박업소 같은 곳에서 흔히 볼 수 있는 , 사용성 많은 카드
7. Carousel
- 홈페이지의 대표 이미지들 -> 슬라이드로 여러 이미지들을 볼 수 있는 형태
- 넘어가는 형태를 시간 경과에 따라, 혹은 사용자 클릭에 따라 조정 가능
8. Dropdowns
- 밑에 슬라이드를 내려서 카테고리 선택 가능
9. Listgroup
- 완료한 것들, 알림, 상태창 등 표시하기에 적당
10. Modal
- 팝업 창 띄워주는 기능
- 정보성 팝업은 -> 밖에 클릭해도 나갈 수 있음
- static속성은 -> 안에 내용물을 입력해야 나갈 수 있음
- 모달 내에서 스크롤 기능도 있음
11. Navbar
- 내비게이션 바 구성 -> 반응형
- 어디에 위치할지 변경 가능
12. Offcanvas
- 클릭 -> 메뉴가 상,하,좌,우 등에서 나오는 형태
13. Placeholders
- 깜빡깜빡 거리면서 로딩중이라는 것을 보여주는 화면
- 서버로부터 데이터를 받아오는데 오래걸리는 것을 표현해줄 때
14. Popoovers
- 버튼을 눌렀을 때, 부가적인 설명이 나오는 형태
15. Tooltips
- popovers 랑은 다르게 굳이 클릭하지 않더라도, 마우스를 가져다 대면 그 때 그에 대한 설명이 나오는 기능
16. Porgress
- 로딩중인 것을 시각적으로 보여줄 수 있다.
17. Scrollspy
- 특정 위치 스크롤에 따른 위치를 표시
- 스크롤 이동 -> 버튼에 표시
18. Spinners
- 원형 모양의 로딩 창 기능
19. Toasts
- 문자, 알림 기능 등의 메시지가 오른쪽 하단에 나오는 기능
- 다양한 오픈소스의 토스트가 존재한다.
20. Ratio
- 이미지나, 동영상 등의 비율을 손쉽게 구현 가능
21. Stack
- 가로로 할지 세로로 할지 등의 스택을 결정하는 기능
22. Text truncation
- 본문의 길이가 지정해놓은 범위를 넘으면 뒤에는 생략
 |  |
|---|
23. Display
- 지정한 범위의 픽셀을 넘어가면 다른 내용이 보이는 구조
- breakpoint 별로 볼 수 있는 내용을 보여질지 안 보여질지 조절할 수 있다.
23. Interactions
- 클릭을 조절하여 글자를 선택
- 한 번 클릭 -> 전체 선택 / 여러 번 클릭 -> 전체 선택 / 선택 불가
- Extend
- 부트스트랩의 아이콘 사용 가능
- font awesome - > 개발자들이 많이 사용하는 폰트 사이트
- 그 외에 참고 사이트들
디자인에서 개발자로