[부트스트랩] 컨텐츠 #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>

댓글

댓글 쓰기

주간 인기글

[ubuntu] 신규 계정에 sudo 권한 추가하기

작성자: -
이미지
NCP 에서 신규 서버를 생성하면  AWS 와는 다르게 root 계정과 패스워드를 발급해 줍니다. 해당 계정정보를 잘 보관한 후 실제 사용할 계정을 생성해서 서버를 관리하게 됩니다. 1. 우선 ubunbu 에서 신규 계정을 생성  합니다. # adduser namsan cs namsan 이라는 계정을 생성하고 패스워드를 설정하였습니다. 2. 신규 생성된 계정으로 전환 후 명령어를 실행해 봅니다. su 명령어를 통해 신규 생성 계정으로 전환 합니다. # su namsan cs sudo 명령어를 실행해 보겠습니다. # sudo date cs “namsan is not in the sudoers file.  This incident will be reported.” cs sudoers file 에 해당계정이 포함 되어있지 않다는 메시지가 출력됩니다. /etc/sudoers 에 신규 계정이 추가 되어 있지 않아 표출되는 에러 메시지 입니다. 다시 root 계정으로 전환하여 sudoers 파일을 수정해보겠습니다. su 명령어를 통해 다시 root 계정으로 전환 합니다. # su root cs 3. vi 명령어를 통해  /etc/sudoers 파일을 편집합니다. # vi /etc/sudoers cs # User privilege specification 항목에 아래와 같이 신규 생성된 계정 정보를 추가합니다. root  ALL=(ALL:ALL) ALL namsan  ALL=(ALL:ALL) ALL cs 이제 신규 생성된 사용자로 전환하여 sudo 명령어 실행 시 정상적으로 작동하는 것을 확인 할 수 있습니다.
자세한 내용 보기

[AWS] 사용중인 EC2 인스터스의 Type 변경하기

작성자: -
이미지
AWS Free Tier 사용목적으로 계정을 생성하고 Amazon EC2 인스턴스를 생성하게 되면 일반적으로 Free Tier 지원이 가능한 t2.micro Type 의 인스턴스 를 구성하게 됩니다. 하지만 서버구성후 개발 프로그램 테스트를 진행하다 보면 리소스 부족으로 인해 인스턴스 Type 변경이 필요한 경우가 생기게 됩니다. 이때 인스턴스 Type 을  변경하기 위한 두가지 방법이 존재 합니다. 첫번째 방법은 AMI 이미지 생성 후 해당 이미지를 복원하여 신규 EC2 인스턴스를 생성하는 방법입니다. 이 방법은 서버 절체 시간을 최소화 할수 있는 장점이 있지만 VPC,  Subnet, Securety Group 등 설정 작업이 필요합니다. 두번째 방법은  현재 인스턴스  형상 그대로 Type 만 변경하는 방법으로 매우 편리하게 Type 변경이 가능하지만 서버 운영을 잠시 중단했다가 다시 시작해 주어야 합니다. 24시간 운영되는 서비스가 아닌 테스트용 서버의 경우에는 번거로움을 최소화 하는 두번째 방법으로 인스턴스 타입 변경이 가능합니다. 두번째 방법을 통해 EC2 인스턴스의 타입 변경방법을 확인해 보도록 하겠습니다. 1. 인스턴스 중지 EC2 대시보드에서 변경하고자 하는 인스턴스를 선택 후 작업 > 인스턴스 상태 > 중지 를 선택합니다. 2. 변경 유형 선택 인스턴스 중지가 완료 되면 작업 > 인스턴스 설정 > 인스턴스 유형변경을 선택 합니다. 인스턴스 유형변경 팝업이 노출되면 변경 하고자 하는 인스턴스 타입을 선택하고 “적용” 합니다. m4.large 를 선택해 보겠습니다. 타입 변경 후 인스턴스 유형을 확인해 보면 m4.large 로 변경된 것을 확인할 수 있습니다. 3. 인스턴스 재실행 이제 인스턴스 실행을 위해 작업  > 인스턴스 상태 > 시작을 선택 합니다. 해당 인스턴스 부팅
자세한 내용 보기

[Spring Boot] JPA + Pageable 을 이용한 페이징 처리

작성자: -
이미지
안녕하세요. 남산돈가스 입니다. 오늘은 Spring Boot JPA를 이용하여 API 개발 시 간단하게 Pagination 와 Sorting을 처리할 수 있도록 도와주는 Pageable에 대해서 알아보려고 합니다. 웹 개발 시 Pagination 과 Sorting은 필수적이라 할 수 있지만, 실제 개별적으로 구현 시 번거로운 작업이 생기기 마련입니다. 또한 각 데이터베이스마다 페이징 쿼리가 다를 수 있다는 점에서 모든 요구조건을 만족하기 어려운 부분들이 존재하기 마련입니다. Spring Data JPA와 Pageable을 이용하면 이런 문제들을 아주 쉽게 해결할 수 있어 비즈니스 로직에 집중할 수 있게 도와줍니다. 우선 Pageable을 사용하여 얻을 수 있는 이점은 대표적으로 두 가지 입니다. 요건에 맞는 Pagination을 구현할 수 있다. 정렬이 필요한 데이터를 쉽게 Sorting 할 수 있다. 예제를 들어 설명하겠습니다. @Entity @Table (name= "post" ) @Getter public class Post extends Audity { @Id @GeneratedValue (strategy = GenerationType.IDENTITY) @Column (name= "id" ) private Long id; @Column (name= "title" ) private String title; @Column (length = 2000 , name= "content" ) private String content; @Column (length = 50 , name= "writer" ) private String writer; } 간단한 예제를 들기 위하여, "Post" 라는 Entity를 작성하였고, 예제를 위하여 약 20건
자세한 내용 보기

[NCP] DNS 와 로드밸런서 구성하기

작성자: -
이미지
NCP (Naver Cloud Platform) 에서 로드밸런서를 생성하고 도메인은 구성하는 방법에 대해 알아보겠습니다. 1. 서버 생성 로드밸런서 연결에 사용될 웹서버 2대를 생성하고 웹서버를 실행해 줍니다. 지난 포스트 보기  NCP 인스턴스 생성하기  2. 로드밸런서 생성 NCP 콘솔로 이동해  Loadbalancer 메뉴에서 로드밸런서 생성 버튼을 선택합니다. 로드밸런서 이름을 입력 합니다. 서버 리스트에서 1항 에서 생성한 2개의 서버를 모두 적용 서버로 선택한 후 "다음" 은 선택 합니다. 설정 정보를 확인한 후 "로드밸런서 생성" 을 선택 합니다. 로드밸런서가 생성되면 "접속정보" URL 을 확인 할 수 있습니다. "접속정보" URL 을 복사하여 웹브라우저를 통해 접속하면 로드밸런서를 통해 서버에 접속되는 것을 확인 할 수 있습니다. 로드밸런서 생성 시 알고리즘이 기본적으로 라운드로빈으로 설정 되므로 웹 브라우저를 새로고침 하면 이중화 구성된 두번째 서버로 페이지가 접속 되는 것을 확인할 수 있습니다. 3. 도메인 등록  로드밸런서 연결시 사용자 도메인을 사용하기 위해 도메인 등록을 진행합니다. NCP 콘손화면에서 DNS 메뉴를 선택한 후 "도메인 추가" 를 선택합니다. 사용하고자 하는 도메인 명을 입력하고 "추가" 를 선택 합니다. 도메인이 추가되면 NS 레코드 값 확인이 가능합니다. 해당 레코드 값을 복사하여 도메인 등록기관(가비아 등) 에서 적용하고자 하는 도메인의 네임서버 정보를 복사한 값으로 대체 합니다. 4. 로드밸런서 연결  도메인이 등록이 완료되면 로드 밸런서를 도메인과 연결해 보겠습니다. DNS 메뉴에서 "레코드추가" 를 선택하여 레코드를 추가합니다. 아
자세한 내용 보기

[MySQL] DB Time Zone 변경

작성자: -
이미지
간혹 MySQL DB 작업 완료 후 DB 시간이 UTC 로 표시되는 현상이 발생하는 경우가 있습니다. 이런 경우 KST 로 표시 되도록 변경하는 방법을 확인해 보도록 하겠습니다. 우선 DB 접속에 접속 합니다. DB 의 Time Zone 설정이 되어 있는지 아래와 같이 확인 합니다. Time Zone 설정이 되어 있지 않다면 아래와 같이 표시됩니다 . mysql> select count(*) from mysql.time_zone; Time Zone 설정을 위해 리눅스 환경으로 돌아와  아래와 같이 입력합니다. $ mysql_tzinfo_to_sql /usr/share/zoneinfo | mysql -u root -p mysql 다시 DB 로 접속 합니다. DB Time Zone 정보를 확인해 보면 아래와 같이 표출 됩니다. 저같은 경우에는 Time Zone 정보가 SYSTEM 으로 표시되네요 mysql> SELECT @@global.time_zone, @@session.time_zone; 이제 Time_Zone 정보를 Seoul 기준으로 변경해 줍니다. mysql> SET GLOBAL time_zone='Asia/Seoul'; mysql> SET time_zone = 'Asia/Seoul'; 정상적으로 변경이 완료 되었는지 다시 Time Zone 정보를 확인해 보겠습니다. mysql> SELECT @@global.time_zone, @@session.time_zone; 정상적으로 변경 된것을 확인 할 수 있습니다. DB 내 시간정보를 확인해 보면 로컬 시간이 표시되는 것을 확인할 수 있습니다. mysql> SELECT NOW(); 아래와 같이 Time Zone 정보를 다시 한번 확인해 보면 정상 적용된 것을 확인 할 수 있습니다. mysql> select @
자세한 내용 보기