Home Bootstrap 문단 꾸미기
Post
Cancel

Bootstrap 문단 꾸미기

일반적인 텍스트에 적용되어 있는 기본 스타일들 확인하기

시작 전 미리 지정해야 할 사항

항상 다음중 하나로 전체 영역을 지정하고 시작.

  • .container : 고정폭을 갖는 영역
    • 브라우저의 해상도에 따라 다음의 크기로 순차적으로 변함. 1170px > 970px > 750px > 100%
  • .container-fluid : 넓이 100%

1. 제목 구성하기

폰트는 각 헤더에 해당하는 <h*> 헤더들이 있고, 이 헤더들의 안에 <small> 태그를 이용하면 제목에 가제를 넣는 기분으로 폰트 스타일을 설정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <div class="page-header">
    <h2>제목 구성 태그</h2>
  </div>
  <h1>h1. Bootstrap heading - 36px</h1>
  <h2>h2. Bootstrap heading - 30px</h2>
  <h3>h3. Bootstrap heading - 24px</h3>
  <h4>h4. Bootstrap heading - 18px</h4>
  <h5>h5. Bootstrap heading - 14px</h5>
  <h6>h6. Bootstrap heading - 12px</h6>
</div>
  • 출력결과

Untitled (1)

2. 제목 + small 태그

**&lt; : <
&gt; : >**

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <div class="page-header">
    <h2>제목 구성 태그와 &lt;small&gt;태그 함께 사용하기</h2>
  </div>
  <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
  <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
  <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
  <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
  <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
  <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
</div>
  • 출력결과

    Untitled (2)

3. 본문 구성하기

1
2
3
4
5
6
7
8
9
10
<div class="container">
  <div class="page-header">
    <h2>본문을 구성하는 방법</h2>
  </div>
  <p>일반적인 &lt;p&gt; 태그의 글자 크기는 14px 입니다.</p>
  <p class="lead">
    .lead 클래스를 사용하면 특정 문단의 내용을 강조할 수 있습니다. ( 더 크게
    표현됨)
  </p>
</div>
  • 출력결과

    Untitled (3)

4. 내용 강조용 inline 요소들

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div class="container">
  <div class="page-header">
    <h2>내용을 강조하는 inline 요소들</h2>
  </div>
  <p>
    특정 단어를 <mark>강조</mark>하기 위해 &lt;mark&gt;태그를 사용할 수
    있습니다.
  </p>
  <p>
    <del
      >내용이 삭제되었음을 의미하고자 하는 경우 태그를
      &lt;del&gt;사용합니다.</del
    >
  </p>
  <p>
    <s>내용이 취소되었음을 의미하고자 할 경우 &lt;s&gt;태그를 사용합니다.</s>
  </p>
  <p>
    <ins>밑줄을 표시하기 위해 &lt;ins&gt;을 사용합니다.</ins>
  </p>
  <p>
    <u>&lt;u&gt;태그 역시 밑줄을 표시합니다.</u>
  </p>
  <p>
    <small>&lt;small&gt;태그는 주변보다 글자를 작게 표시합니다.</small>
  </p>
  <p>
    <strong
      >&lt;strong&gt;태그와 &lt;b&gt;태그는 글자를 굵게 표시합니다.</strong
    >
  </p>
  <p>
    <em>&lt;em&gt;태그와 &lt;i&gt;태그는 글자를 기울임꼴로 표시합니다.</em>
  </p>
  <p>
    <span class="text-primary"
      >Twitter Bootstrap은 반응형 웹 프레임워크 입니다.</span
    ><br />
    <span class="text-success"
      >Twitter Bootstrap은 반응형 웹 프레임워크 입니다.</span
    ><br />
    <span class="text-info"
      >Twitter Bootstrap은 반응형 웹 프레임워크 입니다.</span
    ><br />
    <span class="text-warning"
      >Twitter Bootstrap은 반응형 웹 프레임워크 입니다.</span
    ><br />
    <span class="text-danger"
      >Twitter Bootstrap은 반응형 웹 프레임워크 입니다.</span
    ><br />
    <span class="text-muted"
      >Twitter Bootstrap은 반응형 웹 프레임워크 입니다.</span
    >
  </p>
</div>
  • 출력결과

    Untitled (4)

5. 문단 정렬

1
2
3
4
5
6
7
8
<div class="container">
  <div class="page-header">
    <h2>문단 정렬</h2>
  </div>
  <p class="text-left">왼쪽 정렬</p>
  <p class="text-center">가운데 정렬</p>
  <p class="text-right">오른쪽 정렬</p>
</div>
  • 출력결과

    Untitled (5)

6. 문단 배경 색상

bg-primary - 파랑색 배경 bg-success - 초록색 배경 bg-info - 하늘색 배경 bg-warning - 노란색 배경 bg-danger - 빨간색 배경

1
2
3
4
5
6
7
8
9
10
<div class="container">
  <div class="page-header">
    <h2>문단 배경 색상</h2>
  </div>
  <p class="bg-primary">Hello Bootstrap</p>
  <p class="bg-success">Hello Bootstrap</p>
  <p class="bg-info">Hello Bootstrap</p>
  <p class="bg-warning">Hello Bootstrap</p>
  <p class="bg-danger">Hello Bootstrap</p>
</div>
  • 출력결과

    Untitled (6)

7. 대소문자 변환

lowercase - 소문자 변환 uppercase - 대문자 변환 capitalize - 단어마다 첫 글자를 대문자로 변환

1
2
3
4
5
6
7
8
<div class="container">
  <div class="page-header">
    <h2>대소문자 변환 <small>(한글은 해당 없음)</small></h2>
  </div>
  <p class="text-lowercase">Twitter Bootstrap3 (소문자로 변환)</p>
  <p class="text-uppercase">Twitter Bootstrap3 (대문자로 변환)</p>
  <p class="text-capitalize">Twitter Bootstrap3. (현상태로 둠)</p>
</div>
  • 출력결과

    Untitled (7)

8. 약어 표현

<abbr> - 축약된 단어를 정의하는 태그

1
2
3
4
5
6
7
8
9
<div class="container">
  <div class="page-header">
    <h2>약어</h2>
  </div>
  <p>
    <abbr title="Bootstrap3">BS3</abbr>는 트위터에서 만든 반응형 웹 프레임워크
    입니다.
  </p>
</div>
  • 출력결과

    • 마우스 오버 시 표시되는 화면

      Untitled (8)

    Untitled (9)

9. 두문자어

1
2
3
4
5
6
7
8
9
10
<div class="container">
  <div class="page-header">
    <h2>두문자어</h2>
  </div>
  <p>
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>은 웹
    페이지 제작에 사용되는 마크업언어 입니다.<br />
    .initialism 클래스는 글자를 90% 작게 표시합니다.
  </p>
</div>
  • 출력결과

    Untitled (10)

10. 주소, 연락처, 카피라이트 표시

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <div class="page-header">
    <h2>주소,연락처,카피라이트 표시</h2>
  </div>
  <address>
    <strong>토마토</strong><br />
    잘생긴 토마토 많고 많지만 그 중에 가장 잘 생긴 토마토!!<br />
    <a href="mailto:[email protected]">[email protected]</a><br />
    <abbr title="Phone">P:</abbr> (010) 1234-5678
  </address>
</div>
  • 출력결과

    Untitled (11)

11. 인용문

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="container">
  <div class="page-header">
    <h2>인용문</h2>
  </div>
  <blockquote>
    <!-- 인용한 내용은 일반 문단으로 구성 -->
    <p>Twitter Bootstrap은 모바일 친화적인 반응형 웹 프레임워크 입니다.</p>
    <!-- 출처를 표시하기 위해 <footer>태그 사용 -->
    <!-- 출처의 원천은 &lt;city&gt; 태그 사용 -->
    <footer>
      <city title="https://getbootstrap.com">Twitter Bootstrap 웹 사이트</city
      >에 설명된 소개글 중
    </footer>
  </blockquote>
  <blockquote class="blockquote-reverse">
    <!-- 인용한 내용은 일반 문단으로 구성 -->
    <p>Twitter Bootstrap은 모바일 친화적인 반응형 웹 프레임워크 입니다.</p>
    <footer>
      <city title="https://getbootstrap.com">Twitter Bootstrap 웹 사이트</city
      >에 설명된 소개글 중
    </footer>
  </blockquote>
</div>
  • 출력결과

    Untitled (12)

This post is licensed under CC BY 4.0 by the author.