포스트 작성시 참고할 html/css reference

이 블로그에서 사용할 각종 스타일을 참고할 레퍼런스입니다.

h1 ~ h5

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

더보기

*** HTML ***
<h3>Example heading <span class="label label-default">New</span></h3>

---

em

test

더보기

*** HTML ***
<p><em>test</em></p>

---

code Blue

아니요

더보기

*** HTML ***
<code class="Blue">아니요</code>

---

code

아니요

더보기

*** HTML ***
<code>아니요</code>

---

dl dt dd

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Description lists

A description list is perfect for defining terms.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

더보기

*** HTML ***
<dl class="dl-horizontal">
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>

*** HTML ***
<dl>
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd>
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>

---

blockquote

트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.

트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.

더보기

*** HTML ***
<blockquote>
<p>내용</p>
<small>내용</small>
</blockquote>

---

blockquote Note

Note

트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.

트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.

더보기

*** HTML ***
<p><i class="icon-bookmark-empty"></i> <strong>Note</strong></p>
<blockquote class="Note">
<p>내용</p>
<small>내용</small>
</blockquote>

---

blockquote Important

Important

트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.

더보기

*** HTML ***
<p><i class="icon-warning-sign"></i> <strong>Important</strong></p>
<blockquote class="Important">
<p>내용</p>
</blockquote>

---

blockquote Box

단양은 소백산맥을 경계로 충북 북동부에 위치하고 있습니다. 산지가 많고 카르스트 지형으로 석회암지대이기 때문에 시멘트산업이 발달했고 이런 지형의 특성 때문에 절경을 보여준답니다.

더보기

*** HTML ***
<blockquote class="Box">
<p>단양은 소백산맥을 경계로 충북 북동부에 위치하고 있습니다. 산지가 많고 카르스트 지형으로 석회암지대이기 때문에 시멘트산업이 발달했고 이런 지형의 특성 때문에 절경을 보여준답니다.</p>
</blockquote>

---

Panel Link

Link

• App Store 바로가기
• Description lists here

더보기

*** HTML ***
<div class="panel panel-info">
  <div class="panel-heading">
    <p  class="panel-title"><i class="icon-external-link"></i> <strong>Link</strong></p>
  </div>
  <div class="panel-body">
    <ul>
     <li>App Store <a class="label label-info" href="https://itunes.apple.com/kr/app/popclip/id445189367?mt=12" target="_blank">바로가기</a></li>
     <li>Description lists <a href="#">here</a></li>
    </ul>
  </div>
</div>

---

Panel Download

Download

• Test
• Description lists here

더보기

*** HTML ***
<div class="panel panel-primary">
  <div class="panel-heading">
    <p  class="panel-title"><i class="icon-cloud-download"></i> <strong>Download</strong></p>
  </div>
  <div class="panel-body">
    <ul>
     <li>Test</li>
     <li>Description lists <a href="#">here</a></li>
    </ul>
  </div>
</div>

---

ul List Note

Note

• 트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.
• 다음뷰를 처음 가입하셨다면 파워 블러거들의 글을 구독하시면 포스트 작성시 도움이 됩니다.

더보기

*** HTML ***
<p><i class="icon-bookmark-empty"></i> <strong>Note</strong></p>
<ul class="List_Note">
<li>내용</li>
<li>내용</li>
</ul>

---

ul List Important

Important

• 트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.
• 다음뷰를 처음 가입하셨다면 파워 블러거들의 글을 구독하시면 포스트 작성시 도움이 됩니다.

더보기

*** HTML ***
<p><i class="icon-warning-sign"></i> <strong>Important</strong></p>
<ul class="List_Important">
<li>내용</li>
<li>내용</li>
</ul>

---

ul Related Articles

관련글

• 다음뷰 구독을 추가하기 위해서는 다음뷰 에 가입을 하셔야 합니다.
• 다음뷰를 처음 가입하셨다면 파워 블러거들의 글을 구독하시면 포스트 작성시 도움이 됩니다.

더보기

*** HTML ***
<p><i class="icon-file-text"></i> <strong>관련글</strong></p>
<ul class="Related_Articles">
<li>내용</li>
<li>내용</li>
</ul>

---

Panel Other Posts

글쓴이의 다른 글 보기

• 내용
• 내용

• 내용
• 내용

더보기

*** HTML ***
<div class="panel panel-primary">
  <div class="panel-heading">
    <h5 id="Post"><i class="icon-archive"></i> <strong>글쓴이의 다른 글 보기</strong></h5>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-sm-6">
    <ul>
      <li><a href="url">내용</a></li>
      <li><a href="url">내용</a></li>
    </ul>
      </div>
      <div class="visible-md visible-lg">
      <div class="col-sm-6">
    <ul>
      <li><a href="url">내용</a></li>
      <li><a href="url">내용</a></li>
     </ul> 
      </div>
      </div>
    </div>        
  </div>
</div>

---

ul Box

• 다음뷰 구독을 추가하기 위해서는 다음뷰 에 가입을 하셔야 합니다.
• 다음뷰를 처음 가입하셨다면 파워 블러거들의 글을 구독하시면 포스트 작성시 도움이 됩니다.
• 좋은 글이 있다면 꼭 추천(손가락)을 한번씩 눌러 주세요~ 자신의 글에도 추천이 늘어 납니다. ^^

더보기

*** HTML ***
<ul class="Box">
<li>내용</li>
<li>내용</li>
</ul>

---

ol List Number

Note

1. 트위터와 페이스북, 다음뷰 등에 자동으로 글을 등록하는 것은 플러그인 설정에서 가능 합니다.
2. 다음뷰를 처음 가입하셨다면 파워 블러거들의 글을 구독하시면 포스트 작성시 도움이 됩니다.
3. 좋은 글이 있다면 꼭 추천(손가락)을 한번씩 눌러 주세요~ 자신의 글에도 추천이 늘어 납니다. ^^

더보기

*** HTML ***
<p><i class="icon-bookmark-empty"></i> <strong>Note</strong></p>
<ol class="List_Number">
<li>내용</li>
<li>내용</li>
</ol>

---

ol Foot Notes

---

1. RSS ( Really Simple Syndication , Rich Site Summary ) 의 약자로, ‘매우 간단한 배급’ 또는 ‘풍부한 사이트 요약’이라 한다. RSS는 그 자체로 풀 텍스트가 아니라, 이메일 목록처럼 헤드라인만 볼 수 있도록 하고, 원할 경우 클릭을 통해 해당 페이지로 들어갈 수 있게 해 주는 서비스다. 온라인상에 콘텐츠를 배열하는 HTML과 이를 전송해주는 이메일의 장점을 하나로 묶은 기술로, 언론사 홈페이지나 블로그 등의 업데이트 정보를 한꺼번에 모아서 보내거나 받아 볼 수 있는 서비스다. RSS를 사용하면 웹사이트 운영자는 별도로 콘텐츠를 구성하거나 이메일 발송 작업을 하지 않고도 사용자들에게 정보를 전달할 수 있다. 사용자 입장에서는 여러 웹사이트를 일일이 방문하지 않아도, 새로운 내용이 업데이트 될 때마다 한 자리에서 쉽고 편리하게 알 수 있다는 장점이 있다. 네이버 지식백과  ↩




2. 다음뷰는 메타블로그(metablog)의 한 종류 이다. 간단히는 블로그의 집합체라고 설명할 수 있다. 특징이나 방향성에 따라 블로그 포털 또는 블로그 허브라고 칭하기도 한다. 그리스어에서 유래한 “함께”라는 의미의 meta 에 blog(블로그)가 결합하여 만들어진 합성어이다. 각 블로그의 운영자가 자신의 블로그에서 제공하는 RSS 또는 다음뷰 같은 경우는 손가락 등을 등록하면 이로부터 각 블로그의 글과 관련 정보를 수집하여 하나의 사이트로 보여주는 서비스 혹은 그 형식을 가진 사이트를 의미한다. 우리나라 같은 경우는 네이버 오픈캐스트, 다음뷰, 믹시가 대표적인 메타블로그 이다. 위키백과  ↩

더보기

*** HTML ***
<div class="footnotes">
<hr />
<ol class="Foot_Notes">

<li id="fn:1">
<p>RSS ( Really Simple Syndication , Rich Site Summary ) 의 약자로, ‘매우 간단한 배급’ 또는 ‘풍부한 사이트 요약’이라 한다. RSS는 그 자체로 풀 텍스트가 아니라, 이메일 목록처럼 헤드라인만 볼 수 있도록 하고, 원할 경우 클릭을 통해 해당 페이지로 들어갈 수 있게 해 주는 서비스다. 온라인상에 콘텐츠를 배열하는 HTML과 이를 전송해주는 이메일의 장점을 하나로 묶은 기술로, 언론사 홈페이지나 블로그 등의 업데이트 정보를 한꺼번에 모아서 보내거나 받아 볼 수 있는 서비스다. RSS를 사용하면 웹사이트 운영자는 별도로 콘텐츠를 구성하거나 이메일 발송 작업을 하지 않고도 사용자들에게 정보를 전달할 수 있다. 사용자 입장에서는 여러 웹사이트를 일일이 방문하지 않아도, 새로운 내용이 업데이트 될 때마다 한 자리에서 쉽고 편리하게 알 수 있다는 장점이 있다. <a href="http://terms.naver.com/entry.nhn?docId=300465&cid=390&categoryId=390">네이버 지식백과</a>  <a href="#fnref:1" title="return to article" class="reversefootnote"> ?</a></p>
</li><br />

<li id="fn:2">
<p>다음뷰는 메타블로그(metablog)의 한 종류 이다. 간단히는 블로그의 집합체라고 설명할 수 있다. 특징이나 방향성에 따라 블로그 포털 또는 블로그 허브라고 칭하기도 한다. 그리스어에서 유래한 “함께”라는 의미의 meta 에 blog(블로그)가 결합하여 만들어진 합성어이다. 각 블로그의 운영자가 자신의 블로그에서 제공하는 RSS 또는 다음뷰 같은 경우는 <code>손가락</code> 등을 등록하면 이로부터 각 블로그의 글과 관련 정보를 수집하여 하나의 사이트로 보여주는 서비스 혹은 그 형식을 가진 사이트를 의미한다. 우리나라 같은 경우는 네이버 오픈캐스트, 다음뷰, 믹시가 대표적인 메타블로그 이다. <a href="http://ko.wikipedia.org/wiki/메타블로그">위키백과</a> <a href="#fnref:2" title="return to article" class="reversefootnote"> ?</a></p>
</li><br />
</ol>
</div>

---

hr

---

더보기

*** HTML ***
<hr class="one">

---

---

더보기

*** HTML ***
<hr class="two">

---

Box Header

박스가 있는 제목은 이렇게

더보기

*** HTML ***
<div class="box-header">
<p style="FONT-SIZE: 9pt; COLOR: rgb(255,255,255); BACKGROUND-COLOR: transparent">박스가 있는 제목은 이렇게</p>
</div>

---