[부트스트랩] 컨텐츠 #3 - 테이블

작성자: -

테이블

부트스르랩을 사용하여 테이블 스타일 지정하는 방법을 예제와 함께 설명하도록 하겠습니다..

사용예제

테이블은 날짜 선택과 같은 타사의 캘랜더 모듈에서 많이 되어 기본적으로 스타일을 사용자가 선택하도록 설계되었습니다.  기본 클래스 .table을 <table>에 추가 한 다음 사용자 정의 스타일이나 다양한 포함 된 추가 클래스로 확장하면됩니다.
가장 기본적인 테이블 마크 업을 사용하여 테이블 기반 테이블이 부트스트랩 에서 어떻게 나타나는지 알수 있습니다.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
어두운 배경에 밝은색 글씨로 표시되게 하기위해 .table-inverse 사용하여 색상반전을 표시할 수 있습니다.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

테이블 헤드 옵션

.thead-deafault 과 .thead-invers 클래스를 사용하여  <thead>를 밝게 또는 어둡게 표시합니다.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead class="thead-inverse">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table">
  <thead class="thead-default">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

줄무늬 행표시 

 <tbody>. 에 .table-striped a클래스를 추가형 얼룩말 형태의 행을 표시할 수 있습니다.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

테이블 테두리

.table-bordered 클래스를 추가하여 테이블과 셀의 모든 테두리를 변경할 수 있습니다.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter 
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter 
<table class="table table-bordered table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

마우스에 반응하는 행

.table-hover t클래스를 추가하여 테이블행에 마우스 포인터가 올라오면 스타일을 변경하도록 지정할 수 있습니다.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-hover table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

작은 테이블

.table-sm 클래스를 사용하여 셀크기를 반으로 줄임으로써 작은 테이블을 만들 수 있습니다.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-sm table-inverse">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

컨텍스트 클래스

컨텍스트 클래스를 사용하여 행 혹은 셀의 색상을 지정할 수 있습니다.
Type Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content 








<!-- On rows -->
<tr class="table-active">...</tr>

<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-active">...</td>
  
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

.
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content 








<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="bg-primary">...</td>
  <td class="bg-success">...</td>
  <td class="bg-warning">...</td>
  <td class="bg-danger">...</td>
  <td class="bg-info">...</td>
</tr>

반응형 테이블

.table 클래스에 .table-reponsive 클래스를 추가하여 테이블에 반응성을 추가할 수 있으며, 768px 작은 해상도에서 가로로 스크롤 되게 변경합니다. 그 이상의 크기에서는 변동이 없습니다.

수직 클립핑/절단

반응 형 테이블은 overflow-y : hidden을 사용합니다.이 오버 플로우는 테이블의 아래쪽이나 위쪽 가장자리를 넘어서는 모든 내용을 잘라냅니다. 특히 이것은 드롭 다운 메뉴 및 기타 타사 위젯을 잘라낼 수 있습니다.
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell 








<table class="table table-responsive">
  ...
</table>

댓글

댓글 쓰기

주간 인기글

[앱 디자인] 디자인 가이드 만들기 - 아이폰

작성자: -
이미지
*아이프렌즈펫 앱 디자인 가이드 경험을 공유합니다. 이게 처음 작업한 앱 디자인 가이드라서 미흡한 점이 많을 수도 있는데 문제가 있는 부분이 있다면 댓글로 알려주시면 반영하겠습니다 ^^ *아이폰 앱 가이드 작업의 특징 디자인 가이드 작업은 기준 해상도 하나를 정해서 그 수치값으로, 이미지 작업은 고객/개발자와 협의한 모든 해상도를 지원하는 방향으로 작업하면 됩니다. 아이폰 해상도를 먼저 보면 이미지 출처: http://protosketch.io/exporting-assets-for-ios-ipads-and-iphones/ 위에 point 가 실제 폰에서의 크기라면 render at 사이즈는 디자이너가 포토샵에서 작업해야 할 픽셀 단위 사이즈라고 보시면 됩니다. 아이프렌즈펫은 일단 기준 해상도를 iPhone6 으로 잡고 가기로 했습니다. 그래서 포토샵에서 작업할때는 750 x 1334 사이즈로 작업해서 해당 작업물로 좌표값, 크기 등을 계산해서 개발자님께 넘겼구요 만약 iPhone5 를 기준 해상도로 잡았다면 640 x 1136 을 기준으로 포토샵 화면 작업을 해서 넘기시면 됩니다. 그러면 개발자는 디자이너가 계산해 넘긴 수치값의 1/2 을 곱하거나 1.5 배 하는 등 계산을 해서 작업을 하게 됩니다. XCode 에서의 작업 화면 만약 750 기준으로 작업을 해서 드리면 1/2 값을 저기에 입력하는 식으로 작업합니다 여기서 알 수 있는 사실은, 포토샵에서 드리는 수치가 최종값이 아니기 때문에 가급적 모든 수치가 짝수가 되고 , 맞아 떨어지는게 좋습니다. 그래야 개발자가 나누고 곱해도 소수점이 나오지 않기 때문이죠. 그래서 아이프렌즈펫 작업을 할때는 한 이미지로 여러 해상도를 지원해야 하기 때문에 가급적 6의 배수 로 크기를 계산한 작업물을 드렸습니다. *좌표 절대적인 건 아니고.. 대략 저런 기준으로 잡아서 작업하시면 됩니다 ^^ 아이폰은 절대 좌표 로 작업합니다. 그러니까 상단 Status ...
자세한 내용 보기

[Android] 변화된 findViewById를 확인해보자

작성자: -
이미지
안녕하세요. 명동콜링입니다. 최근은 아니지만, Android 8.0(Oreo)부터 findViewById 의 생김새가 바뀌었습니다. 예전부터 Activity에서 XML의 View를 매칭하고자 할 때에는 findViewById를 사용합니다. 사용법은 안드로이드 개발자라면 알다 시피, Button b = (Button) findViewById(R.id.btn1); 이런 형태가 되겠습니다. 그러나 개발을 하다보면 여러개의 다양한 컴포넌트를 일일히 타입에 맞게 캐스팅을 해야하는 번거로움이 있습니다. 하지만, 이제 8.0부터는 캐스팅을 하지 않고도 View 매칭을 할 수 있게 바뀌었습니다. Button b = findViewById(R.id.btn1); 위와 같이 Button타입인데도 불구하고 TypeCasting을 하지 않은 findViewById를 사용할 수 있게 되었습니다.  이렇게 바뀜으로써 앞으로 많은 매칭 작업이 더 편해질 것이라 생각이 됩니다. Java에서는 타입 캐스팅을 하지 않는 반면에, Kotlin에서는 어떨까요. Kotlin에서는 View 매칭에 대해 더 간단하게 처리할 수 있습니다. 왜냐하면 View 매칭 작업을 하지 않아도 XML에 정의된 id 값을 바로 사용할 수 있기 때문입니다. 내가 XML에 btn1이라는 ID값을 가진 버튼을 사용하고 싶다하면 곧바로 Activity에서 btn1을 찾아 사용할 수 있게 되었습니다. 이것이 가능해진 이유는 바로 Kotlin Android Extension이라는 Kotlin Library로 인해 가능해지게 된 것인데요. 이 라이브러리에는 View를 바인딩하는 기능이 탑재되어 자동으로  매칭을 시켜줍니다.
자세한 내용 보기

android 뒤로가기 두번으로 앱종료 하기

작성자: -
이미지
android의 특징중 하나인 뒤로가기 버튼이 있습니다. 뒤로가기 버튼을 통해 대부분의 앱을 종료 하기 때문에 android사용자들은 앱을 종료 하기 위해서 뒤로가기를 연속적으로 누르는 행동을 많이 합니다. 그렇기 때문에 종료의 의사가 아니고 뒤로가기를 눌렀는데 앱이 종료되는 경우가 종종 생기는데요. 이런 경우에 대비해서 국내 앱들은 뒤로가기를 두번연속으로 누른경우에만 앱을 종료 시키는 방법을 많이 사용 합니다. 해외 앱들은 굳이 이런기능들을 사용하지 않는 경우가 많은걸 보면 국가별 사용하는 방식의 차이가 있나보다란 생각도 하게 됩니다. 뒤로가기 두번연속으로 눌렀을때 종료하는 방법은 쉽게 구현 할수 있습니다. 우선 activity에서 뒤로가기 이벤트를 제어 해야 합니다. @Override public void onBackPressed() { super . onBackPressed ( ) ; } onBackPressed 함수를 오버라이드 해줍니다. private final long FINISH_INTERVAL_TIME = 2000 ; private long backPressedTime = 0 ; 우선 누르는 이벤트사이의 시간 간격을 위해 FINISH_INTERVAL_TIME을 지정해 줍니다. 설정된 시간 이내에 연속적으로 뒤로가기가 이벤트가 일어났을때만 종료 되는 것 입니다. 설정해 놓은 시간이 지나면 다시 두번 눌러야 종료되는 상태로 초기화 됩니다. backPressedTime을 통해 첫번째 뒤로가기 이벤트가 일어난 시간을 알고 있어야 합니다. @Override public void onBackPressed() { long tempTime = System . currentTimeMillis ( ) ; long intervalTime = tempTime - backPressedTime ; if ( 0 < = int...
자세한 내용 보기

Java8 Stream 가이드

작성자: -
Java8 Stream 가이드 1. 개요 Java 8의 새로운 기능 Stream에 대해 설명합니다. 2. Stream API Java 8의 주요 새로운 기능 중 하나는 여러가지 요소(element) 처리를 위한 매우 강력한 스트림 기능인 java.util.stream 입니다 . 클래스는 Stream 이며, T 타입 기반의 Stream을 다양한 방법으로 생성할 수 있습니다. 2.1. Stream 생성 stream () 및 of () 메소드를 사용하여 콜렉션 또는 배열과 같은 다른 요소 소스에서 스트림을 작성 String [ ] arr = new String [ ] { "a" , "b" , "c" } ; Stream < String > stream = Arrays . stream ( arr ) ; stream = Stream . of ( "a" , "b" , "c" ) ; stream 을 생성하는 쉬운 방법은 컬렉션 인터페이스를 통해 생성할 수 있습니다. Stream < String > stream = list . stream ( ) ; 2.2. 멀티쓰레딩 Streams stream API는 또한 스트림 요소에서 병렬 모드로 작업을 실행 하는 parallelStream() 메서드를 제공하여 멀티 스레딩을 단순화 합니다. 아래 코드 는 스트림의 모든 요소에 대해 doWork () 메소드 를 병렬 로 실행할 수 있도록 합니다 list . parallelStream ( ) . forEach ( element - > doWork ( element ) ) ; 3. Stream 사용법 스트림에서 제공하는 함수는 크게 중간 작업 (return Stream, self-return )과 연산작업 (특정 타입으로 return ) 으로 나뉩니다. long count = list . ...
자세한 내용 보기

Docker 환경에서 ELK + MySQL 연동하기 #1 ELK + MySQL 설치

작성자: -
이미지
안녕하세요. 남산돈가스입니다. 지난 포스팅까지 Docker의 기본 사용법에 대해서 알아보았습니다. 이번에는, 2번의 포스팅으로 나누어 Docker 환경 위에서 ELK스택을 구성하는 법에 대해서 소개 해드릴까 합니다. 회차 별로 소개할 내용은 다음과 같습니다. #1. ELK + MySQL 설치 #2. ELK + MySQL 연동 그 중 첫 번째 시간으로, ELK스택 환경과 연동을 위한 MySQL을 설치해보겠습니다. Docker 환경 위에서 설치하기 때문에, Docker에 대한 기본 사용법은 숙지하고 계셔야합니다. Docker(도커) 기본 사용법  을 참고하시면 될 것 같습니다. 자, 그럼 일단 환경설치를 위해서는 Docker 이미지를 설치해야합니다. 필요한 Docker 이미지는 ELK의 Elasticsearch, Logstash, Kibana 그리고 MySQL까지 총 4개입니다. pull 명령어를 이용하여 해당하는 이미지를 다운받습니다. * Elasticsearch gimseongsin@gimseongsin - ui - MacBook - Pro :~/ Desktop / es / data :> docker pull elasticsearch Using default tag : latest latest : Pulling from library / elasticsearch 0bd44ff9c2cf : Pull complete 047670ddbd2a : Pull complete ea7d5dc89438 : Pull complete 4a05570971bb : Pull complete 66f679cd5859 : Pull complete 89362eaac850 : Pull complete d76c23323cb4 : Pull complete f7a113d2d566 : Pull complete aba04b0b43a6 : Pull complete 9a29cd...
자세한 내용 보기