티스토리 뷰

SW 개발/웹

Bootstrap 4, 글자 스타일 지정하기

지단로보트 2018. 8. 28. 10:42

개요

  • Bootstrap 4를 이용하면 단순 클래스 지정 만으로 문자열에 대한 다양한 스타일링이 가능하다. 이번 글에서는 문자열 스타일링을 간단히 정리한다.

사용 기술

  • Bootstrap: 함께 제공되는 Card 컴포넌트를 사용하여 HTML 코드 만으로 위젯, 대시보드를 제작할 수 있다.
  • jQuery: Bootstrap을 구동하기 위해 선행 사용이 필수이다.

소스 코드

<!DOCTYPE html>
<html lang="ko">
   <head>
      <meta charset="utf-8">
   </head>
   <body>
      <style type="text/css">@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css");</style>
      <style type="text/css">@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");</style>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <div class="container">
         <h6>h6</h6>
         <h5>h5</h5>
         <h4>h4</h4>
         <h3>h3</h3>
         <h2>h2</h2>
         <h1>h1</h1>
         <h1 class="display-4">display-4</h1>
         <h1 class="display-3">display-3</h1>
         <h1 class="display-2">display-2</h1>
         <h1 class="display-1">display-1</h1>
         <h1 class="display-4 font-weight-bold">display-4 font-weifht-bold</h1>
         <h1 class="display-4 font-italic">display-4 font-italic</h1>
         <h1 class="display-4 font-left">display-4 font-left</h1>
         <h1 class="display-4 font-center">display-4 font-center</h1>
         <h1 class="display-4 font-right">display-4 font-right</h1>
         <h1 class="display-4 text-primary">display-4 text-primary</h1>
         <h1 class="display-4 text-seconday">display-4 text-secondary</h1>
         <h1 class="display-4 text-success">display-4 text-success</h1>
         <h1 class="display-4 text-danger">display-4 text-danger</h1>
         <h1 class="display-4 text-warning">display-4 text-warning</h1>
         <h1 class="display-4 text-info">display-4 text-info</h1>
         <h1 class="display-4 text-light">display-4 text-light</h1>
         <h1 class="display-4 text-dark">display-4 text-dark</h1>
         <h1 class="display-4 text-muted">display-4 text-muted</h1>
         <h1 class="display-4 text-white">display-4 text-white</h1>
         <h1 class="display-4 text-white bg-primary">display-4 text-white bg-primary</h1>
         <h1 class="display-4 text-white bg-secondary">display-4 text-white bg-secondary</h1>
         <h1 class="display-4 text-white bg-danger">display-4 text-white bg-danger</h1>
         <h1 class="display-4 bg-warning">display-4 bg-warning</h1>
         <h1 class="display-4 text-white bg-info">display-4 text-white bg-info</h1>
         <h1 class="display-4 bg-light">display-4 bg-light</h1>
         <h1 class="display-4 text-white bg-darky">display-4 text-white bg-dark</h1>
      </div>

   </body>
</html>

글자 크기

  • 클래스가 아닌 독립적인 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 엘러먼트를 이용하여 헤더 문자열의 크기를 조절할 수 있다. 숫자가 높을수록 글자 크기가 작아진다. <h6>의 경우 <p>와 글자 크기가 동일하다.
  • 나머지 대부분의 클래스는

    엘러먼트에 적용하여 스타일을 나타낼 수 있다. display-1, display-2, display-3, display-4는 <h1>보다 크기가 큰 문자열을 표현하고자 할 때 사용한다. 숫자가 높을수록 글자 크기가 작아진다.

글자 모양

  • font-weight-bold를 적용하면 문자열이 굵어진다.
  • font-italic을 적용하면 문자열이 기울어진다.

글자 정렬

  • text-left를 적용하면 문자열이 왼쪽으로 정렬된다.
  • text-right를 적용하면 문자열이 오른쪽으로 정렬된다.
  • text-center를 적용하면 문자열이 가운데로 정렬된다.

글자 색상

  • text-primary, text-secondary, text-success, text-danger, text-warning, text-info, text-light, text-dark, text-muted, text-white를 적용하여 문자열에 색상을 지정할 수 있다.
  • bg-primay, bg-secondary, bg-success, bg-danger, bg-warning, bg-info, bg-light, bg-dark, bg-white를 적용하여 문자열의 배경 색상을 지정할 수 있다.

참고 글

저작자표시 비영리 동일조건
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/04   »
일 월 화 수 목 금 토
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
글 보관함