1976s

1976s로 블로그 명을 만들면서 '이번에는 class를 많이 만들지 말자'라고 다짐했습니다. 하지만 기존의 티스토리에 있는 부분보다 더 많이 필요한 관계로 어쩔 수 없이 (이렇게 다짐하고는 몇 가지는 추가하였습니다.

 

1. hr

간단한 소스로 <hr>를 사용하며 1976s 이미지가 출력됩니다.

티스토리의 <hr data-ke-style="style1" />도 같은 모습입니다.

---

<hr>
or
<hr data-ke-style="style1" />

 

2. 기본 텍스트 태그

기본적으로 사용하는 html 태그를 이 블로그에 맞게 스타일을 변경했습니다. 자주는 아니지만 같이 사용하면 좀 더 가시성 있게 보일 것입니다.

전에 스크린샷은 Ctrl + PriSc 를 사용합니다.
코드를 사용할때에는 <code> 를 사용합니다.
<maek> 마크 태그를 사용하여 텍스트 를 강조 표시할 수 있습니다.
작은 글씨를 표현 할때에는 '<small>' 를 사용해서 표현합니다.
'<samp>' 문서에서 컴퓨터 프로그램의 샘플 출력으로 일부 텍스트를 정의합니다.
attr
HTML
링크 색으로 표시는 Class명으로 .link 입니다.
색상만을 원한다면 red색의 .red 이고,
blue색의 .blue입니다.

전에 스크린샷은 <kbd>Ctrl + PriSc</kbd> 를 사용합니다.
코드를 사용할때에는 <code>&lt;code&gt;</code>를 사용합니다.
&lt;maek&gt; 마크 태그를 사용하여 <mark>텍스트</mark>를 강조 표시할 수 있습니다.
작은 글씨를 표현 할때에는 <small>&lt;small&gt;</small>를 사용해서 표현합니다.
<samp>&lt;samp&gt;</samp>문서에서 컴퓨터 프로그램의 샘플 출력으로 일부 텍스트를 정의합니다.
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
링크 색으로 표시는 Class명으로 <span class="link">.link</span> 입니다.
색상만을 원한다면 red색의 <span class="red">.red</span> 이고, 
blue색의 <span class="blue">.blue</span>입니다.

 

3. Table

기본적인 테이블 태그에서 .table를 붙이면 됩니다. 테이블 배경색으로는 .table-primary, .table-secondary, .table-success, .table-info, .table-warning, .table-danger, .table-light, .table-dark 가 있습니다.

테이블 스트라이프(.table-striped) 기능도 넣을 수 있고,
호버(.table-hover) 기능 또한 넣을 수 있습니다.(<tbody> 안 한정)

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

<table class="table table-striped">
  <thead>
    <tr class="table-dark">
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<table class="table table-hover">
  <thead>
    <tr class="table-dark">
      <th scope="col">#</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      ...
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

 

4. 바른해피체

손글씨 폰트로 포스트 중간에 포인트로 쓸 수 있는 손글씨입니다. 이 폰트를 사용하려면 클래스명인 .sfont를 사용하면 됩니다.

바른히피체

<p><span class="sfont">바른히피체</span></p>

 

5. box, note

글자 그대로 본문에 사용할 수 있는 박스형 클래스입니다. .box는 그냥 사각에 배경을 넣은 클래스입니다. .note는 클래스명 그대로 노트처럼 사용이 가능한 클래스입니다.

 

.box

"박스(box)"는 일반적으로 네모나 정사각형 형태의 직육면체 모양을 가진 컨테이너를 말합니다. 이 컨테이너는 종종 운반, 보관 또는 포장용으로 사용됩니다.

<div class="box">
"박스(box)"는 일반적으로 네모나 정사각형 형태의 직육면체 모양을 가진 컨테이너를 말합니다. 
이 컨테이너는 종종 운반, 보관 또는 포장용으로 사용됩니다.
</div>

 

.note

프라이머리(primary)는 기본을 나타냅니다.

인포(info)는 안내를 나타냅니다.

석세스(success)는 성공,성과를 나타냅니다.

위닝(warning)은 경고를 나타냅니다.

덴져(danger)는 위험을 나타냅니다.

디폴트(default)는 기본을 나타냅니다.

.no-icon의 클래스는 아이콘이 보여지지 않습니다. 이는 모든 .note 내부에 사용이 가능합니다.

<div class="note p">프라이머리(primary)는 <b>기본</b>을 나타냅니다.</div>
<div class="note i">인포(info)는 <b>안내</b>를 나타냅니다.</div>
<div class="note s">석세스(success)는 <b>성공,성과</b>를 나타냅니다.</div>
<div class="note w">위닝(warning)은 <b>경고</b>를 나타냅니다.</div>
<div class="note d">덴져(danger)는 <b>위험</b>을 나타냅니다.</div>
<div class="note def">디폴트(default)는 <b>기본</b>을 나타냅니다.</div>
<div class="note no-icon">
    <code>.no-icon</code>의 클래스는 아이콘이 보여지지 않습니다. 
    이는 모든 <code>.note</code> 내부에 사용이 가능합니다.
</div>

 

6. 강조 색

 

기본글자색에서 <b>태그도 강조됩니다. 그리고 .wws과 .wws2 클래스가 있습니다.

.wws2는 이쪽에 표시 합니다. .h3를 사용하면 더 잘 보입니다.

기본 강조부분의 <b>으로는 굵은 글자 입니다.
전체 형광으로 강조부분의 Class명으로는 .wws 입니다.

기본 강조부분의 &lt;b&gt;으로는 <b>굵은 글자</b> 입니다.<br>
전체 형광으로 강조부분의 Class명으로는 <span class="wws">.wws</span> 입니다.<br>

---