안녕하세요. 린치핀소프트 한광희입니다.

 

지난번 포스트 에서 부트스트랩으로 워드프레스 테마를 제작할 때의 이점에 대해서 소개해드렸습니다. 이번 포스트에서는 부트스트랩을 이용할때 사용할 수 있는 주요 컴포넌트들을 소개하겠습니다. 부트스트랩같은 CSS,JS 프레임워크를 사용하는 이유와 목적은 각 개발자의 의도와 프로젝트에 따라 상이하겠지만 일반적으로 부트스트랩을 사용하여 이용하기 좋은(?) 컴포넌트들 위주로 소개해보겠습니다.

 

 

1.Container, Row , Col-* 그리드 컴포넌트

부트스트랩의 그리드(Grid) 시스템은 기본적으로 12 column 을 지원합니다.  column은 화면을 세로로 양분할때 몇등분으로 양분하는지에 대한 내용입니다. 즉 2개의 영역을 수평하게 50%의 너비로 배치하고자 할때는 6column, 6column 으로 배치하여 지정하는 것과 동일합니다. 12 column이기때문에 동일한 너비의 5 개의 영역을 만들기 위해서는 부트스트랩에서 기본적으로 지원하는 그리드 시스템을 이용할수 없습니다. 이렇듯 몇가지 제한 사항도 가지고 있습니다.

반응형 웹 페이지 제작을 위한 그리드 시스템을 구현하기 위해서 부트스트랩은 CSS 클래스를 이용합니다. 이미 각 클래스별로 CSS를 정의하여 놓았기 때문에 부트스트랩을 이용하는 개발자는 해당 클래스명을 DIV와 같은 HTML 태그 요소에 추가하여 해당 CSS 스타일을 지정할 수 있습니다.

자주 사용하는 클래스 중 하나로  “Container” 는 웹 페이지의 전체 콘텐츠를 포함하는 영역으로 보통 메인 콘텐츠를 보여주는 영역은 이 Container 클래스 하위 자식 항목으로 삽입하여 관리합니다. 이렇게 Container 클래스를 이용함으로써 푸터 / 헤더 / 사이드바와 별개로 콘텐츠가 담긴 영역을 독립적으로 관리할 수 있어 편리합니다.

“Row” 클래스는 “행(Row)”라는 의미로서 “COl-*” 과 같은 “열(Column)”을 지정할 요소의 부모 항목으로 지정되어야 합니다.

Row 클래스 하위의 각 레이어 요소들은 “col-xs-12 col-md-6 col-lg-2” 와 같은 식으로 클래스를 지정하여 각 화면 너비 기준별로 레이아웃의 크기의 변동을 지정할 수 있습니다.

screenshot-getbootstrap.com 2016-02-05 22-06-25

각 그리드 prefix 별로 활성화되는 화면 너비는 위와 같습니다. 부트스트랩은 각 column이 column을 포함하는 Nested 스타일도 지원이 되며 col-xs-offest-3 과 같은 여백등도 칼럼으로 지정하여 반응형 웹 페이지를 제작하는데 있어 많은 편의를 제공하는 프레임워크입니다. 부트스트랩을 사용하는 분들이라면 아마 이 클래스들을 아주 빈번히 사용할 겁니다.

 

 

2.Alert , Panel , well 컴포넌트

부트스트랩은 처음 소개했던 CSS 클래스로 반응형 스타일을 제공할 뿐만 아니라 Alert, Panel, well 같은 웹 서비스에 자주 사용하는 컴포넌트 스타일까지 제공하고 있습니다.Alert 같은 사용자에게 경각심 또는 현재 상태를 환기해주는 요소는 success , info ,warning , danger 와 같은 각 상태 별로 색을 달리하여 알맞는 상황에 알맞는 Alert 요소를 사용해 볼 수 있습니다. Panel 은 타이틀과 본문을 시각적으로 잘 구분해줄 뿐만 아니라 페이지 내에서 독립되어 있는 느낌을 주는 깔끔한 요소입니다.

 

 

3.Table

table 클래스를 사용하면 기존 html table 태그를 이용한 테이블 구성이 산뜻한 깔끔한 테이블 디자인으로 변경됩니다. <table> HTML 태그는 웹 페이지 개발에 자주 사용하고 데이터나 자료와 같은 항목을 개시하는데 있어 효과적인 태그입니다. “table-hover table-bordered” 와 같은 클래스를 추가하면 테이블의 경계선이 추가되며 각 행(tr) 별로 마우스 커서가 hover 되면 배경색이 바뀌는 등 테이블의 가시성을 높여줍니다. 또한 table-responsive 같은 클래스를 추가하면 테이블이 반응형으로 바뀌어 모바일에서도 스크롤을 이용해 편리하게 테이블을 볼 수 있습니다.

 

 

4. Modal , Carousel , Collapse

모달(Modal) , 캐러절(Carousel), 콜랩스(Collapse) 같은 요소는 CSS 뿐만 아니라 JS(Javascirpt)를 이용하여 콘텐츠를 동적으로 표현하는 컴포넌트입니다.

Modal Window 의 경우 보통 대화상자(Dialogue)라고 하는 페이지 내의 대화상자를 생성합니다. 이때 주요 옵션을 추가하여 대화상자 생성시의 배경과 불투명도를 조정할 수 있으며 그 외 몇가지 추가 옵션도 부가 할 수 있습니다.

screenshot-getbootstrap.com 2016-02-05 22-22-56

<Modal Window 예시>

 

캐러절(Carousel)을 이미지 슬라이더입니다. 간단한 이미지 슬라이더라면 부트스트랩  캐러절을 이용하여 빠르게 구현해볼 수 있지만 요즘 많이 사용하는 이미지 슬라이더 플러그인에 비해서는 그 효과와 기능이 많이 제공되지 않습니다. 아주 간단한 슬라이드를 만들때 사용하면 좋습니다.

Collapse 는 보통 “질문”과 “답변”을 제공하는 FAQ같은 컴포넌트에 자주 사용되는 컴포넌트입니다.

 

오늘 소개해드리는 이 요소 외에도 Glyphicons 나 Form Group , Input Group , Nav , Breadcrumb , Jumbotron 도 자주 사용하는 부트스트랩의 컴포넌트입니다. 부트스트랩은 Bootstrap3.0 부터 모바일 퍼스트(Mobile First) 방식을 차용하여 모바일에서 더욱 빠르게 스타일이 적용되도록 구성되었습니다.