Bootstrap 3.3.7 콘텐츠의 기본 요소

Bootstrap에서는 Web 페이지에 게재하는 일반적인 콘텐츠 작성 어떻게 할 것인가. 주요 것에 대해 정리하여 설명한다.
Tags:

헤더, 제목, 본문

콘텐츠의 기본은 “헤더”, “제목”, “본문"라고 하는 텍스트이다. 이들은 기본적으로 HTML 태그 그대로 이다.

아래에 아주 간단한 내용의 예제이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>내용 표시</h1>
            <h2>서브 타이틀</h2>
        </div>
         
        <h3>작은 제목</h3>
        <p>
        이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다.
        이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다.
       이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다. 이것은 콘텐츠의 본문입니다.
        </p>
         
        <blockquote>
            <p><small>인용 텍스트</small></p>
        </blockquote>
        <blockquote class="pull-right">
            <p><small>인용 텍스트</small></p>
        </blockquote>
    </div>
</div>
     
</div>
 
</body>
</html>

이를 바탕으로 주요 콘텐츠 요소에 대해 설명한다.

제목(title)과 머리글(header)

제목은 <h1> ~ <h3> 태그를 사용하고 있다. 아무런 특색도 없는 단순한 태그이다. 여기에 샘플에서는 <h1>, <h2>와 <div class="page-header">와 같은 태그를 사용하고 있다.

이 class="page-header"라는 스타일은 헤더 부분의 스타일 클래스이다. 이것을 지정하여 그 부분을 헤더로 분리 표시한다.

콘텐츠

콘텐츠는 보통 <p> 태그를 사용하여 작성하면 된다. 이것는 특별한 것은 아무것도 필요하지 않다.

인용 표시

그밖에 인용문는 <blockquote> 태그을 사용하였다. 이는 클래스를 지정하지 않으면 보통 왼쪽으로 정렬되고, class="pull-right"를 지정하면 오른쪽에 정렬된다. 또한, 이 표시는 글꼴 크기 등에 영향을주지 않기 때문에, 일반적으로 <small> 태그로 다소 작게 하여 인용문 답게 할 수 있다.

  • 이와 같이 콘텐츠의 기본 요소는 태그 자체의 HTML 표준을 사용할 뿐이다. 몇개의 스타일 클래스를 지정하고 있지만, Bootstrap이라는 점에는 그뿐이다. 대부분 Bootstrap 등 의식하지 않고 일반적인 콘텐츠를 작성하면 된다.

테이블(table)

테이블은 보통의 <table> 태그를 사용하여 작성한다. 이 테이블에 대한 스타일이 준비되어 있으며, 스타일 클래스를 지정하여 디자인을 설정할 수 있다.

이 클래스는 <table> 태그에 지정하는 것으로, 다음과 같은 클래스가 준비되어 있다.

테이블의 기본 표시

<table class="table">

테이블의 기본 클래스이라고 할 수 있다. 일반적인 테이블이다. 보기 쉽게 각 행마다 가로줄이 들어간다. 테이블 표시에는 이 클래스를 사용한다.

표의 가로폭을 100%로 만들고, 표의 내부에 가로선을 만든다.

<h1><code>class="table"</code></h1>
<table class="table">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Notebook</td>
      <td>1,000,000</td>
      <td>5</td>
      <td>5,000,000</td>
    </tr>
    <tr>
      <td>Tablet</td>
      <td>500,000</td>
      <td>6</td>
      <td>3,000,000</td>
    </tr>
    <tr>
      <td>Monitor</td>
      <td>300,000</td>
      <td>10</td>
      <td>3,000,000</td>
    </tr>
  </tbody>
</table>

스트라이프(줄무늬) 표시

<table class="table table-striped">

<tbody> 안에 표시되는 짝수행과 홀수행에 배경색을 변경하는 스트라이프 넣는다. table-striped 클래스를 추가한다.

:nth-child 선택자를 이용하므로 IE8 이하에는 적용되지 않는다.

<h1><code>class="table table-striped"</code></h1>
<table class="table table-striped">
  ...
</table>

보더(border) 표시

<table class="table table-bordered">

이는 전체 사각 테두리로 둘러싸고, 각 항목에 테두리를 긋고 표로 만든다. table-borderd 클래스를 추가한다.

바깥쪽과 열 사이에도 선을 그린다.

<h1><code>class="table table-bordered"</code></h1>
<table class="table table-bordered">
  ...
</table>

호버(hover)

<table class="table table-hover">

마우스 포인터가 있는 행의 배경을 바꾸어 눈에 띄도록 하기 위한 것이다. table-hover 클래스를 추가한다.

마우스 포인터를 올리면 배경색이 변한다.

<h1><code>class="table table-hover"</code></h1>
<table class="table table-hover">
  ...
</table>

행 높이 줄여서 표시

<table class="table table-condensed">

행 높이를 줄인다.

<h1><code>class="table table-condensed"</code></h1>
<table class="table table-condensed">
  ...
</table>

 

그밖에 기본 table 클래스에 필요에 따라서 그외의 클래스를 추가하여 사용한다. 예를 들어, <table class="table table-bordered table-hover">라고 하면, 테이블을 표 형태로 표시하고, 더욱 마우스 포인터가 있는 행을 두드러지게 하는 것이다.

배경색

이 외에 특정 행이나 셀(항목)을 눈에 띄게 하기 위한 것으로 다음과 같은 클래스가 준비되어 있다. <tr>, <td>, <th> 태그에 클래스를 추가하여 배경색을 넣을 수 있다.

클래스의 값으로 active, success, info, warning, danger를 사용할 수 있다.

클래스 설명
class=“info” 정보. 간단한 메시지 표시.
class=“warning” 주의 · 경고, info보다 두드러지게 표시에 사용하는 것.
class=“success” 어떤 작업이 성공적으로 완료되었다는 메시지용.
class=“error” 어떤 작업이 실패했음을 나타내는 메시지용. 
<h1>Background Color</h1>
<table class="table">
  <thead>
    <tr class="active">
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr class="success">
      <td>Notebook</td>
      <td>1,000,000</td>
      <td>5</td>
      <td>5,000,000</td>
    </tr>
    <tr class="info">
      <td>Tablet</td>
      <td>500,000</td>
      <td>6</td>
      <td>3,000,000</td>
    </tr>
    <tr>
      <td class="warning">Monitor</td>
      <td class="danger">300,000</td>
      <td class="warning">10</td>
      <td class="danger">3,000,000</td>
    </tr>
  </tbody>
</table>

가로 스크롤

<div class="table-responsive">

가로폭 768px 미만에서 표 안의 내용이 줄바꿈이 될 정도로 표가 크다면, 표를 줄이지 않고 가로 스크롤바를 만든다.

<h1>Responsive Table</h1>
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
        <th>Lorem Ipsum Dolor</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
      </tr>
      <tr>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
      </tr>
      <tr>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
        <td>Lorem Ipsum Dolor</td>
      </tr>
    </tbody>
  </table>
</div>

조합하여 사용하기

이것들을 조합하여 테이블을 만든다. 이용 예제는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>내용 표시</h1>
            <h2>테이블</h2>
        </div>
         
        <table class="table">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>성진</td>
                    <td>sungjin@dekuma.com</td>
                    </tr>
                <tr>
                    <td>2</td>
                    <td>원석</td>
                    <td>wonsuk@flower</td>
                </tr>
                <tr class="info">
                    <td>3</td>
                    <td>병호</td>
                    <td>byeongho@happy</td>
                </tr>
            </tbody>
        </table>
         
    </div>
</div>
     
</div>
 
</body>
</html>

<table class="table">으로 테이블을 만들고, 세번째 <tr> 태그에 class="info"를 지정하고 있다.

패널(panel)

Web 페이지의 콘텐츠와 분리된 내용을 페이지에 컴팩트하게 정리하여 표시하고 싶은 경우가 있다. 어떤 종류의 칼럼이거나 주의, 경고 표시 등과 같이 본래는 경고와 다이어로그를 표시하는 경우이다.

이러한 때에 편리한 것이 “패널(panel)“이다. 이는 Bootstrap 자체의 보기에서 페이지에 별도의 콘텐츠를 포함을 간단히 할 수 있다. 이 패널은 다음과 같은 형태로 작성한다.

<div class="panel">
    <div class="panel-heading">
        <p class="panel-title">타이틀</p>
    </div>
    <div class="panel-body">
        내용
    </div>
    <div class="panel-footer">
        꼬리말
    </div>
</div>

패널는 class="panel"라는 클래스를 지정한 <div> 태그를 사용하여 작성한다(다만, panel 외에 뒤에 오는 패널 스타일에 클래스가 필요하다).

패널에는 헤더, 바디, 풋터의 3개의 태그를 제공한다. 각각 class="panel-title", class="panel-body, class="panel-footer라는 클래스를 지정한다. 또한, 헤더 부분에는 타이틀 표시의 스타일을 지정하는 class="panel-title이 준비되어 있다.

패널의 스타일 설정

실제로 패널을 제공하는 경우는 class="panel"에 추가적으로 패널의 스타일에 대한 클래스를 추가한다. 여기에는 아래와 같은 것이 준비되어 있다.

클래스 설명
paner-default 기본 패널이다. 전체적으로 회색색을 바탕으로 표시한다.
panel-primary 파란색의 제목와 테두리를 표시한 보다 명확하게 눈에 띄는 스타일이다.
panel-success 어떤 동작이 성공한 메시지용이며, 밝은 녹색의 제목이다.
panel-info 정보 표시용이며, 밝은 파란색의 제목이다.
panel-warning 경고 표시용이며, 노란 제목이다.
panel-danger 위험을 알리기 위한 것으로, 붉은 보라 같은 제목이다.

이것들은 class="panel"와 같이 설정하여 패널이 표시되게 된다. 이용 예제를 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2>패널</h2>
        </div>
         
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    패널 표시에 대해
                </h3>
            </div>
            <div class="panel-body">
                <p>여기에 패널의 컨텐츠을 준비한다.
                여기에 패널의 컨텐츠을 준비한다.
                여기에 패널의 컨텐츠을 준비한다.</p>
            </div>
            <div class="panel-footer">
                copyright devkuma.
            </div>
        </div>
         
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서는 <div class="panel panel-primary"> 이라는 형태로 패널용 태그를 제공하고 있다.

점보트론(jumbotron)

점보트론은 어떤 특정 컨텐츠나 정보를 두르러지게 하기위한 큰 박스를 말한다. 점보트론은 라운드 코너를 가진 회색 박스로 디스플레이 된다. 그 안에 폰트 사이즈 역시 확장된다.

이 점보트론는 다음과 같이 작성한다.

<div class="jumbotron">
    <div class="container">
        여기에 표시 할 내용을 쓰기
    </div>
</div>

이것은 회색 배경으로 채워진 패널 안에 내용을 표시한다. 이 점보트론은 분명히 강조하고 싶은 내용을 표시하는데 유용하다.

점보트론는 “well"라는 클래스도 준비되어 있다. class="jumbotron well"로 지정하면 윤곽이 약간 명확한 스타일이 된다.

(덧붙여서, “점보 트론"라고하는 것은, SONY가 개발한 대형 전광판을 통칭하기도 한다.)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2>점보트론</h2>
        </div>
         
        <div class="jumbotron well">
            <div class="container">
            <p>점보트론 표시이다.  점보트론 표시이다. 
            점보트론 표시이다.  점보트론 표시이다. </p>
            </div>
        </div>

    </div>
</div>
     
</div>
 
</body>
</html>

문자색(text)와 배경색(bg)

HTML에는 스타일 시트를 사용하여 텍스트를 자유롭게 색상 설정을 할 수 있다. 그리고, Bootstrap에는 다양한 부품의 역할과 중요성에 대해 몇가지 스타일을 준비하고 있고, 각각 고유의 색상이 설정되어 있다.

앞에서 이미, 여러가지 설명 등은 진한 파란색이 사용되고, 위험한 작업에는 빨간색이 사용된다고 설명했었다.

알림 및 대화, 버튼 등 다양한 GUI 부품이 Bootstrap에 준비되어 있는데, 그것을 살펴보면 “이것은 초보자의 설명용”, “이것은 위험 경고"라는 식의 용도로 클래스 지정하면 그에 맞는 색상으로 디자인이 되도록 되어있다.

따라서 텍스트의 색상도 미리 준비되어 있는 클래스를 사용하여, 그 중에서 선택 지정하는 것이 기본으로 되어 있다. 준비되어 있는 텍스트의 색상 관계 클래스는 다음과 같다.

텍스트 색

  • text-muted
  • text-primary
  • text-success
  • text-info
  • text-warning
  • text-danger

배경 색

  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger

아래에 이들을 사용하여 텍스트를 표시하는 예제를 보도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>컨텐츠 표시</h1>
            <h2 >Color와 Background</h2>
        </div>
         
        <div>
            <p class="text-muted">이것은 text-muted 텍스트입니다.</p>
            <p class="text-primary">이것은 text-primary 텍스트입니다.</p>
            <p class="text-success">이것은 text-success 텍스트입니다.</p>
            <p class="text-info">이것은 text-infod 텍스트입니다.</p>
            <p class="text-warning">이것은 text-warning 텍스트입니다.</p>
            <p class="text-danger">이것은 text-danger 텍스트입니다.</p>
            <p class="bg-primary">class="bg-primary"</p>
            <p class="bg-success">class="bg-success"</p>
            <p class="bg-info">class="bg-info"</p>
            <p class="bg-warning">class="bg-warning"</p>
            <p class="bg-danger">class="bg-danger"</p>
        </div>
    </div>
</div>
     
</div>
 
</body>
</html>

이를 보면, 대체로 어느 것이 무슨 색인지 알게 될 것이다. 클래스 이름에 사용되는 “primary”, “success"라는 단어는 Bootstrap 전체에서 공통으로 사용되고 있다. 앞으로 다양한 GUI 클래스에서 사용되고 있기에 지금부터 잘 기억해 두도록 하자.

이미지(img)

이미지는 정해진 크기대로 표시되기에, 크기를 정하지 않았다면 원본 크기대로 나온다. 따라서 웹브라우저의 가로 크기보다 큰 이미지가 있다면, 가로 스크롤바 또는 세로 스크롤바가 생긴다.

반응형 이미지

img 요소의 class 값에 img-responsive를 추가하면, 이미지의 가로 크기가 부모 요소의 가로 크기를 넘지 못한다.

<img src="images/sample-image-01.png" alt="" class="img-responsive">

이미지 가운데 정렬

이미지를 가운데 정렬하고 싶다면 class의 값에 center-block을 추가한다.

<img src="images/sample-image-01.png" alt="" width="400" class="img-responsive center-block">

이미지 꾸미기

class에 값을 추가하는 것만으로 이미지를 꾸밀 수 있다.

클래스 설명
img-rounded 테두리를 곡선으로 만든다.
img-circle 원 또는 타원으로 만든다.
img-thumbnail 테두리를 곡선으로 만들고, 테두리와 이미지 사이에 여백을 만든다.

아래 여러 이미지를 표시하는 예제는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-01.png" alt="" class="img-responsive"></p>
          <p><code>class="img-responsive center-block"</code></p>
          <p><img src="images/sample-image-01.png" alt="" width="400" class="img-responsive center-block"></p>
        </div>
        <div class="col-xs-4">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-02.png" alt="" class="img-responsive img-rounded"></p>
        </div>
        <div class="col-xs-4">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-02.png" alt="" class="img-responsive img-circle"></p>
        </div>
        <div class="col-xs-4">
          <p><code>class="img-responsive"</code></p>
          <p><img src="images/sample-image-02.png" alt="" class="img-responsive img-thumbnail"></p>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

참고

다음의 코드를 CSS에 추가하면 img 요소의 class 값에 img-responsive를 추가하지 않아도, 모든 이미지가 반응형이 된다.

img { max-width: 100%; height: auto; }



최종 수정 : 2021-08-25