4. 간편한 웹 텍스트 스타일링, Bootstrap 타이포그래피 활용하기

안녕하세요! 오늘은 Bootstrap을 이용해 웹 텍스트를 깔끔하게 스타일링하는 방법에 대해 알아볼게요. Bootstrap은 다양한 타이포그래피 스타일을 제공하여 HTML 텍스트 요소를 쉽고 일관되게 꾸밀 수 있도록 도와줍니다. 이 글에서는 기본 텍스트 요소, 헤더, 리스트, 인용문 스타일링 방법을 다뤄보겠습니다.

1. 기본 텍스트 요소 스타일링

Bootstrap은 텍스트 스타일링을 위한 기본 클래스를 제공하여 웹 텍스트를 손쉽게 꾸밀 수 있어요. 여기에는 텍스트 색상, 강조 등을 위한 클래스가 포함됩니다.

(1) 텍스트 색상과 강조

Bootstrap의 기본 텍스트 색상 클래스는 text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, text-muted 등이 있어요.

 

<p class="text-primary">이 텍스트는 기본 색상입니다.</p>
<p class="text-success">이 텍스트는 성공을 나타내는 녹색입니다.</p>
<p class="text-danger">이 텍스트는 경고를 나타내는 빨간색입니다.</p>
<p class="text-muted">이 텍스트는 연한 색상입니다.</p>

 

 

(2) 텍스트 정렬

Bootstrap에서는 텍스트를 왼쪽, 가운데, 오른쪽으로 쉽게 정렬할 수 있도록 text-left, text-center, text-right 클래스를 제공해요.

 

<p class="text-left">이 텍스트는 왼쪽 정렬입니다.</p>
<p class="text-center">이 텍스트는 가운데 정렬입니다.</p>
<p class="text-right">이 텍스트는 오른쪽 정렬입니다.</p>

 

2. 헤더 스타일링

Bootstrap은 기본 HTML 헤더 요소(h1~h6)에 적용할 수 있는 스타일을 제공해, 헤더를 좀 더 크고 뚜렷하게 만들 수 있어요.

<h1>헤더 1 - Bootstrap에서 가장 큰 크기</h1>
<h2>헤더 2 - 두 번째로 큰 크기</h2>
<h3>헤더 3</h3>
<h4>헤더 4</h4>
<h5>헤더 5</h5>
<h6>헤더 6 - 가장 작은 크기</h6>

 

Bootstrap의 헤더는 화면 크기에 따라 자동으로 크기가 조절됩니다. 또한, Bootstrap에서는 표제 텍스트 스타일을 위해 .display-1부터 .display-4 클래스도 제공해요. 이는 큰 제목이나 중요 요소를 강조할 때 유용하게 사용할 수 있습니다.

 

<h1 class="display-1">디스플레이 헤더 1</h1>
<h2 class="display-2">디스플레이 헤더 2</h2>

 

 

3. 리스트 스타일링

Bootstrap은 일반 리스트와 번호 리스트뿐만 아니라, 수직으로 나열된 리스트 항목도 간편하게 스타일링할 수 있어요.

(1) 기본 리스트

기본적으로 <ul>과 <ol> 요소는 기본 Bootstrap 스타일이 적용됩니다. 하지만 list-unstyled 클래스를 사용하면 리스트에서 기본 불릿(bullet)을 제거할 수 있어요.

 

<ul class="list-unstyled">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

 

(2) 인라인 리스트

수평으로 배치된 인라인 리스트를 만들고 싶다면 list-inline 클래스를 사용하세요. 각 리스트 항목에는 list-inline-item 클래스를 추가해야 해요.

 

<ul class="list-inline">
  <li class="list-inline-item">인라인 항목 1</li>
  <li class="list-inline-item">인라인 항목 2</li>
  <li class="list-inline-item">인라인 항목 3</li>
</ul>

 

4. 인용문 스타일링

Bootstrap은 인용문을 돋보이게 할 수 있는 blockquote 클래스를 제공합니다. 인용문 안에 blockquote-footer 클래스를 사용하면 인용한 사람이나 출처를 간단하게 표기할 수 있어요.

 

<blockquote class="blockquote">
  <p class="mb-0">"Bootstrap은 웹 디자인을 단순화하는 강력한 도구입니다."</p>
  <footer class="blockquote-footer">John Doe <cite title="Source Title">웹 개발 가이드</cite></footer>
</blockquote>

 

 

이 코드에서는 blockquote-footer를 사용해 인용 출처를 표시했어요. 이렇게 하면 텍스트가 자동으로 기울어지며 인용문임을 더 돋보이게 해줍니다.

요약 및 다음 단계

Bootstrap의 타이포그래피 클래스를 사용하면 텍스트와 관련된 다양한 스타일링 작업을 손쉽게 수행할 수 있습니다. 텍스트 색상, 정렬, 헤더 크기 설정, 리스트 스타일링, 인용문 등 다양한 옵션을 활용해 웹사이트의 텍스트를 깔끔하고 일관되게 디자인할 수 있어요. 다음 단계에서는 Bootstrap의 버튼과 폼 등 다른 UI 컴포넌트를 결합해 웹페이지 전체를 구성해보세요.

 

2024.11.12 - [프로그래밍/Bootstrap] - Bootstrap 목차