본문 바로가기

CSS

06. CSS_bootstrap_textstyle

<!DOCTYPE html>
<html>
<head>
    <!-- 반응형웹 적용을 위한 meta 정의 -->
    <!-- 스마트폰, 태블릿, pc 등 화면 사이즈에 대응 -->
    <meta name="viewport"
            content="width=device-width, initial-scale=1">
    <title>::: 06_bootstrap_textstyle :::</title>

    <!-- css 외부파일 또는 CDN 불러들이기 -->
            rel="stylesheet"
            integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
            crossorigin="anonymous">
   

    <!-- jQuery 외부파일 또는 CDN 불러들이기 -->
    <script type="text/javascript"
</head>
<body>
    <h3>부트스트랩(BootStrap) 텍스트 스타일 적용하기</h3>

    <!-- 순수 html의 텍스트 사이트 태그 사용 -->
    <h1>h1. 텍스트 사이즈 적용</h1>
    <h2>h2. 텍스트 사이즈 적용</h2>
    <h3>h3. 텍스트 사이즈 적용</h3>
    <h4>h4. 텍스트 사이즈 적용</h4>
    <h5>h5. 텍스트 사이즈 적용</h5>
    <h6>h6. 텍스트 사이즈 적용</h6>

    <!-- 부트스트랩의 텍스트 사이즈 속성 사용하기 -->
    <p class="h1">h1. 텍스트 사이즈</p>
    <p class="h2">h2. 텍스트 사이즈</p>
    <p class="h3">h3. 텍스트 사이즈</p>
    <p class="h4">h4. 텍스트 사이즈</p>
    <p class="h5">h5. 텍스트 사이즈</p>
    <p class="h6">h6. 텍스트 사이즈</p>

    <hr/>
    <h3>
        small 사이즈 적용하기 <br/>
        <small class="text-muted">
            부트스트랩의 muted 속성 사용하기(보조 제목으로 사용됨)
        </small>
    </h3>

    <!-- 부트스트랩 js 적용 -->
            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
            crossorigin="anonymous"></script>
</body>
</html>

'CSS' 카테고리의 다른 글

08. CSS_bootstrap_table  (0) 2023.03.08
07. CSS_bootstrap_textstyle(2)  (0) 2023.03.08
05. CSS_bootstrap  (0) 2023.03.08
04. CSS_수직 네비게이션(2)  (0) 2023.03.03
03. CSS_수직 네비게이션(1)  (0) 2023.03.03