Bootstrap 3.3.7 | 콘텐츠의 기본 요소 | 패널(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"> 이라는 형태로 패널용 태그를 제공하고 있다.