○ 디자인베이스 3

영상리뷰

H-A-R 2021. 4. 18. 20:44

#부트스트랩으로 웹 UI컴포너트

▶기초 가장 중요

▶부트스트랩은 반응형이며 모바일 우선인 웹프로젝트개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크.

▶버튼 태그
-마우스 오버 = Hover (마우스를 올렸을 때 반응)
-눌렀을 때 = Active (클릭을 했을 때 반응)
-비활성화 상태 = Disabled (투명도를 주거나 색을 흐릿하게 함)

▶폼(Form)
-Form/Input(이메일주소,암호 등을 입력할 수 있는 창, 파일 업로드)
-Validation 폼 유효성 검사(입력되지 않은 부분)

▶드롭다운(Dropdown)
-클릭했을 때 숨겨져있는 하위메뉴들이 들어있는 정보를 보여줌

▶네비게이션(Navigation)
-페이지를 이동하는 데 필요한 링크를 모아놓은 곳
-탭형, 알약형 등

▶네비게이션 바(Navigation Bar)

▶경로(Breadcrumbs)
-헨젤과 그래텔의 빵 부스러기
-네비게이션내에서 현재페이지 위치를 나타냄
-현재페이지는 클릭이 안됨

▶페이지네이션(Pagination)

▶기본 페이지네이션(Default Pagination)
-정보체계안에서 리스트가 몇개이상인 경우 다음페이지를 보여주는 역할
-필수요소 3가지 ←/ →/ 숫자
-웹 접근성을 고려한 디자인(현재 페이지 위치, 다음 페이지, 반전대비, 색)

▶라벨(Iabals)

▶배지(Badge)
-링크, 네비게이션 바등에 새롭거나 읽지 않은 항목을 강조하는 기능

▶썸네일(Thumbnails)
-★★★로딩속도중요★★★

▶경보(Alerts)
-경고메세지, 피드백 메시지, 정보 메시지

▶진행바(Progress bars)

▶목록 그룹(List group)

▶테이블(Table)
-레이아웃에 사용X, 표형식을 사용할 때만 써야함

▶반응형 임베드(Embed)
-다른 사이트의 영상, 지도 등을 불러올 때 사용

▶모달(Modal Popop)
▶탭(Tab)
▶툴팁(Tootip)
▶팝오버(Popover)
▶아코디언(Accordion)

▶캐러셀(Carousel)
-웹은 앱과 다름
-공통 용어 숙지

HAR_공부_VLOG