MathJax-Latex 이용해서 워드프레스 블로그에 기호, 수식 입력하기

워드프레스 블로그를 운영하다 보면 수학 기호나 수식을 좀 더 편리하게, 그리고 보기 좋게 입력할 수 있는 방법을 찾게 되는데 그때 많이 사용하는 기술이 Latex 입니다. 원래 Latex는 블로그 보다 논문 등의 출판물에 사용되던 기술인데 워드프레스 등의 블로그에도 쉽게 사용할 수 있는 방법이 있어서 소개 드립니다.

MathJax-Latex 시작하기

워드프레스 플러그인 설치

워드프레스 플러그인 설치 화면에서 MathJax-Latex를 검색하고 설치해주세요. 설치하신 후에 활성화 버튼도 눌러주시면 운영하시고 있는 워드프레스에 Latex를 사용할 준비는 끝났습니다.

Latex 사용 선언하기

이 부분을 헷갈려 하시는 분들이 간혹 계신 것 같습니다. 수학기호나 수식을 작성하려고 하는 글의 초입에 [ mathjax ]를 입력해주세요. 실제 화면에는 [ mathjax ]가 보이지 않으니 걱정 안하셔도 됩니다.

Latex-사용-선언하기
Latex-사용-선언하기

그냥 위에 이미지처럼 글을 시작하는 어딘가에 [ mathjax ]를 입력해주세요. 그러면 latex를 사용하는데 필요한 코드가 자동으로 삽입됩니다. (저는 mathjax를 감싸고 있는 대괄호 전 후로 띄어쓰기를 넣었는데 실제로는 띄어쓰기 없이 입력하셔야 합니다)

MathJax-Latex 이용하기

사용 예시 1 – 수식 입력 기초

질량-에너지 등가원리 \(E=mc^2\)

위와 같은 표현을 위해 아래와 같이 입력하시면 됩니다.

질량-에너지 등가원리 \( E=mc^2 \)
\(수식 시작하기
\)수식 종료하기
^2제곱 기호
표현에-사용된-Latex-언어

사용 예시 2 – 수식 입력 기초

질량-에너지 등가원리 \[ E=mc^2 \]

예시 1 과는 다르게 새로운 줄에 수식이 출력됐습니다. 위와 같은 표현을 위해 아래와 같이 입력하시면 됩니다.

질량-에너지 등가원리 \[ E=mc^2 \]
\[(새로운 줄에) 수식 시작하기
\](새로운 줄에) 수식 종료하기
표현에-사용된-Latex-언어

사용 예시 3 – 제곱근, 곱하기

\[ ( \sqrt{3 \times 2} ) ^2 = 6 \]

곱하기와 제곱근 기호를 사용한 수식입니다. 참고로 수식 내에 띄어쓰기는 실제 표현에 반영되지 않습니다. 가독성을 위해 적절한 띄어쓰기를 사용하는게 좋습니다. 위와 같은 표현을 위해 아래와 같이 입력하시면 됩니다.

\[ ( \sqrt{3 \times 2} ) ^2 = 6 \]
\sqrt{}제곱근, {} 안에 수식 입력
\times곱하기
표현에-사용된-Latex-언어

사용 예시 4 – 분수

\[ ( \frac{3 + 5}{2} ) \]

분수를 사용한 수식입니다. 분수 값은 괄호로 감쌌습니다. 위와 같은 표현을 위해 아래와 같이 입력하시면 됩니다.

\[ ( \frac{3 + 5}{2} ) \]
\frac{나눠지는 수}{나누는 수}분수
표현에-사용된-Latex-언어

사용 예시 5 – 괄호 높이 맞추기

\[ \left ( \frac{3 + 5}{2} \right ) \]

똑같이 분수를 표현한 수식이지만 이번에는 분수를 감싸는 괄호의 높이가 분수의 크기에 맞춰서 표현되었습니다. 위와 같은 표현을 위해 아래와 같이 입력하시면 됩니다.

\[ \left(\frac{3 + 5}{2}\right) \]
\left여는 괄호 높이 맞추기
\right닫는 괄호 높이 맞추기
표현에-사용된-Latex-언어

사용 예시 6 – 줄 바꿈

\[ \begin{gather} 3^2 + 4 = 9 + 4 \\ = 13 \end{gather} \]

줄 바꿈 하려는 위치에 \\ 를 입력하시면 됩니다. 하지만 아무 곳에나 입력한다고 줄 바꿈이 되진 않고요, 줄 바꿈 하려는 수식은 전체가 \ begin{gather} 와 \ end{gather} 로 감싸져 있어야 합니다. 아래와 같이 입력하시면 위와 같은 표현을 작성할 수 있습니다. 모바일에서 보실 때는 수식을 손가락으로 밀어서 스크롤 하시면 화면에 짤린 코드를 보실 수 있습니다.

\[ \begin{gather} 3^2 + 4 = 9 + 4 \\ = 13 \end{gather} \]
\begin{gather}줄 바꿈 문단 시작
\end{gather}줄 바꿈 문단 종료
\\줄 바꿈
표현에-사용된-Latex-언어

사용 예시 7 – 정렬해서 줄 바꿈

\[ \begin{align} 3^2 + 4 &= 9 + 4 \\ &= 13 \end{align} \]

이번에는 줄 바꿈 하면서 등호(=)를 기준으로 정렬된 상로 표현되었습니다. 앞에서 사용한 수식과 거의 동일한 수식을 사용하면 되지만 {gather} 대신 {align}을 사용하였고 정렬하고자 하는 수식 앞에 &를 사용했습니다. 아래와 같이 입력하시면 위와 같은 수식을 얻을 수 있습니다.

\[ \begin{align} 3^2 + 4 &= 9 + 4 \\ &= 13 \end{align} \]
\begin{align}정렬 줄 바꿈 문단 시작
\end{align}정렬 줄 바꿈 문단 종료
&정렬 기준위치
표현에-사용된-Latex-언어

사용 예시 8 – 케이스 나누기

\[ f(x)= \begin{cases} 1 & \text{if} \,\, x > 0 \\ 0 & \text{if} \,\, x \le 0 \end{cases} \]

여러 경우에 대해 수식을 나누어서 표현하고자 할 때는 \ begin{cases} 와 \ end{cases} 사이에 줄 바꿈 \\을 이용해서 각 경우에 따른 수식을 입력하면 됩니다. 또한 수식을 입력할 때 영문자 if를 그냥 입력하면 \(if\) 이처럼 이탤릭체로 표현됩니다. 일반적인 문자로 출력하고자 할 때는 \text{if} 와 같이 입력해야 하며 띄어쓰기도 그냥 스페이스가 아닌 \, 를 입력해야 띄어쓰기로 인식됩니다. \,\,는 띄어쓰기를 두 칸 한다는 의미죠. 아래와 같이 입력하시면 위와 같은 수식을 얻을 수 있습니다. 앞에서 이미 학습한 줄 바꿈 기호(\\)와 정렬 기호(&)도 섞여있다보니 헷갈릴 수 있습니다. 천천히 분석해보세요.

\[ f(x)= \begin{cases} 1 & \text{if} \,\, x > 0 \\ 0 & \text{if} \,\, x \le 0 \end{cases} \]
\begin{cases}케이스 나누기 문단 시작
\end{cases}케이스 나누기 문단 종료
\text{}이탤릭체가 아닌 일반문자 입력
\.띄어쓰기
\le작거나 같다 (\(\le\))기호
표현에-사용된-Latex-언어

자주 사용하는 기호

코드기호
\div\(\div\)
\times\(\times\)
\sqrt{A}\(\sqrt{A}\)
\sqrt[n]{A}\(\sqrt[n]{A}\)
\rightarrow\(\rightarrow\)
\leftarrow\(\leftarrow\)
\leftrightarrow\(\leftrightarrow\)
\Rightarrow\(\Rightarrow\)
\Leftarrow\(\Leftarrow\)
\Leftrightarrow\(\Leftrightarrow\)
\ne\(\ne\)
\le\(\le\)
\ge\(\ge\)

마무리

본업이 프로그래머인 저도 Latex를 처음 이용할 때 어려움이 있었습니다. 제 글을 보시는 분들은 그런 어려움을 조금은 덜었으면 좋겠다는 생각에 작성한 글인데 역시 작성 하다보니 내용이 복잡해지기는 하네요. 혹시 잘 이해가 되지 않는 부분이나 궁금하신 점이 있다면 언제든 댓글로 알려주세요. 감사합니다.

이메일 주소는 공개되지 않습니다 (필수항목 *)

guest
0 Comments
Inline Feedbacks
View all comments