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
블로그 이미지

coding-restaurant

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

,

v