Bootstrap 3.3.7 | 콘텐츠의 기본 요소 | 문자색(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 클래스에서 사용되고 있기에 지금부터 잘 기억해 두도록 하자.