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

댓글

댓글 쓰기

주간 인기글

카드뉴스 마케팅 팁

작성자: -
이미지
아이프렌즈펫의 카드뉴스 최근 SNS에서 가장 핫한 콘텐츠 유형 카드뉴스! 아이프렌즈펫은 현재 홍보 예산을 쓰지 않는 방법으로 인스타그램, 페이스북으로 카드뉴스 콘텐츠 마케팅을 하고 있습니다. 일주일에 1개씩 올리다보니 어느덧 6개월 정도의 시간이 흘렀습니다. 짧은 기간이지만 운영한 경험을 공유하고자 합니다. ㅎㅎ 아이프렌즈펫 페이스북 페이지 >  https://www.facebook.com/ifriendspetpage/ 아이프렌즈펫 인스타그램 >  http://picbear.com/ifriendspet 카드뉴스란? 카드뉴스는 짧은 글과 이미지로 구성된 여러 장의 카드입니다. 단순한 홍보에서부터 언론사까지 다양한 곳에서 활용되고 있는 컨텐츠입니다. 카드뉴스 마케팅의 장점 * 모바일 환경에서 가장 최적화된 콘텐츠 유형이며, * 제작 방법도 다른 홍보 수단에 비해 비교적 간단하고 * 홍보 효과가 빠릅니다. (블로그 - 약 6개월, 카드뉴스 - 3개월) 재미있는 카드뉴스 마케팅 예 옥션 #어서옥션 인스타그램 >  https://www.instagram.com/ebayauction/ 제가 인스타그램에서 가장 재미있게 구경하는 피드 중 하나입니다. 홍보 느낌이 하나도 안나요~ 오레오 #오레오 페이스북 >  http://bit.ly/2gA4MDw 오레오는 제가 마케팅의 ㅁ자도 모를때부터 구경하고 있던 페이스북인데요 과자 하나가지고 이렇게 창의적인 작품들을 꾸준히 업데이트 할 수 있다니 놀랍더라구요 ㅎㅎ 카드뉴스 만들기 1. 주제 선정 카드뉴스를 통해 얻을 목표와 타겟이 명확해야 합니다. 그에 맞춰 전달하려는 정보나 메시지 등을 리서치해서 기획을 하고 제작합니다. 처음 해보시는 분들에게 실패를 줄이기 위한 팁을 드리자면 (여기서 실패란 그냥..묻히는 것 말입니다 ㅠ) 1. 비슷한 주제의 페이스북 페이지 운영하는 곳을 되도
자세한 내용 보기

[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 명령어 실행 시 정상적으로 작동하는 것을 확인 할 수 있습니다.
자세한 내용 보기

SPA(Sigle Page Applications) 란 무엇인가?

작성자: -
이미지
먼저 SPA (Single Page Application)가 필요한 이유부터 살펴 보면, 단일 페이지 응용 프로그램은 수년간 사용되어 왔지만 일반적인 웹상에서는 찾아보기가 어렵습니다. 그렇지만, 앞으로 많은 웹사이트가 SPA로 개발될 아주 좋은 계기가 있습니다. SPA는 SaaS (Software as a Service) 플랫폼 또는 인터넷 서비스의 상황판 같은 대시보드 부분을 구축하고 기업의 데이터 기반 및 폼 기반 애플리케이션을 구축하기 위해 지난 몇 년 동안 많이 채택되어  왔으며, 추후에 개발될 웹 어플리케이션에서 우선적으로 고려될 것으로 예상되어 집니다. 그러면 Angular2(이하 Angular)로 개발하는 어플리케이션은 SPA로 개발해야 하는 건가요?   처음 Angular2를 접하게 되면 당연히 SPA로 개발 된다고 생각할수 있지만, 다르게 구축할 수도 있습니다. SPA는 단순하게 다음과 같이 정의해 볼 수 있습니다. 1개의 페이지만 있는 어플리케이션 실제 SPA 확인해보고 싶으시면 남도패스 사이트(https://m.namdopass.co.kr)를  방문해보면 알수 있습니다. 하단의 홈/지역별/로그인/남도패스 각각 메뉴를 이동해 보면 실제 하나의 페이지에서 내용만 바뀌는 것을 확인할 수 있습니다. 웹사이트를 둘러보기를 시작하면 페이지가 완전히 다시 로드되지 않는다는 것을 알 수 있습니다. 화면 전환 시마다 REST API 서버를 통해 데이터를 바인딩하고 있습니다. 그럼 SPA 구축 할 때의 장점은 무엇이며 어떻게 작동하는지 살펴보면 남도패스 사이트(https://m.namdopass.co.kr) 첫화면을 소스보기 해보면 다운로드되는 페이지는 첫 번째 요청입니다. 즉, 애플리케이션의 문자 그대로 단일 페이지입니다. 한 가지만 주목하면 이 페이지는 거의 비어 있으며 태그를 제외하고는  많은 것이 없습니다. 이 소스는 실제 Amazon S3 버킷의 정적 호스팅을 통해 전송됩니다. 단일 페이
자세한 내용 보기

안드로이드에서 당겨서 새로고침(SwipeRefreshLayout) 쉽게 구현하기

작성자: -
앱을 개발 하다보면 필수 기능중에 하나가 보고 있는 리스트나 상세 페이지등을 새로고침 하는 것 입니다. 몇년 전 까지만 하더라도 새로 고침 기능이라고 하면 아이폰 처럼 뷰를 당기면 공간이 벌어지면서 새로고침 하는 방식을 많이 사용 했습니다.(여전히 이 방법을 사용하는 앱은 많습니다.) 해당 새로고침을 기능을 제공 하려면 개발가 하나하나 구현 해야해서 쉽지 않은 기능 중 하나였습니다. 하지만 지금은 android 레이아웃중 SwipeRefreshLayout을 제공하여 레이아웃만 추가한다면 별다른 구현 없이도 위에서 아래로 내려오는 새로고침 기능을 사용 할수 있게 되었습니다. SwipeRefreshLayout을 간단하게 구현하는 샘플 코드를 작성해 보겠습니다. 1단계 : 레이아웃 새로고침이 될 뷰를 SwipeRefreshLayout으로 자식뷰로 만듭니다.       <android.support.v4.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/swipe_refresh"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webView"></WebView> </android.support.v4.widget.SwipeRefreshLayout> 2단계 : 새로고침 이벤트 해당 뷰 영역을 위에서 아래로 당기면
자세한 내용 보기

[AWS] WinSCP 를 이용해 Linux 인스턴스로 파일 전송하기

작성자: -
이미지
지난 포스팅에서는 Putty 를 활용한 Linux 인스턴스 접속 방법에 대해 알아 보았습니다. 오늘은 이어서  Linux 인스턴스에 파일을 전송할수 있는 WinSCP 활용법에 대해 알아보겠습니다. WinSCP 를 사용하기 위해서는 우선 지난 포스팅에서 Puttygen 을 통해 생성한 PPK 파일이 필요합니다. PPK 파일생성 방법은 [AWS] Windows 에서 Linux 인스턴스 연결을 위한 PuTTY 사용방법 을 참고. 1.  개인 key 를 활용한 서버 접속 방법 아래 링크를 통해 WinSCP 프로그램을 다운로드 합니다. WinSCP 다운로드 -> https://winscp.net/eng/download.php WinSCP 를 설치하고 프로그램을 실행 합니다. 프로그램을 실행하면 바로 로그인 입력 화면이 표출됩니다. 호스트 이름 에 Ec2 인스턴스의 Public IP 또는 Public DNS 를 입력합니다. 사용자 이름 에 접속할 계정 정보 를 입력 합니다. 인증키를 통해 서버에 접속할 예정이므로 설정을 위해 고급버튼 을 선택합니다. * 인스턴스 접속계정 정보는 아래와 같이 구성됩니다. Amazon Linux AMI의 경우 사용자 이름은 ec2-user RHEL AMI의 경우 사용자 이름은 ec2-user 또는 root Ubuntu AMI의 경우 사용자 이름은 ubuntu 또는 root Centos AMI의 경우 사용자 이름은 centos Fedora AMI의 경우 사용자 이름은 ec2-user SUSE의 경우 사용자 이름은 ec2-user 또는 root SSH – 인증 메뉴를 통해 개인키 파일을 등록할 수 있습니다.  SSH 접속을 위해 생성했던 PPK 파일을 선택한 후 확인 을 선택 합니다. 다시 로그인 화면으로 돌아와 로그인 버튼을 선택 합니다. 아래와 같이 인증 절차가 진행됩니다. 인증 완료 후 서버에 접속되고 ec2-user 디렉토리
자세한 내용 보기