37일차 부트스트랩 기초 공부

이해찬·2023년 9월 19일
0

항해일지

목록 보기
27/35

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 - > 개발자들이 많이 사용하는 폰트 사이트
  • 그 외에 참고 사이트들
profile
디자인에서 개발자로

0개의 댓글