부트스트랩 Bootstrap 3 CSS 개요 3 Code, Tables

CSS 에 대한 부분이 많아서 이렇게 나누게 되었습니다. 오늘은 CSS 에서 Code 부분부터 시작합니다.

부트스트랩 2와 3은 여기서도 약간 차이가 납니다.

아래 이미지처럼 code 에 해당하는 부분은 <code> 로 감싸면 됩니다. 그러면 기본 스타일이 지정이 되는데요. 대표적으로 컬러값이 빨강색이 됩니다.

물론 커스터마이징하면 값을 바꿀수도 있지만 기본은 그렇다는 이야기 입니다.

기본적으로 <code> 를 사용하면 글꼴크기를 90%로하고, 컬러는 빨강색, 배경은 흰색(#f9f2f4) 으로 되고, border-radius 도 4px 가 들어갑니다.

code 와 비슷하게 사용하는것이 <pre> 태그 입니다.

또한 긴 코드를 위해서 버젼 2에서는 없던 pre-scrollable 클래스를 지원합니다.

그럼 높이값이 340px 로 한정되고 오버플로우 되는것은 스크롤이 생성됩니다.

code 나 pre 등은 모두 열고 닫는 태그인 <> 모두 이스케이프해야 합니다. 저 위의 예제 이미지에서 보듯이 이스케이프해야 합니다.

Table(테이블)

드디어 테이블입니다. 아주 많은 종류가 있습니다.

먼저 기본적으로 부트스트랩은 날짜를 나타내는 달력이나 다른 플러그인에 사용할 수 있도록 기본 스타일의 테이블을 제공합니다.

테이블에 table 라는 클래스만 부여하면 아래와 같은 형식의 테이블이 만들어집니다.

Striped rows(줄무늬 형식의 테이블).

아래 이미지를 보시면 아시겠지만 table 라는 클래스는 테이블의 기본 스타일을 지정합니다.

너비라든지 아래 여백(margin-bottom) 등등을 지정하고, table 의 자식들인 thead, tbody, tfoot 등과 tr, td 등 기본 스타일을 지정합니다.

여기에 table-striped 라는 클래스를 추가하면 아래처럼 한줄은 배경이 흰색이고, 그 다음줄은 회색배경이 들어가는 스타일이 만들어집니다.

간단하게 클래스만 넣어주기만 하면 됩니다.

Bordered table(테두리가 있는 테이블).

테이블에 테두리가 있는 형식의 테이블입니다. 아래 보시면 알겠지만 table-bordered 라는 클래스만 부여해주면 됩니다.

Hover rows(오버가 있는 테이블).

평상시는 기본 스타일의 테이블과 같지만 아래처럼 1번 행에 마우스를 갖다대니 오버 스타일을 보여줍니다.

아래와 같은 스타일의 테이블을 만들때는 table-hover 클래스를 지정해주면 됩니다.

Condensed table(압축된, 좁은 스타일의 테이블).

위에 나열했던 기본 스타일의 테이블들은 적당한 여백을 가지고 있습니다.(8px)

하지만 테이블에 table-condensed 클래스를 부여하면 td 에 5px 의 여백만을 주는 형식의 좁은 형태의 기본 테이블을 사용할 수 있습니다.

위의 스타일과 이미지로 비교해보세요.

Contextual classes(문맥 클래스 - 행이나 셀에 각각의 스타일을 지정할 수 있는 테이블).

부트스트랩에는 기본적으로 4가지의 경우에 대해서 색상을 지원합니다.

아래 이미지를 보시면 아시겠지만 1번 행에는 active 클래스가, 3번행에는 success 클래스가, 5번행에는 warning 클래스가, 7번행에는 danger 클래스가 각각 사용되었고, 그것이 어떻게 보여지는지를 나타냅니다.

아래처럼 저 클래스들은 tr 에 사용할 경우 한 행의 스타일을 지정하고, 셀인 td 에 지정할 경우 하나의 셀에만 스타일이 지정됩니다.

아래 이미지는 한 행인 tr 에 클래스를 넣은 경우입니다.

Responsive tables(반응형 테이블).

아래 이미를 보시면 기본적으로 768px 보타 클때는 더 이상 늘어나지 않고 기본 스타일을 유지하고, 이 보다 작을경우에는 스크롤이 생성되어 레이아웃이 깨지지 않는 테이블을 만듭니다.

이것은 위의 테이블과는 다르게 table 을 감싸고 있는 부모 클래스가 있어야 합니다.

그 클래스는 table-responsive 입니다.

이렇듯 제일 먼저 <div class="table-responsive"> 마크업하고 그 아래 table 이 들어갑니다.

아래 이미지에서 첫번째것은 이미지 하단에 나와 있듯이 기본 테이블인 table 클래스를 사용한것이고, 두번째에 위치한것은 테두리가 있는 스타일인 <table class="table table-bordered"> ... </table> 입니다.

화면너비가 작아졌을때 보여지는 반응형테이블.

demun(대문블로그)