부트스트랩 (2) 텍스트 서식(Typography)과 색(Colors)

Frameworks/Bootstrap 2019. 7. 3. 13:48
728x90
728x90

 

html태그와 조금 형식과 디자인이 다르다. 글자 서식 (Typohography)의 기본세팅은 폰트 사이즈 (16px), line-height 1.5em, font-weight 400이다. ? em : 현재 폰트의 배수 ? rem: 기본폰트(16px) 의 배수이다. display는 애플 시스템 폰트가 기본이다. 각 상세한 부트스트랩의 폰트 사이즈는 아래 표를 참고.

 

 

 

텍스트 색상(Colors)

 


​
글자정렬 ( Alignment ) : .text-center/right/left
글자색 클래스 : <h1 class="text-center">텍스트 Colors</h1>

 

 

 

영문철자 : .text-lowercase/uppercase/capitalize
문단정렬 : .text-left/center/right/justify/nowrap

 

 

 

실습하기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 시작</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">      
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <h1>Bootstrap</h1>
    <h2>Bootstrap</h2>
    <h3>Bootstrap</h3>
    <h4>Bootstrap</h4>
    <h5>Bootstrap</h5>
    <h6>Bootstrap</h6>
    <hr>
    <h1>태그&lt;small&gt;은 작은 문장</h1>
    <p><small>태그&lt;small&gt;은 작은 문장을 만들때 사용</small></p>
    <hr>
    <p>하나의 문장을 만들때 p 태그</p>
    <p>마크(mark)는 <mark>강조하는</mark>단어에</p>
    <hr>
    <blockquote cite="http://naver.com">
        <p>해리포터와 불의 잔에서 Harry Potter And The Goblet Of Fire
            <cite>조앤 K. 롤링</cite></p>
    </blockquote>
    <hr>
    <pre>
          pre 태그를 사용하면
          고정폭 폰트로 바뀌고,    스페이스
          와        줄바뀜이 그대로 나
          타 납 니 다   .
    </pre>

    <!-- 똑같은 결과.h1은 클래스로 정의가 되어있기 때문.클래스가 우선순위 -->
    <div>
        <h1>h1. Bootstrap heading</h1>
        <h2>h2. Bootstrap heading</h2>
        <h3>h3. Bootstrap heading</h3>
        <h4>h4. Bootstrap heading</h4>
        <h5>h5. Bootstrap heading</h5>
        <h6>h6. Bootstrap heading</h6>
    </div>
    <div>
        <p class="h1">h1. Bootstrap heading</p>
        <p class="h2">h2. Bootstrap heading</p>
        <p class="h3">h3. Bootstrap heading</p>
        <p class="h4">h4. Bootstrap heading</p>
        <p class="h5">h5. Bootstrap heading</p>
        <p class="h6">h6. Bootstrap heading</p>
    </div>
    <h1 class="display-1">Display 1</h1>
    <h1 class="display-2">Display 2</h1>
    <h1 class="display-3">Display 3</h1>
    <h1 class="display-4">Display 4</h1>

    <!-- <li></li>  //리스트 -->
    <ul class="list-unstyled">
        <li>Lorem ipsum dolor sit amet</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
        <li>Facilisis in pretium nisl aliquet</li>
        <li>Nulla volutpat aliquam velit
          <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
          </ul>
        </li>
        <li>Faucibus porta lacus fringilla vel</li>
        <li>Aenean sit amet erat nunc</li>
        <li>Eget porttitor lorem</li>
      </ul>

    <!-- 가운데정렬 -->
    <!-- <h1 class="text-center">텍스트 중앙정렬</h1> -->

    <!-- 텍스트색 -->
    <h1 class="text-center">텍스트 Colors, 텍스트 배경</h1>
    <p class="text-primary text-center">text-primary</p>
    <p class="text-secondary text-center">text-secondary</p>
    <p class="text-success text-center">text-success</p>
    <p class="bg-primary text-center">bg-primary</p>
    <p class="bg-secondary text-center">bg-secondary</p>
    <p class="bg-success text-center">bg-success</p>
    <p class="bg-danger text-center">bg-danger</p>
    <p class="bg-warning text-center">bg-warning</p>
    <p class="text-muted text-center">text-muted</p>
    <p class="text-white bg-dark text-center">text-white</p>

    <pre>(dd<code>ddd</code>)</pre>
    <code><xmp><h1>코드표현</h1></xmp></code>
    <blockquote>ss<code>ddd</code></blockquote>
    <kbd>ctrl+f</kbd>
	<br>
   <div class="container">
    <h2>부트스트랩 영문철자</h2>
        <code>.text-lowercase</code>
        <p class="text-lowercase">HTML</p>
        <p class="text-uppercase">HTML</p>
        <p class="text-right">HTML</p>
        <p class="text-nowrap">HTML</p>
	</div>
</body>
</html>
728x90
728x90
저작자표시 비영리 변경금지

'Frameworks > Bootstrap' 카테고리의 다른 글

부트스트랩 (6) 점보트론과 버튼 스타일  (0) 2019.07.05
부트스트랩 (5) 테이블  (0) 2019.07.05
부트스트랩 (4) margin, padding, flex  (1) 2019.07.03
부트스트랩 (3) 반응형 그리드  (0) 2019.07.03
부트스트랩 (1) 유래와 정의, 설치하기  (0) 2019.07.03
블로그 이미지

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.

,
250x250
250x250
English Korean
04-30 00:48

티스토리툴바

v