일반적인 텍스트에 적용되어 있는 기본 스타일들 확인하기
시작 전 미리 지정해야 할 사항
항상 다음중 하나로 전체 영역을 지정하고 시작.
.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>
- 출력결과
.png)
2. 제목 + small 태그
**< : <
> : >**
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
<div class="page-header">
<h2>제목 구성 태그와 <small>태그 함께 사용하기</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)]()
.png)
3. 본문 구성하기
1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="page-header">
<h2>본문을 구성하는 방법</h2>
</div>
<p>일반적인 <p> 태그의 글자 크기는 14px 입니다.</p>
<p class="lead">
.lead 클래스를 사용하면 특정 문단의 내용을 강조할 수 있습니다. ( 더 크게
표현됨)
</p>
</div>
출력결과
![Untitled (3)]()
.png)
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>하기 위해 <mark>태그를 사용할 수
있습니다.
</p>
<p>
<del
>내용이 삭제되었음을 의미하고자 하는 경우 태그를
<del>사용합니다.</del
>
</p>
<p>
<s>내용이 취소되었음을 의미하고자 할 경우 <s>태그를 사용합니다.</s>
</p>
<p>
<ins>밑줄을 표시하기 위해 <ins>을 사용합니다.</ins>
</p>
<p>
<u><u>태그 역시 밑줄을 표시합니다.</u>
</p>
<p>
<small><small>태그는 주변보다 글자를 작게 표시합니다.</small>
</p>
<p>
<strong
><strong>태그와 <b>태그는 글자를 굵게 표시합니다.</strong
>
</p>
<p>
<em><em>태그와 <i>태그는 글자를 기울임꼴로 표시합니다.</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)]()
.png)
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)]()
.png)
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)]()
.png)
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)]()
.png)
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)]()
.png)
.png)
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)]()
.png)
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)]()
.png)
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>태그 사용 -->
<!-- 출처의 원천은 <city> 태그 사용 -->
<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)]()
.png)