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

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

9. 수식 입력

$x^2 + y^2 = 1$과 같이 MathJax를 이용하여 수식을 입력할 수 있다. 수식을 입력할 때에는 문장 안에 수식이 들어가는 inline 형태와 수식 자체가 한 줄을 차지하고 가운데 정렬이 되는 display 형태가 있는데, inline 형태의 경우 $...$와 같이 사용하면 된다. 또한 display 형태의 경우 \[...\]을 이용한다. 당연히 ... 부분에는 LaTeX를 이용한 수식의 코드가 들어가면 된다.

\[ \int_{a}^{b} \! f(x) \, dx = F(b) - F(a) \]

이 때, display 형태의 수식이 길어질 경우 모바일 환경에서 오른쪽이 짤리는 경우가 있다. 이를 해결하기 위해서 <div> 태그를 이용하여 아래와 같이 사용한다.

<div class="equation">
    \[ \int_{a}^{b} \! f(x) \, dx = F(b) - F(a) \]
</div>

마지막으로 이유는 잘 모르겠지만 Wikipedia에 있는 수식의 경우, 수식을 복사한 후에 메모장 등에 붙여 넣기를 하면 그 수식의 LaTeX 코드가 자동으로 뜬다! 또한 수식 내에 한글이 들어갈 경우 $a 또는 b$와 같이 한글의 폰트가 별로 좋지 않은데, 이는 어쩔 수 없는 구조상의 한계인 듯 하다.

※ 참고: https://www.mathjax.org/

10. <fieldset> 태그

정리나 정리를 위한 <fieldset> 태그

글에 정의나 정리를 적어야 하는 일이 있을 때, 이를 강조하기 위해서 <fieldset> 태그를 이용한다. 정의나 정리의 번호와 제목은 <legend> 태그를 사용하면 된다.

위와 같이 사용하기 위한 html 수식은 아래와 같다.

<fieldset><legend><b>정리의 제목</b></legend>
    <p>정리의 내용</p>
</fieldset>

11. 증명끝 표시

증명이 끝났음을 강조하기 위하여 증명의 마지막에 <span class="qed"></span>을 추가해 준다. 그럼 이 문장의 마지막에 보이는 것처럼 파란 상자가 출력된다.

12. 코드 입력

Prism.js를 이용하여 코드가 깔끔하게 출력되도록 할 수 있다. 이후 코드를 입력할 때는

<div class="code">
<pre><code class="languate-코드 종류">코드 내용</code></pre>
</div>

와 같이 입력해 주면 된다. 이때 코드 종류는 latex, matlab, processing, markup 등을 사용할 수 있다.^[각주:1]

※ 참고: http://prismjs.com/

13. 테이블

티스토리에서 글을 작성시 테이블을 입력하는 부분에 대해서 고민을 많이 했었는데, 결론적으로는 왠만하면 테이블을 사용하지 않되 꼭 테이블을 사용해야만 하면 아얘 테이블 전체를 LaTeX를 이용하여 코딩하고 display 형태로 출력하자는 결론을 내렸다. 이는 테이블 환경이 데스크탑과 모바일에서 너무나도 다르게 보이기 때문이다. 

\[ \begin{array}{|c||c|c|c| } \hline & \text{column} 1 & \text{column} 2 & \text{column} 3 \\[2pt] \hline \text{row} A & A1 & A2 & A3 \\[2pt] \text{row} B & B1 & B2 & B3 \\[2pt] \text{row} C & C1 & C2 & C3 \\[2pt] \hline \end{array} \]

하지만 LaTeX를 이용하면 한글의 렌더링이 별로이기 때문에 조금 더 생각해 볼 문제이긴 하다.

1. 홈페이지에 들어가 보면 사용 가능한 모든 코드의 종류를 볼 수 있다. [본문으로]