Link Search Menu Expand Document
Gekdev

Basic BT Typography

Table of contents

  1. Text/Typography Basic
    1. Bootstrap’s Default Settings
    2. Bootstrap’s Default font
    3. Default fonts By Browsers
    4. Using Google Font
      1. @font-face{}
      2. @import url()
  2. Text/Typography Elements
    1. <h1>-<h6>
      1. <small>
    2. <mark>
    3. <abbr>
      1. initialism class
    4. <blockquote>
      1. blockquote-reverse class
  3. Code Elements
    1. <var>
    2. <code>
    3. <kbd>
    4. <pre>
      1. pre-scrollable class
    5. <samp>
  4. Text/Typography Class
    1. Text Align
    2. Text Transform
    3. Contextual Text Colors
    4. Contextual background colors
    5. More Typography Classes
      1. lead class
      2. small class
  5. Complete Bootstrap Typography Reference

Text/Typography Basic

Bootstrap’s Default Settings

부트스트랩 기본 CSS는 브라우저 기본값과 약간 다름

  • <p>요소에는 계산 된 선 높이의 절반(기본적으로 10px)에 해당하는 아래쪽 여백이 있음

Bootstrap’s Default font

부트스트랩 기본 글꼴

▸ helvetica neue , helvetica , arial , sans-serif 계열 글꼴 설정

▸ 글꼴의 크기 14px

▸ 행간 1.42857443

▸ 글자색상 #333

body{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

Default fonts By Browsers

브라우저에 따른 기본 글꼴

구글(크롬)파이어폭스/IE11맥(사파리)맥(크롬)
한글 글꼴(굴림체)한글 글꼴(맑은 고딕)한글 글꼴(산돌 고딕 Neo)한글 글꼴(애플 고딕)

Using Google Font

@font-face{}나 @import url()로 구글폰트를 사용할 수 있음

@font-face{}

@font-face{
  font-family:'NanumBarunGothic';
  src:url("../fonts/NanumBarunGothic.eot");
  src:local("☺"),url("../fonts/NanumBarunGothic.woff") format("woff");
}

body { font-family: "Helvetica Neue", Helvetica, Arial,"NanumBarunGothic",  sans-serif; }

@import url()

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

body { font-family: "Helvetica Neue", Helvetica, Arial,'Nanum Gothic', sans-serif; }

Text/Typography Elements

<h1>-<h6>

<div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>

<small>

모든 제목에 더 가벼운 보조 텍스트를 만드는 데 사용

<div class="container">
  <h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>

<mark>

형광펜

<div class="container">
  <h1>Highlight Text</h1>    
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

<abbr>

점선 밑줄

<div class="container">
  <h1>Abbreviations</h1>
  <p>The abbr element is used to mark up an abbreviation or acronym:</p>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

initialism class

더 세밀한 점선

syntax

abbr class=”initialism”

<div class="container">
  <h2>Typography</h2>
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. (normal abbr)</p>      
  <p>The <abbr title="World Health Organization" class="initialism">WHO</abbr> was founded in 1948. (slightly smaller abbr)</p>
</div>

<blockquote>

인용 문구

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote>
    <p>For 50 years, WWF has been protecting the future of nature. 
    The world's leading conservation organization, WWF works in 100 countries and is supported by 
    1.2 million members in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

blockquote-reverse class

오른쪽 정렬

syntax

blockquote class=”blockquote-reverse”

<div class="container">
  <h1>Blockquotes</h1>
  <p>To show the quote on the right use the class .blockquote-reverse:</p>
  <blockquote class="blockquote-reverse">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

Code Elements

<var>

변수를 나타냄

<div class="container">
  <h2>Code</h2>    
      
  <p>To indicate variables, use the var element:</p>
  <p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>

</div>

<code>

짧은 코드

<div class="container">
  <h1>Code Snippets</h1>
  <p>Inline snippets of code should be embedded in the code element:</p>
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> defines a section in a document.</p>
</div>

<kbd>

<div class="container">
  <h1>Keyboard Inputs</h1>
  <p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

<pre>

<div class="container">
    <h1>Multiple Code Lines</h1>
    <p>For multiple lines of code, use the pre element:</p>
    <pre>
    Text in a pre element
    is displayed in a fixed-width
    font, and it preserves
    both      spaces and
    line breaks.
    </pre>
</div>

pre-scrollable class

스크롤 바 생성

높이가 350px이 넘어가는 경우 자동으로 스크롤 생성

syntax

pre class=”pre-scrollable”

<div class="container">
  <p>If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:</p>
  <pre class="pre-scrollable">Text in a pre element
  is displayed in a fixed-width
  font, and it preserves
  both      spaces and
  line breaks.</pre>
</div>

<samp>

컴퓨터 프로그램에서 샘플 출력

<div class="container">
  <h2>Code</h2>    
      
  <p>To indicate sample output from a computer program, use the samp element:</p>
  <p><samp>This text is output from a computer program....</samp></p>

</div>

Text/Typography Class

Text Align

syntax

class=”text-left” : 왼쪽 정렬

class=”text-right” : 오른쪽 정렬

class=”text-center” : 가운데 정렬

class=”text-justify” : 양쪽 정렬

class=”text-nowrap” : no wrap text

<div class="container">
  <h2>Typography</h2>
  <p class="text-left">Left-aligned text.</p>
  <p class="text-right">Right-aligned text.</p>      
  <p class="text-center">Center-aligned text.</p>
  <p class="text-justify">Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.</p>      
  <p class="text-nowrap">No wrap text. No wrap text. No wrap text. No wrap text.</p>
  <p><strong>Tip:</strong> Try to resize the browser window to see the behaviour of justify and nowrap.</p>      
</div>

Text Transform

syntax

class=”text-lowercase”

class=”text-uppercase”

class=”text-capitalize”

<div class="container">
  <h2>Typography</h2>
  <p class="text-lowercase">Lowercased text.</p>
  <p class="text-uppercase">Uppercased text.</p>      
  <p class="text-capitalize">Capitalized text.</p>
</div>

Contextual Text Colors

색상을 통한 의미를 제공하는 데 사용할 수 있는 클래스

syntax

  • class=”text-primary”

  • class=”text-success”

  • class=”text-info”

  • class=”text-warning”

  • class=”text-danger”

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

Contextual background colors

색상을 통한 의미를 제공하는 데 사용할 수 있는 클래스

syntax

  • class=”bg-primary”

  • class=”bg-success”

  • class=”bg-info”

  • class=”bg-warning”

  • class=”bg-danger”

<div class="container">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors":</p>
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

More Typography Classes

lead class

단락의 첫 문장을 강조

▸ 16px, 살짝 두꺼운 글꼴

syntax

class =”lead”

<div class="container">
  <h2>Typography</h2>
  <p>Use the .lead class to make a paragraph "stand out":</p>
  <p class="lead">This paragraph stands out.</p>
  <p>This is a regular paragraph.</p>
</div>

small class

더 작은 텍스트 (상위 텍스트 크기의 85%로 설정됨)

syntax

class=”small”

<div class="container">
  <h2>Typography</h2>
  <p>Use the .small class to make the text smaller:</p>
  <p class="small">This paragraph is smaller.</p>
  <p>This is a regular paragraph.</p>
</div>

Complete Bootstrap Typography Reference

For a complete reference of all typography elements/classes, go to our complete Bootstrap Typography Reference

이 웹사이트는 jekyll로 제작되었습니다. Patrick Marsceill, Distributed by an MIT license.