Bootstrap 3.3.7 | 콘텐츠의 기본 요소 | 헤더, 제목, 본문

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 등 의식하지 않고 일반적인 콘텐츠를 작성하면 된다.