부트스트랩으로 웹 UI 컴포넌트 파악하기

 

부트스트랩으로 웹 UI 컴포넌트 파악하기

 

<css>

- Button

  - hover

    마우스를 올렸을 때 

  - active

    마우스를 눌렀을때

  - disabled

    비활성화상태를 표현

      ex)투명도를 줘서 흐릿하게 하는

 

- form/input

  이메일, 정보, 숫자 등 입력하는 칸

    - checkbox □

    - validation

      폼 유효성 검사 (제대로 입력되지 않으면 알림)

 

 

<콤포넌트>

- dropdown

  클릭했을 때 숨어져있는 하위메뉴 뜨게 하는 거

 

- navigation

  링크를 모아놓는 곳

    - 알약형(기본적)

    - 탭형

    - 수직형

 

- navigation bar (=header)

 

- breadcrumbles (헨젤과 그레텔의 빵 부스러기)

  현위치를 알려주는 태그

  현재 페이지는 클릭되지 않고 상위개념 페이지는 언제든지 이동 가능

 

- pagination
  같은 정보체계 안에서 리스트가 n개 이상이면 페이지에 보여주기

  현재기능을 나타내주는 태그

    -.disabled

      클릭할 수 없는 링크

    -.active

      현재 페이지를 가르킬 때

◀

1

2

3

4

5

▶

- labels

  부가적인 설명할 때

    ex) 쇼핑몰에서 새로운 상품 옆에 nex 박스 표시

 

- badge

  링크나 네비게이션 바 등에 새롭거나 읽지 않은 항목을 알람 뜨게 하는 것

    ex) 카카오톡 옆에 안 읽은 메시지 나타내는 숫자 표시

 

- thumbnails (사진의 축소판)

  컨텐츠를 쉽게 탐색하도록 도와줌

  썸네일을 크기에 맞게 제작해야함! (로딩속도!!에 영향을 끼침)

 

- alerts

  성공or실패or경고 메시지

 

- progress bar (진행바)

  현재 진행흐름을 시각적으로 표현

    ex) 현재 2단계 진행 중

 

- list (목록)

 

- table (표)

  레이아웃을 만들 때 table을 사용하면 좋지 않아효~

 

 - embed

  영상, 지도 등 파일을 불러오는 것

 

 

<자바스크립트>

- modal popup

  웹에 숨겨진 영역을 표현하는 법

    ex) 약관 상세내용 볼 때

 

- tab (bar)

  

- tooltip

  마우스를 올렸을 때 상세정보를 주는

 

- popover

  마우스를 클릭했을 때 정보를 주는

 

- accordion

  클릭하면 숨은 내용이 펼쳐지는

 

- carousel

  회전목마처럼 요소를 순환시킴

 

  - indicate

    현위치나타냄