글자(TEXT)관련 레퍼런스

글자(TEXT)관련 레퍼런스

hx로 제목활용

1.제목등으로 사용.h1 에서 h6 까지 사용할수 있다

2.내부에 small 을 사용 응용가능함

3.label을 사용하여 응용 가능함

4.아래에서 label종류 포스팅

h1.Heading new small text

h2.Heading new small text

h3.Heading new small text

h4.Heading new small text

h5.Heading new small text
h6.Heading new small text
<H1>h1.Heading <span class="label label-default">new</span> <small>small text</small></H1>
<H2>h2.Heading <span class="label label-default">new</span> <small>small text</small></H2>
<H3>h3.Heading <span class="label label-default">new</span> <small>small text</small></H3>
<H4>h4.Heading <span class="label label-default">new</span> <small>small text</small></H4>
<H5>h5.Heading <span class="label label-default">new</span> <small>small text</small></H5>
<H6>h6.Heading <span class="label label-default">new</span> <small>small text</small></H6>

label의 종류

1.label 별 색상

2.default,primary등 6가지는 색상으로 많이 사용함

Default Primary Success Info Warning Danger
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

small text

85%정도로 작아진다.bootstrap.css에서 수정가능함

일반크기 테스트 합니다.

small 테스트 합니다.

<p>일반크기 테스트 합니다.</p>
<p><small>small 테스트 합니다.</small></p>

bold

strong사용한다

일반체 테스트 합니다.

bold체 테스트 합니다.

<P>일반체 테스트 합니다.</P>
<P><STRONG>bold체 테스트 합니다.</STRONG></P>

Italics

em사용한다

일반체 테스트 합니다.

이탤릭체 테스트 합니다.

일반체 테스트 합니다.
<p><em>이탤릭체 테스트 합니다.</em></p>

색상강조

강조용도별 색상으로 지정한다

muted 테스트 합니다.

warning 테스트 합니다.

error 테스트 합니다.

info 테스트 합니다.

success 테스트 합니다.

<p class="muted">muted 테스트 합니다.</p>
<p class="text-warning">warning 테스트 합니다.</p>
<p class="text-error">error 테스트 합니다.</p>
<p class="text-info">info 테스트 합니다.</p>
<p class="text-success">success 테스트 합니다.</p>

텍스트 좌우정렬

좌.중앙.우 정렬한다

Left aligned text.

Center aligned text.

Right aligned 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>

ol

순서있는 목록

  1. ol목록 테스트 합니다
  2. ol목록 테스트 합니다
  3. ol목록 테스트 합니다
    <ol>
    <li>ol목록 테스트 합니다</li>
    <li>ol목록 테스트 합니다</li>
    <li>ol목록 테스트 합니다</li>
    <ol>
    

    ul

    순서없는 목록

    • ul목록 테스트 합니다
    • ul목록 테스트 합니다
    • ul목록 테스트 합니다
      <ul>
      <li>ul목록 테스트 합니다</li>
      <li>ul목록 테스트 합니다</li>
      <li>ul목록 테스트 합니다</li>
      <ul>
      

      legend

      소제목으로 사용하면 좋음

      소제목으로써보자
      <legend>소제목으로써보자</legend>
      

      page-header 이용 소제목

      소제목으로 사용하면 좋음

      <div class="page-header">
      <h3>소제목으로 사용</h3>
      

      '블로그 > Reference' 카테고리의 다른 글

      blockquote  (0) 2014.05.05
      CSS 적용방법 알아보기  (0) 2013.11.25
      포스팅시 사용할만한 tag정리  (0) 2013.11.21
      block 모양 정리  (0) 2013.11.10
      code.hr  (0) 2013.11.09
      사이드바 ▼