본문 바로가기

STUDY/Web Design

컴포넌트(Components) 종류

컴포넌트란? 

웹 애플리케이션을 구성하는 버튼, 내비게이션, 탭 메뉴와 같이 사용자가 화면을 사용함에 있어서 어떤 특징을 가지고 편리하게 사용할 수 있는 목적을 가진 재사용이 가능한 요소를 말한다.


그리드 시스템(Grid System)

레이아웃의 단을 나누는 방법.

 

테이블(Table)

표 형식으로 데이터를 정리해서 보여준다. 

ex) 일반 게시물 게시판, 랭킹, 그래프 아래쪽에 표 형식으로 데이터를 보여줄 때

 

 

폼(Form)

입력과 관련된 요소들의 집합.

한 줄 입력창 input - 기본 텍스트 입력 ex) 아이디, 이름, 날짜 등 

                             - 비밀번호 입력 ex) 비밀번호, 보안이 들어가야 하는 값

 

여러 줄 입력창 textarea - 문장 형식으로 입력. ex) 자기소개, 게시판 글쓰기

 

체크박스 checkbox - 다중 선택 시. ex) 관심 분야 선택하기

 

라디오 radio - 단일 선택 시. ex) 성별 선택하기

 

선택 select - 옵션을 설정하고 옵션 중 하나 또는 다중 선택을 할 때 사용.

 

파일 업로드 fileUpload - 이미지, 텍스트 파일 등을 선택할 수 있는 창을 열어준다.

 

라벨 label - 입력 요소에 이름을 부여할 때 사용.

* 폼의 요소들을 조합하여 컴포넌트를 만들 수 있다.

ex) 회원가입 폼, 로그인 폼, 게시판 글쓰기, 설문조사 등

체크박스와 라디오 옆의 1,2,3이 라벨이다.

 

버튼(Button)

1. 일반 버튼(type=button) - 팝업을 열거나 좋아요, 장바구니 버튼을 만들 때.

2. 제출 버튼(type=submit) - 회원가입, 로그인과 같은 입력 양식 폼에서 사용자가 입력한 데이터를 가지고 특정 페이지(입력 데이터를 처리하는 페이지)로 이동할 때.

3. 리셋 버튼(type=reset) - 입력 양식 폼에서 데이터를 입력한 후 다시 원래 상태(초기화 상태)로 돌아가고 싶을 때.

4. 링크 버튼(a 태그로 만든다) - 다른 페이지로 이동할 때. 

각 버튼 별 코드

 

아이콘(Icon)

텍스트로 구성된 메뉴를 쉽게 알아볼 수 있는 그래픽으로 표현하여 나타내는 것.

일반 아이콘 - 픽셀이나 벡터 형식으로 디자인한 후 저장하여 사용하는 방식.

폰트 아이콘 - 폰트 형식으로 저장하여 사용하는 방식. 

 

드롭다운(Dropdown)

메뉴의 내용과 관련 있는 서브메뉴를 숨겨놓고 클릭 시 아래나 위쪽 방향으로 펼쳐서 보이게 하는 방식. 보통은 토글 형식으로 한 번은 보여주고 다시 누르면 숨겨주는 형식을 띄고 있다.

위 아래 모두 가능하다.

 

내비게이션(Navigation)

주로 웹 페이지의 상단에 노출되며 여러 페이지로 구성된 사이트를 사용자가 쉽게 찾아서 볼 수 있도록 여러 가지 요소들이 포함되어 있다.

ex) 로고, 주 메뉴, 기타 메뉴, 검색창, SNS 바로가기 등

 

경로(Breadcrumbs)

현재 어느 페이지에 있는지 경로 표시로 알려주는 것.

서브 페이지를 깊게 들어갈 때 상단에 표시해주는 것이 좋다.

ex) home > coffee > coffee detail

 

페이지 네이션(Pagination)

현재 뷰에서 특정 뷰로 내용 전환이 필요할 때 사용. (다른 서브 페이지로 이동하는 것은 아님.)

적은 영역에 많은 정보를 담을 수 있다. (공간 활용도가 높음.)

라벨/배지(Labels/Badge)

텍스트나 이미지 옆에 특정 단어 또는 아이콘, 숫자 카운트와 같은 표시를 붙여주는 것.

ex) 세일 상품 표시, 신상품 표시, 새로운 글 표시, 댓글 수 표시 등

좌 라벨(Labels) / 우 배지(Badge)

 

점보트론(Jumbotron)

특정 영역을 잡고 큰 타이틀과 부가 설명, 이러한 내용을 상세히 보기 위한 자세히 보기 버튼 등을 포함하고 있는 것.

중요한 콘텐츠를 보여주기 위한 컴포넌트이다. (주목성이 높아짐.)

 

썸네일(Thumbnails)

작은 사이즈의 영역을 균등한 비율로 잡아놓고 사용하는 것.

이미지, 영상, 텍스트와 같은 내용을 담을 수 있다.

 

경보(Alerts)

특정 상황에서 사용자에게 메시지를 전해야 할 경우 사용한다.

경보 창이 뜨고 몇 초 뒤에 사라지게 하거나, 닫기 버튼을 달아서 닫기 버튼을 눌렀을 때 사라지게 한다.

 

진행 바(Progress bars)

작업 흐름이나 액션의 진행 상태를 바 형식으로 보여주는 것.

고정 수치로 보여주거나 애니메이션 처리를 하여 모션으로 보여준다.

라벨이 함께 있는 진행 바

 

목록 그룹(List group)

연관성 있는 내용 또는 메뉴를 하나의 그룹으로 묶어서 보여주는 것.

간단한 것의 목록뿐만 아니라 맞춤화된 내용의 복잡한 것도 보여줄 수 있는 유연하고 강력한 컴포넌트이다.

 

패널(Panel)

제목과 내용을 분할하여 구성하는 박스 형태의 컴포넌트이다.

영역은 header(제목)/body(본문)/footer(하단)으로 분할하여 사용할 수 있다.

기본적으로 모든 패널은 조금의 내용을 포함하기 위해 약간의 기본 테두리와 패딩을 가지고 있다.

상단이 있는 패널

 

반응형 임베드(Responsive embed)

디바이스(화면)의 크기에 맞게 영상의 비율이 자동으로 조절되는 것.

 

모달(Modals), 팝업(Popup)

사용자가 버튼이나 특정 영역을 눌렀을 때 숨겨져 있는 레이어가 덮어쓰기 형식으로 나타나는 것.

또는 기본적으로 팝업이 보이는 상태에서 닫기 버튼을 눌러서 사라지게 할 수도 있다.

모달

 

스크롤 스파이(Scrollspy)

특정 영역이 나눠져 있고 영역만큼 내비게이션 메뉴가 구성되어 있는 상태에서 스크롤을 발생시켰을 때 해당 영역에 도달하면 그 영역의 메뉴 부분이 활성화되는 것.

ex) 메뉴 a, b, c 

      콘텐츠 a영역, b영역, c영역

사용자가 스크롤을 움직여서 현재 b영역을 보고 있다면 b메뉴가 활성화 처리된다.

스크롤을 내렸을 때 활성화된 영역이 @fat 에서 @mdo로 변한 모습.

 

탭(Tap) + 콘텐츠(Contents)

탭 메뉴의 메뉴를 눌렀을 때 변경될 내용(contents)을 전환해서 보여주는 그룹.

한정된 공간 안에서 여러 가지 카테고리를 보여주기에 적합하다.

가로뿐만 아니라 세로도 가능하다. ex) 탭 메뉴 좌측, 콘텐츠 우측

툴팁(Tooltip)

특정 영역에 마우스를 올렸을 때 힌트 형식으로 메시지를 보여주는 것

마우스가 영역을 벗어나면 자동으로 사라진다.

 

팝오버(Popover)

툴팁과 비슷하나 토글 형식이 적용되어 클릭하면 나오고 다시 클릭하면 사라진다.

버튼을 한 번 더 클릭하면 메시지가 사라진다.

 

컬랩스(Collapse)

드롭다운 형식으로 보이는 컬랩스는 특정 영역(버튼 또는 박스일 수 있음)을 눌렀을 때 숨겨져 있는 콘텐츠가 위아래로 접혔다가 펼쳐지는 슬라이드 모션으로 보인다. (토글 형식)

버튼을 누르면 슬라이드 모션으로 콘텐츠가 내려오고, 다시 누르면 위로 접힌다.

 

아코디언(Accordion)

컬랩스가 여러 개 묶여 있는 것.

보통은 하나의 컬랩스가 열려있으면 다른 컬랩스들은 자동 숨김 처리되지만 각각 따로 제어하게 할 수도 있다. ex) Q&A 메뉴

#2를 누르자 #1이 자동으로 접힌 모습.

 

캐러셀(Carousel) 슬라이드 쇼

한정된 공간에서 이미지와 텍스트를 하나의 그룹으로 묶은 여러 개의 콘텐츠를 돌려가며 보는 것. 옵션으로 붙일 수 있는 항목은 이전/다음 버튼, 페이지 네이션, 프로그래스 바, 재생/정지 등이 있다.

* 슬라이드를 여러 가지 옵션으로 활용할 수 있는 플러그인이 많이 나와 있으며

대표적으로 swiper라는 플러그인이 있다. (https://idangero.us/swiper/demos/)

 

고정시키기(Affix)

스크롤이 특정 위치에 도달했을 때 메뉴나 콘텐츠를 고정시키기 위해 사용

스크롤의 위치에 따라 변하는 모습.

 

패럴렉스(Parallax)

웹 사이트에서 사용되는 기술 중 하나로 스크롤에 따라 오브젝트와 배경 이미지가 조금씩 움직이는 기법.

 

출처 : 부트스트랩

 

컴포넌트 예제 참고 사이트

부트스트랩 http://bootstrapk.com

 

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드하세요. 하나의 프레임워크, 모든 기기. 부트스트랩은 웹사이트와 어플리케이션을 단일 코드 베이스로 CSS 미디어 쿼리를 이용하여 휴대폰에서부터 태블릿, 데스크탑까지 쉽고 효과적으로 크기를 조절합니다. 많은 기능들 부트스트랩과 함께, 보통의 HTML 요소들

bootstrapk.com

머테리얼라이즈 https://materializecss.com/

 

Documentation - Materialize

 

materializecss.com

시멘틱 UI https://semantic-ui.com/

 

Semantic UI

Shipping Choose your shipping options

semantic-ui.com