글 작성시 사용하는 html 태그와 css 정리 1

글을 작성할 때 html 태그를 이용하여 글을 꾸미는 경우, 매번 어떤 태그를 써야하는지 까먹는 경우가 많아서 글을 작성할 때마다 예전에 올렸던 글을 다시 참고해서 html 태그를 확인하는 경우가 많다. 게다가 상당히 자주 블로그의 html이나 css를 수정하는편이라 예전에는 블로그와 잘 어울렸던 태그가 이제는 더이상 어울리지 않는 경우도 있어서, 이번에 한번 내가 사용하는 html 태그와 관련 css를 전부 정리를 해 보기로 하였다. 

1. <b>태그

원래를 그냥 글씨를 굵게 하는 태그인데 블로그에 적용한 글씨체 (나눔고딕, 나눔명조)가 글씨를 굵게 해도 별로 강조가 안되는거 같아서 css를 이용하여 색(#005B9A)을 넣어 주었다. 

2. 글의 소제목

소제목을 이용할 때는 <h3>소제목</h3>와 같이 사용하면 된다.

문단 제목

만약 글의 한 문단에 대한 제목을 달고 싶을 때는 <h4>문단 제목</h4>를 이용한다.

3. 인용구

인용구를 쓰고 싶을 때는 <blockquote>인용구</blockquote>와 같이 사용하거나 간단히 글쓰기 상단 메뉴에서 인용구 버튼, 또는 [Ctrl+Q]를 이용하면 된다. 딱히 디자인이 맘에 들지 않아서 언젠가는 css를 수정할 계획.

4. 더보기

더보기는 최근에 css를 수정하였다. 더보기 기능을 사용할 때에는 따로 html을 이용할 필요 없이 글쓰기 상단 메뉴의 더보기 기능을 이용하면 된다. 

5. 각주

티스토리에서 기본으로 제공하는 각주^[각주:1]는 모바일 환경에서 보기 어려운 부분이 있는데, Bigfoot의 각주를 이용하여 이 문제를 해결하였다. 우선 티스토리의 각주 기능을 사용해서 글을 작성하고 나면, 일단 티스토리 자체적으로 각주 부분을 렌더링을 한 후에 다시 Bigfoot 자바스크립트를 이용하여 다시 한번 각주 부분을 렌더링 하는듯 하다.

※ 참고: http://www.bigfootjs.com/

6. 링크

글을 작성시 새창에서 열리는 외부 링크는 이렇게 생성된다. 글쓰기 상단 메뉴 또는 단축키 [Ctrl+K]을 이용하면 기본적으로 <a>태그 안에 class="tx-link"가 추가되어 있는데, 이를 class="outside"로 바꾸어 주기만 하면 된다.

<a href="링크 주소" target="_blank" class="outside">링크</a>

7. 리스트

1. 글의 가독성과 심미성을 위하여 티스토리에서 제공하는 기본 리스트 기능은 사용하지 않는다.
2. 대신에 리스트를 사용하고 싶을 때는, 아래와 같이 수동으로 html 코드를 입력해 주어야 한다.
3. 리스트의 순서를 (1), (2), (3)과 같이 나타낼 때는 <ol class="number">를 사용하고, 순서를 (a), (b), (c)와 같이 나타 낼 때는 <ol class="alpha">를 사용한다. 또한 (i), (ii), (iii)와 같이 나타내고 싶을 때는 <ol class="roman">을 사용한다.

<ol class="number"> (또는 <ol class="alpha">)
    <li>첫번째 리스트</li>
    <li>두번째 리스트</li>
</ol>

8. 구분선

구분선은 두가지 css 스타일을 적용해 두었다. 각각 <hr class="line">과 <hr class="zigzag">를 이용하면 된다.

---

---

9. 기타

내가 사용하고 있는 티스토리 스킨 홈페이지에 설명에 따르면 여러가지 글에 대한 속성의 css가 미리 정의되어 있다. 예를 들어 위첨자와 아래첨자는 각각 <sup>와 <sub> 태그를 이용하여 이렇게^위첨자 이렇게_아래첨자 나타낼 수 있다. 또한 축약어(abbreviation)나 두문자어(acronym)를 사용할 때 <abbr> 태그를 이용하여 

<abbr title="원래뜻">내용</abbr>

과 같이 사용한다. 예를 들어 "AC는 선택공리이다." 처럼 사용하면 될 것 같다. 

1. 이 문장은 각주입니다. [본문으로]