본문 바로가기
영상리뷰

#3 부트스트랩으로 웹 UI 컴포넌트 파악하기 -디자인베이스 리뷰

by 강동희 2021. 4. 18.

부트스트랩으로 웹 UI 컴포넌트 파악하기 - 웹디자인 입문 강좌

 

초보자도 알기쉽게, 물론 초보자가 바로 알기는 어렵지만 어떤기능들이 있는지 알기쉽게 설명한다. 

필기를 해가면서 다양한 용어들에 대해서 공부를 해보면 좋겠다. 

 

------------------ 필기 -------------------

 

hover   마우스를 올렸을 때 옵션이 바뀐다. 

active   버튼을 눌렀을 때 표시가 뜨는 것

Disabled   비활성화 상태 투명도를 주거나 흐릿하게 한다.

Valodstion   폼 유효성 검사

Input창에서 정보를 제대로 입력하지 않았을 때 사용한다.

Drodown   클릭했을 때 들어있는 하위 정보를 보여줄 때 사용한다.

Navigation   페이지를 이동하는데 필요한 링크들을 모아놓은 창

Navigation bar   헤더와 비슷한 역할을한다.

Breadcrumbs  Pagination   같은 정보체계 안에서 다음페이지로 넘길 수 있다. 현 위치와 이동가능 위치를 구분짓는 것이 중요하다. 색이나 모양을 다르게 디자인한다.

Label   부가적인 설명을 할 때 사용

Badge   새롭거나 읽지 않은 항목을 쉽게 강조한다.

Thunbnails   사진이나 영상 미리보기  썸네일의 이미지 용랑이 속도에 중요하다.

Alerts   정보 메세지 (성공, 실패)

Progress Bar   진행바 진행율을 나타낸다.

List   목록, 리스트 Table   표와 비슷하다. 

Embed   다른 사이트에 있는 영상, 지도를 불러올 때 사용한다.

Modal Popup   웹의 숨겨진 영역이나 별로도 필요한 정보를 표시 할 때 사요하는 영역이다. 

Tab   탭을 통해서 해당 컨텐츠로 넘어간다.

Tooltip   마우스를 오버했을 때 정보가 뜬다.

 

엑셀에 필기를 저장해서 봐가면서 공부를 해야겠다.

댓글