한글 프로그램은 한국에서 많이 사용한다. 이공계열에 있는 한국 사람들이 한글 프로그램을 사용하다보면 수식 정렬과 수식 번호 입력에 불편함을 느낀다. MS 워드 프로그램도 마찬가지다. 반면 이공계열 전공 서적은 수식 정렬이 깔끔하고 수식 번호 참조도 가능하다. 이런 서적을 작성할 때 사용하는 것이 Tex(텍이라고 읽음)이다. Tex은 종류가 다양한데 그 종류 중에 Latex(레이텍이라고 읽음)이 있다.
Latex은 수식 정렬, 수식 번호 입력, 수식 번호 참조 등의 기능이 있어 편하다. 산스크리트어 그리스어의 조판도 가능하다. 더불어 Latex의 다양한 기능을 웹 페이지 문서에서도 활용이 가능하다. 그러므로 웹 페이지가 이공계열 전공 지식으로 구성되려면 Latex은 필수적이다. 따라서 웹 페이지에 수식을 넣고 싶다면 Latex 언어 사용 방법을 먼저 터득하길 바란다.
이제부터 티스토리에서 latex을 이용하여 수식 넣는 방법을 구체적으로 알아보자.
티스토리의 HTML 수정
먼저 사용자의 티스토리의 HTML을 수정해야 한다. 따라서 사용자의 티스토리 관리자 페이지 접근 방법에 관해 알아야 한다. 그리고 HTML에 Mathjax 자바스크립트 코드를 추가한다. 그 과정은 아래와 같다.
티스토리의 관리자 페이지 접속
- 티스토리 > 운영중인 블로그 홈 > 관리자
- 또는 블로그 메인 페이지에서 키보드의 'q'를 누름
스킨 편집 클릭
왼쪽 사이드 바에서 꾸미기>'스킨 편집'을 클릭한다.
HTML 편집 클릭
관리자 페이지 오른쪽 상단의 'html 편집'을 클릭한다.
자바스크립트 코드 삽입
<head>와 </head>사이에 아래의 스크립트를 삽입한다. 일반적인 경우는 </head> 코드 바로 위에 아래 코드를 삽입한다.
<!--수식-->
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\[","\]"] ], processEscapes: true } }); </script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'></script>
적용 클릭
적용을 클릭하여 입력된 자바스크립트 코드가 잘 실행되도록 한다.
※ 참고로 html 에서 "<!--" 와 "-->" 는 주석 처리를 코드이다. 이 주석 처리 안 내용은 시간이 많이 지난 후의 자기 자신이나 타인에게 어떤 목적으로 코드를 사용했는지 알려주는 지표 역할을 한다.
Inline 수식 입력
Inline 수식 입력이란, 줄글로 글을 적다가 수식이나 문자를 적는 상황을 말한다. Inline 수식 입력을 위해서는 "\( \backslash ( \)"와 "\( \text{\)} \)" 사이에 Latex 코드를 입력한다.
※ 인라인 수식 입력을 위해 달러($) 표시로 Latex 코드를 감사는 감싸는 경우는 2021년 00월 이후부터 티스토리에서 사용이 안되고 있다. 따라서 달러 표시가 아니라 백슬러시( \( \backslash \) ) 와 소괄호 " ( , )" 를 이용해 코드를 감싸야 한다.
Inline에 수식 입력하기
이차 함수는 \(f(x)=x^2\)로 표현할 수 있다.
결과)
이차 함수는 \(f(x)=x^2\) 로 표현할 수 있다.
Inline에 그리스 문자 넣기
그리스 알파벳을 처음부터 3 개 나열하면 \(\alpha\) , \( \beta \) , \( \gamma \)가 된다.
결과)
그리스 알파벳을 처음부터 3개 나열하면 \(\alpha\) , \( \beta \) , \( \gamma \)가 된다.
Outline 수식 입력
Outline 수식 입력이란, 줄글의 중간에 수식을 입력하는데 수식이 자동 개행되어 입력되는 것을 말한다. Outline 수식을 입력하는 방법은 수식의 앞뒤에 달러 표시를 (\$) 두 개씩 적은 뒤에 그 사이에 수식을 입력한다.
Outline 수식 입력
다음과 같은 수식은 $$\alpha \beta =a x^2 + b x + c$$ 이다.
결과)
다음과 같은 수식은 $$ \alpha \beta =a x^2 + b x + c $$ 이다.
등호를 기준으로 수식 정렬
Latex의 기본 기능으로 다음과 같이 등호를 기준으로 수식을 정렬할 수 있다.
\begin{align*} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \\ &= \alpha \beta \gamma \delta \theta \iota \zeta \end{align*}
결과)
\begin{align*} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \\ &= \gamma m_0 \end{align*}
- 티스토리 글 작성에서 기본모드로 위 수식을 작성할 수 있다.
- 주의할 점은 기본모드에서 작성할 때 \( \text{\begin{align*} } \) 에서부터 \( \text{\end{align*}} \)까지 개행 없이 한줄로 작성해야 한다. 그 이유는 기본모드 문서가 HTML 문서로 자동 변경되는 과정과 관련이 있다. 기본모드로 작성된 글이 HTML 문서로 바뀌는 과정에서 줄글 앞 뒤에는 자동으로 p 태그가 작성된다. 기본 모드에서 엔터를 입력하여 개행을 하면 윗 줄과 아랫줄에는 각각 따로 p 태그가 작성된다. 그러므로 기본 모드에서 수식이 포함된 문장을 조판할 때 개행을 하면 분리된 수식 문장을 독립된 p 태그로 인식하기 때문에 결과물에 수식이 입력되지 않는다. 따라서 기본모드에서 수식을 입력할 때 HTML 문서에서는 <p>(열린 태그) Latex 언어 </p>(닫힌 태그) 형태 처럼 하나의 요소(element)로 인식되도록 문서를 작성해야 한다.
수식 번호 입력
수식에 번호를 입력하는 것은 HTML 편집하여 아래와 같은 자바스크립트 코드를 위의 mathjax 코드 아래에 넣어야 한다.
<!--수식에 번호 넣기-->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({ TeX: { equationNumbers: {autoNumber: "AMS"} } });
</script>
Equation을 이용하여 수식 번호 입력 방법
$$\begin{equation} \vec{F}=\frac{d \vec{p}}{dt} \label{eq1} \end{equation}$$
결과)
$$\begin{equation} \vec{F}=\frac{d \vec{p}}{dt} \label{eq1} \end{equation}$$
equation*을 이용하여 수식 번호를 입력하지 않는 방법
$$\begin{equation*} \vec{F}=\frac{d \vec{p}}{dt} \label{eq2} \end{equation*}$$
결과)
$$\begin{equation*} \vec{F}=\frac{d \vec{p}}{dt} \label{eq2} \end{equation*}$$
equation에서 tag를 이용하여 수식 번호를 임의로 지정하는 방법
$$\begin{equation} \vec{F}=\frac{d \vec{p}}{dt} \label{eq3} \tag{2(a)}\end{equation}$$
결과)
$$\begin{equation} \vec{F}=\frac{d \vec{p}}{dt} \label{eq3} \tag{2(a)}\end{equation}$$
align을 이용하여 수식 번호 입력 방법
$$\begin{align} \vec{F} & =\frac{d \vec{p}}{dt} \\ & = \frac{d{(m \vec{v} )}{dt}\label{eq4}\end{align}$$
결과)
$$\begin{align} \vec{F}& =\frac{d \vec{p}}{dt} \\ & = \frac{d(m \vec{v})}{dt} \label{eq4} \end{align}$$
align을 이용하여 특정 줄만 수식을 제외하고 수식 번호 입력 방법
$$\begin{align} \vec{F}& =\frac{d \vec{p}}{dt} \notag \\ & = \frac{d(m \vec{v})}{dt} \label{eq5} \end{align}$$
결과)
$$\begin{align} \vec{F}& =\frac{d \vec{p}}{dt} \notag \\ & = \frac{d(m \vec{v})}{dt} \label{eq5} \end{align}$$
수식 참조 기능
마지막으로 Latex의 수식 참조 기능인 eqref는 아래와 같이 사용할 수 있다.
eqref 이용
식 \( \eqref{eq1} \) 과 식 \(\eqref{eq3} \) 은 같고, 식 \(\eqref{eq1}\)과 식 \(\eqref{eq4} \)는 다르다.
결과)
식 \( \eqref{eq1} \) 과 식 \(\eqref{eq3} \) 은 같고, 식 \(\eqref{eq1}\)과 식 \(\eqref{eq4} \)는 다르다.