라이브러리/Bootstrap

부트스트랩 : 타이포그래피

THREE™ 2014. 3. 26. 21:23
반응형
bootstrap : Page 1-3 Typography 부트스트랩 1-3번째 타이포그래피

부트스트랩은 웹디자인을 쉽게하기 위해 미리 몇가지의 CSS의 클래스 선택자와 정의된 스타일시트, 자바스크립트 플러그인을 모은 강력한 프론트엔드 프레임워크입니다. <부트스트랩 소개와 다운로드 중 참조...>

참고로 이블로그 게시물은 한글부트스트랩3을 참고로 만들어 졌으며 제 블로그 공부용으로 작성한 것입니다.

 

타이포그래피 Typography

 

제목 Headings

<H1>부터 <H6>까지 모든 제목 마크업이 가능합니다, 또한 .h1부터 .h6까지의 클레스를 사용하여 텍스트 인라인 시킬수 있습니다.

h1. Bootstrap heading

 Semibold 36px

h2. Bootstrap heading

 Semibold 30px

h3. Bootstrap heading

 Semibold 24px

h4. Bootstrap heading

 Semibold 18px
h5. Bootstrap heading
 Semibold 14px
h6. Bootstrap heading
 Semibold 12px
<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>

h1. Bootstrap heading

 Semibold 36px

h2. Bootstrap heading

 Semibold 30px

h3. Bootstrap heading

 Semibold 24px

h4. Bootstrap heading

 Semibold 18px

h5. Bootstrap heading

 Semibold 14px

h6. Bootstrap heading

 Semibold 12px
<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>

제목에는 <small> 요소를 넣을 수 있습니다. 제목에 작고, 연한색의 부가문구를 넣기 위해 사용하세요.

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

h3. Bootstrap heading Secondary text

h4. Bootstrap heading Secondary text

h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

 

본문 Body copy

부트스트랩의 font-size 기본값은 14px 이고, line-height 는 1.428 입니다. 이것은 <body> 와 모든 단락에 적용됩니다. 추가로, <p> (단락) 은 행높이의 절반의 하단 마진을 가집니다.(기본값에 의하면 10px 로 계산됩니다).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p> ... </p>

이 블로그는 <p> 값을 16px 입니다.

 

리드 문단 Lead body copy

.lead 을 추가하여 문장을 눈에 띄도록 만드세요.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead"> ... </p>

 

Less 변수 Built with Less

문자크기는 variables.less 에서의 두 LESS 변수(@font-size-base 와 @line-height-base) 에 기반됩니다. 첫번째 변수는 기본 폰트 크기이고 두번째 변수는 기본 행 높이입니다. 타이포그래피에서 마진, 패딩, 행 높이를 구하기 위해 두 변수와 몇 개의 간단한 수학을 사용합니다.

@font-size-base:          14px;
//** Unit-less `line-height` for use in components like buttons.
@line-height-base:        1.428571429; // 20/14

 

강조 Emphasis

가벼운 스타일과 함께 HTML 의 기본 강조 태그들을 사용하세요.

 

작은 텍스트 Small text

인라인이나 블록에서 텍스트를 덜 강조하기 위해, <small> 태그를 사용하면 85% 크기로 보여집니다. 제목 요소는 내포된 <small> 요소를 위한 그들만의 font-size 를 가지고 있습니다.

This line of text is meant to be treated as fine print. 
<small>This line of text is meant to be treated as fine print.</small>

 

굵게 Bold

폰트를 굵게 하여 텍스트를 강조합니다.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

 

이탤릭체 Italics

이탤릭체로 텍스트를 강조합니다.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

선택가능한 요소들

HTML5 에서 <b> 와 <i> 는 마음대로 사용해도 됩니다. <b> 는 단어나 구를 강조하기 위해 쓰이나, <i> 는 거의 음성이나 기술적인 부분 등에 쓰입니다.

이 블로그는 <i>를 Font Awesome의 아이콘으로 사용하고 있습니다.

 

정렬 클래스 Alignment classes

정렬 클래스로 쉽게 정렬하세요.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

 

약어 Abbreviations

<abbr> 는 약어나 두문자어를 마우스를 올렸을 때 원래 텍스트를 보여주기 위한 요소입니다. title 속성이 있는 약어는 점으로된 밑줄을 가지고 있고 마우스를 올렸을때 물음표 커서가 보여지며, 원래 텍스트를 보여줍니다.

 

기본 약어 Basic abbreviation

<abbr> 요소로 감싸고 title 속성을 추가하세요.

An abbreviation of the word attribute is attr.

<p> An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>

 

두문자어 Initialism

HTML is the best thing since sliced bread.

<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>

 

주소 Addresses

주소나 이메일 등의 연락처를 보여줍니다. <br> 로 개행합니다.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com 
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

 

인용구 Blockquotes

당신의 문서내 다른 출처로부터 인용한 콘텐츠 블록을 위해 사용합니다.

 

기본 인용구 Default blockquote

인용한 HTML 을 <blockquote> 으로 감싸세요. 직접 인용구를 위해, 우리는 <p> 를 추천합니다.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

인용구 옵션 Blockquote options

간단한 변형을 위해 기본 <blockquote> 를 기반으로 모양과 내용을 바꿉니다.

출처 표기 Naming a source

출처를 알수 있게 <small> 태그를 추가하세요. 출처 원천의 이름은 <cite> 로 감싸주세요.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

 

대체 표시 Alternate displays

인용구를 반전을 하려면 .blockquote-reverse 를 추가하세요.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote-reverse">
  ...
</blockquote>

 

목록 Lists

가장 일반적인 목록으로 정연하지 않는 목록, 정연 된 목록, 스타일 없는 목록이 있습니다. 또한, 인라인으로 된 목록, 설명 목록도 있습니다.

 

정연하지 않는 Unordered

순서가 명확치 않은 항목들의 목록입니다.

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

 

정연된 Ordered

순서가 명확한 항목들의 목록입니다.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

이 블로그는 <ol>문을 사용하지 않습니다.

 

스타일 없는 Unstyled

항목에서 list-style 과 좌측 마진을 제거하세요. 이것은 오직 바로 아래 항목들에게만 적용됩니다. 그래서 당신은 중첩된 목록에도 따로 클래스를 추가하여야 합니다.

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

 

인라인 Inline

display: inline-block; 로 항목들을 한줄에 보여주고 약간의 패딩을 줍니다.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline">
  <li>...</li>
</ul>

 

설명 Description

연관된 설명들의 목록입니다.

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

 

수평 설명 Horizontal description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

자동 줄임

수평 설명 목록은 열 길이보다 너무 긴 용어를 text-overflow 로 줄일 것입니다. 좁은 너비에서는 개행되는 모양으로 바뀔 것입니다.

 

Thanks to

'라이브러리 > Bootstrap' 카테고리의 다른 글

부트스트랩 : 폼  (0) 2014.04.13
부트스트랩 : 코드, 테이블  (2) 2014.03.29
부트스트랩 : 그리드 시스템  (0) 2014.03.23
부트스트랩 : CSS 개요  (0) 2014.03.23
부트스트랩 : 참고사항  (0) 2014.03.21

'라이브러리/Bootstrap'의 다른글

  • 현재글부트스트랩 : 타이포그래피

관련글

티스토리툴바