부트스트랩 콘텐츠 레이아웃 (Bootstrap Content Layout)
타이포그래피 (Typography)
부트스트랩의 타이포그래피는 다양한 HTML 요소와 클래스를 사용하여 텍스트의 스타일을 정의합니다. 이를 통해 일관된 텍스트 스타일을 유지할 수 있습니다.
- 헤딩 (Headings):
h1부터h6까지의 태그를 사용하여 제목을 정의합니다. - 본문 텍스트 (Body Text):
<p>태그를 사용하여 본문 텍스트를 정의합니다..lead클래스를 사용하면 강조된 본문 텍스트를 만들 수 있습니다. - 텍스트 정렬 (Text Alignment):
.text-left,.text-center,.text-right클래스를 사용하여 텍스트 정렬을 설정할 수 있습니다. - 텍스트 변환 (Text Transformation):
.text-lowercase,.text-uppercase,.text-capitalize클래스를 사용하여 텍스트 변환을 설정할 수 있습니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 타이포그래피 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>헤딩 1</h1>
<p class="lead">리드 텍스트</p>
<p>일반 본문 텍스트입니다. <mark>강조된 텍스트</mark>와 <small>작은 텍스트</small>를 포함할 수 있습니다.</p>
<p class="text-right">오른쪽 정렬 텍스트</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
이미지 (Images)
부트스트랩은 이미지의 스타일링을 위한 다양한 클래스를 제공합니다.
- 반응형 이미지 (Responsive Images):
.img-fluid클래스를 사용하여 이미지가 부모 요소의 너비에 맞게 조정되도록 합니다. - 이미지 형상 (Image Shapes):
.rounded,.rounded-circle,.img-thumbnail클래스를 사용하여 이미지 모양을 변경할 수 있습니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 이미지 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<img src="example.jpg" class="img-fluid" alt="반응형 이미지">
<img src="example.jpg" class="rounded" alt="둥근 모서리 이미지">
<img src="example.jpg" class="rounded-circle" alt="원형 이미지">
<img src="example.jpg" class="img-thumbnail" alt="썸네일 이미지">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
테이블 (Tables)
부트스트랩은 테이블을 꾸미기 위한 다양한 클래스를 제공합니다.
- 기본 테이블 (Basic Table):
.table클래스를 사용하여 기본 스타일의 테이블을 만듭니다. - 줄무늬 테이블 (Striped Rows):
.table-striped클래스를 사용하여 줄무늬 테이블을 만듭니다. - 경계선 있는 테이블 (Bordered Table):
.table-bordered클래스를 사용하여 경계선이 있는 테이블을 만듭니다. - 호버 효과 테이블 (Hoverable Rows):
.table-hover클래스를 사용하여 호버 시 강조되는 테이블을 만듭니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 테이블 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>홍길동</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>김철수</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
코드 (Code)
부트스트랩은 코드 블록을 스타일링하기 위한 여러 클래스를 제공합니다.
- 인라인 코드 (Inline Code):
<code>태그를 사용하여 인라인 코드를 스타일링합니다. - 코드 블록 (Code Block):
<pre>태그와<code>태그를 조합하여 코드 블록을 만듭니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 코드 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<p>인라인 코드 예제: <code>console.log('Hello, world!');</code></p>
<pre><code>
function greet() {
console.log('Hello, world!');
}
greet();
</code></pre>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
피규어 (Figures)
부트스트랩은 이미지와 캡션을 포함하는 피규어 요소를 쉽게 만들 수 있도록 도와줍니다.
- 기본 피규어 (Basic Figure):
<figure>태그를 사용하여 이미지를 포함한 피규어를 만듭니다. - 피규어 캡션 (Figure Caption):
<figcaption>태그를 사용하여 이미지에 캡션을 추가합니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부트스트랩 피규어 예제</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<figure class="figure">
<img src="example.jpg" class="figure-img img-fluid rounded" alt="예제 이미지">
<figcaption class="figure-caption">이미지 설명입니다.</figcaption>
</figure>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
이와 같이 부트스트랩의 다양한 콘텐츠 레이아웃 기능을 사용하면 웹 페이지의 텍스트, 이미지, 테이블, 코드, 피규어 등을 쉽게 스타일링할 수 있습니다.