온라인에서 수학과 관련된 주제로 글을 쓰다 보면 수식을 표현하기가 어렵습니다. ShareYourMath와 같이 수학 토론에 특화된 다양한 사이트에서 MathJax를 통해 수식을 입력할 수 있도록 지원하고 있습니다. 이에 MathJax로 수식 입력하는 방법을 익혀두면 온라인에서 소통할 때 큰 도움이 됩니다. 이 포스트에서는 MathJax로 수식을 입력하기 위해 필수적으로 알아야 할 핵심 내용을 살펴봅니다.
이 포스트는 다음과 같은 관점에서 작성되었습니다.
- 사이트 운영자가 아닌 사이트 방문자에게 필요한 내용을 담았습니다.
- 상세한 내용을 모두 설명하지 않고, 바로 사용할 내용 위주로 개괄적으로 설명하였습니다.
내용 순서
1. MathJax란 무엇인가?
문서를 조판하는 시스템 중 ‘LaTeX’이라는 시스템이 있습니다. (‘LaTeX’은 ‘레이텍’ 또는 ‘라텍’이라고 읽습니다.) LaTeX을 이용하면 수식이 삽입된 문서를 미려하게 조판할 수 있기 때문에, 주로 수리과학을 기반으로 하는 분야의 논문을 작성할 때 LaTeX이 사용됩니다.
MathJax는 LaTeX에서 수식을 입력하는 것과 같은 방식으로 웹페이지(HTML 문서)에 수식을 삽입할 수 있도록 구현한 시스템입니다. 웹사이트 관리자가 사이트의 코드 내에 MathJax를 지원하도록 코드를 삽입하면 해당 웹사이트에서 글을 쓰는 사람은 MathJax를 사용할 수 있습니다.
MathJax에 대한 자세한 소개는 이곳을 참고하세요: https://www.mathjax.org.
2. 수식 삽입하기
온라인에서 글을 쓸 때 MathJax를 이용하여 수식을 작성하는 것은 웹사이트 관리자가 사이트의 코드 내에 MathJax를 지원하도록 코드를 삽입했을 때만 가능합니다.
문장 안에서 글자와 같이 자리를 차지하는 수식을 입력하려면 ‘\(’와 ‘\)’ 사이에 입력합니다. 하나의 문단을 차지하는 수식을 입력하려면 ‘\[’와 ‘\]’ 사이에 입력합니다.
예컨대 이차방정식의 근의 공식을 기술하려면 다음과 같이 입력합니다.
스크립트:
이차방정식 \(ax^2 + bx + c = 0\)의 근의 공식은
\[x=\frac{-b\pm\sqrt{b^2 -4ac}}{2a}\]
이다. (단, \(a \ne 0\)이고, \(a,\) \(b,\) \(c\)는 실수.)
출력:
같은 스크립트를 입력해도 글자처럼 취급되는 수식과 문단을 차지하는 수식에서 다르게 출력될 수 있습니다. 예컨대 극한 기호는 다음과 같이 출력됩니다.
스크립트:
극한 \(\lim_{x\rightarrow a}f(x)=L\)로부터
\[\lim_{x\rightarrow a}(3f(x))=3L\]을 얻는다.
출력:
주의사항. 웹사이트에서 제공하는 대부분의 입력기는 줄넘김이나 두 칸 이상의 공백을 입력하면 그에 대응되는 HTML 태그를 입력합니다(P, BR, NBSP 태그 등). 이러한 입력기에서 TeX 수식을 입력할 때 줄넘김이나 두 칸 이상의 공백을 입력하면 수식 사이에 HTML 태그가 삽입되어 오류가 발생합니다. 그러므로 수식을 입력할 때 줄넘김이나 두 칸 이상의 빈칸을 입력하지 않도록 주의해야 합니다.
3. 기본 규칙
수식을 작성할 때 기억해야 할 기본 규칙은 다음과 같습니다.
- 스크립트에서 띄어쓰기와 줄넘김을 해도 수식에서 출력되지 않습니다.
- 모든 명령어는 백슬래시(\)로 시작합니다. (단, 윗첨자나 아래첨자와 같이 대단히 자주 사용되는 특수한 경우는 백슬래시가 없는 명령어를 사용할 수 있습니다.)
- 명령어는 기본적으로 대상의 앞에 입력합니다(prefix). 예컨대 분수 ‘2/5’를 입력하려면 ‘\frac{2}{5}’를 입력합니다. 출력은 다음과 같이 됩니다. \[\frac{2}{5}\]
- 빈칸을 입력하려면 ‘\,’ 또는 ‘\ ’를 입력합니다. 앞의 것은 반 칸이고 뒤의 것은 온전한 한 칸입니다. ‘\,\,’와 같이 반 칸을 두 번 입력하여 한 칸을 넣는 방법도 있습니다. 수식 안에서 줄넘김을 하려면 ‘\\’를 입력합니다.
- 문자열을 하나의 덩어리로 인식하도록 하려면 중괄호로 묶어줍니다. 예컨대 ‘\sqrt abc’라고 입력하면 \[\sqrt abc\] 와 같이 출력되지만, ‘\sqrt{abc}’라고 입력하면 \[\sqrt{abc}\] 와 같이 출력됩니다. (‘sqrt’는 제곱근 기호를 입력하는 명령어입니다. 사실 제곱근 기호 안에 한 글자만 넣더라도 중괄호 안에 입력하는 것이 원칙입니다.)
- 글자는 기본적으로 이탤릭으로 출력됩니다. 로만체로 출력되도록 하려면 ‘\mathrm’ 명령어를 사용해야 합니다.
- ‘sin’, ‘cos’, ‘ln’과 같이 자주 사용하는 함수를 입력할 때도 앞에 ‘\’를 붙여야 합니다. 그렇지 않으면 이 문자열이 이탤릭으로 출력됩니다.
- 부등호를 입력할 땐 ‘<’, ‘>’ 기호의 앞과 뒤에 빈칸을 하나씩 넣어야 합니다. 그렇지 않으면 브라우저가 이 기호를 HTML TAG로 인식하여 원하지 않는 결과를 출력할 수 있습니다.
4. 다양한 수식 입력
(1) 위첨자와 아래첨자
위첨자와 아래첨자는 ‘^’ 기호와 ‘_’ 기호를 사용합니다.
스크립트:
\[ f_n (x) = a_n x^n + b_{n-1} x^{n-1} \]
출력:
합(sum), 극한(lim), 합집합(bigcup)과 교집합(bigcap) 등 몇몇 특별한 기호에 아래첨자와 위첨자를 붙이면 기호의 아래쪽과 위쪽에 붙습니다.
스크립트:
\[
\lim_{n\rightarrow\infty} \sum_{k=1}^{n} f_n (x)
\]
\[
\bigcup_{i=1}^{m} \bigcap _{j=1}^{n} A_{ij}
\]
출력:
(2) 분수
분수를 나타내려면 ‘\frac{분자}{분모}’를 입력합니다.
스크립트:
\[
\frac{a}{b} = \frac{ \frac{a}{3} \times 4 }{ \frac{b}{3} \times 4 }
\]
출력:
(3) 괄호
소괄호와 대괄호는 그냥 입력하면 됩니다. 그러나 중괄호는 역슬래시 ‘\’를 붙여주어야 문자로 인식합니다.
스크립트:
\[
[\left\{(a+b)+c\right\}+d]+e = [{(a+b)+c}+d]+e
\]
출력:
괄호를 입력할 때 ‘\left’와 ‘\right’를 붙여주면 그 사이에 있는 수식의 크기에 따라 괄호의 높이가 자동으로 조절됩니다.
스크립트:
\[
\left( \frac{1}{2} + 3 \right) + 4 = ( \frac{1}{2} +3 ) + 4
\]
출력:
‘\left’와 ‘\right’가 붙은 괄호는 반드시 쌍을 이루어야 합니다. 쌍을 이루지 않고 ‘\left’나 ‘\right’ 중 하나만 사용하려면, 다른 쪽에 괄호 대신 온점(.)을 찍어서 쌍을 맞추어야 합니다.
스크립트:
\[ \left( \frac{a}{b} +c \right . \]
\[ \left . \frac{a}{b} +c \right) \]
\[ \left( \frac{a}{b} +c \]
\[ \frac{a}{b} +c \right) \]
출력:
자주 사용되는 괄호는 다음과 같은 것들이 있습니다.
| 설명 | 출력 | 명령어 |
|---|---|---|
| 최대정수함수 | \(\lfloor ,\) \(\rfloor\) | \lfloor, \rfloor |
| 절댓값 | \(\lvert ,\) \(\rvert\) | \lvert, \rvert |
| 노름 | \(\lVert ,\) \(\rVert\) | \lVert, \rVert |
| 내적, 브라켓 | \(\langle ,\) \(\rangle\) | \langle, \rangle |
(4) 여러 줄 쓰기
수식 내에서 줄바꿈을 할 땐 ‘\\’와 같이 백슬래시를 두 번 연달아 입력합니다. 하지만 이렇게 입력한다고 해서 항상 줄바꿈이 되는 건 아니며, 줄바꿈이 가능한 환경에서만 줄바꿈이 됩니다. 줄바꿈이 가능하려면 다음 두 조건이 모두 성립해야 합니다. (단, MathJax 설정이나 버전에 따라 달라질 수 있습니다.)
- 문단 단위 수식을 입력하는 상태여야 합니다. 즉 ‘\(’, ‘\)’로 감싼 수식이 아니라 ‘\[’, ‘\]’로 감싼 수식이어야 합니다.
- gather, align, matrix, cases 등 여러 줄을 입력하는 환경 안에 있어야 합니다.
다음 스크립트에서 ‘gather’는 여러 줄을 입력하는 환경을 뜻합니다.
스크립트:
\( f(x) = x^2 + 2x + 1 \\ g(x) = x^2 \\ h(x) = 2x+1 \)
\[ f(x) = x^2 + 2x + 1 \\ g(x) = x^2 \\ h(x) = 2x+1 \]
\( \begin{gather} f(x) = x^2 + 2x + 1 \\ g(x) = x^2 \\ h(x) = 2x+1 \end{gather} )]
\[ \begin{gather} f(x) = x^2 + 2x + 1 \\ g(x) = x^2 \\ h(x) = 2x+1 \end{gather} \]
출력:
줄넘김할 때 ‘\\’ 뒤에 ‘[12pt]’와 같이 길이를 입력하면 줄간격을 조절할 수 있습니다.
스크립트:
\[
\begin{gather}
f(x)=x^2+2x+1 \\[5pt]
g(x)=x^2 \\[30pt]
h(x)=2x+1
\end{gather}
\]
출력:
‘align’ 환경을 이용하면 특정 문자를 기준으로 수식을 정렬할 수 있습니다. 예컨대 등호를 기준으로 수식을 정렬하려면 다음과 같이 합니다.
스크립트:
\[
\begin{align}
f(x) &= x^2 + 2x + 1 \\
&= (x+1)^2 , \\
g(x) &= x^2 .
\end{align}
\]
출력:
(5) 경우를 나누어 함수 정의하기
\(x\)의 범위에 따라 함수식을 다르게 정의한다거나 경우를 나누어 결과를 다르게 나타낼 때는 ‘cases’ 환경을 이용하면 됩니다.
스크립트:
\[
f(x)=
\begin{cases}
x^2 & \text{if} \,\, x > 0, \\
-x^2 & \text{if} \,\, x \le 0 .
\end{cases}
\]
출력:
세 가지 이상의 경우로 나누어 정의하는 경우에도 같은 방법을 사용합니다.
스크립트:
\[
f(x)=
\begin{cases}
A & \text{if} \,\, x \le 0, \\
B & \text{if} \,\, 0 < x < 1 , \\
C & \text{if} \,\, x \ge 1 .
\end{cases}
\]
출력:
(6) 행렬
둥근 괄호로 묶인 행렬을 입력할 땐 ‘pmatrix’ 환경을 사용하면 됩니다. ‘pmatrix’ 환경 내에서는 ‘&’와 ‘\\’을 사용하여 글자 위치를 맞추고 줄넘김을 해줍니다.
스크립트:
\[
A = \begin{pmatrix} P & Q \\ R & S \end{pmatrix}
\]
출력:
다른 모양의 괄호로 묶인 행렬을 만들거나, 열마다 정렬을 다르게 하고 싶다면 ‘array’ 환경을 사용하면 됩니다.
스크립트:
\[
A = \left[ \begin{array}{clr} aa & bbbbbbb & ccc \\ dddddd & ee & fffff \end{array} \right]
\]
출력:
위 예에서 ‘\begin{array}{clr}’에 붙은 ‘{clr}’는 “첫 열은 가운데 정렬하고 둘째 열은 왼쪽 정렬하고 셋째 열은 오른쪽 정렬한다”라는 뜻입니다. 중괄호 안에 있는 문자의 수는 열의 개수와 같도록 입력하면 됩니다.
행렬 안에 세로선이나 가로선을 넣고 싶다면 다음과 같이 합니다.
스크립트:
\[
A = \left[\begin{array}{c|cc} aa & bb & cc \\ ddd & e & fff \end{array}\right]
\]
\[
B = \left[\begin{array}{ccc} aa & bb & cc \\ \hline ddd & e & fff \end{array}\right]
\]
\[
C = \left[\begin{array}{cc|c} aa & bb & cc \\ \hline ddd & e & fff \end{array}\right]
\]
출력:
(7) 텍스트 입력
텍스트를 입력하려면 ‘\text’ 명령어를 사용합니다. 이 명령어를 사용하여 입력하면 로만체 텍스트가 출력되며, 띄어쓰기도 있는 그대로 출력됩니다.
스크립트:
\[ This is not a text. \text{This is a text.} \]
출력:
텍스트 안에서 ‘\(’와 ‘\)’를 사용하여 수식을 입력할 수 있습니다. 긴 텍스트 안에 한두 글자의 수식을 넣을 때 유용합니다.
스크립트:
\[ \text{The function \(f\) is not defined at \(a\).} \]
\[ P = \left\{ x \,\vert\, x \text{ is a positive real number.} \right\}\]
출력:
(8) 로만체, 굵은 글씨, 특별한 수학 서체
긴 설명이 필요하지 않습니다. 예를 바로 봅시다.
스크립트:
\[ \mathrm{Math Rm} \]
\[ \mathbf{Math Bf} \]
\[ \boldsymbol{Bold Symbol} \]
\[ \mathcal{Math Cal} \]
\[ \mathfrak{Math Frak} \]
\[ \mathbb{Math Bb} \]
출력:
(9) 수식에 번호 붙이기
수식에 번호를 붙이려면 ‘\tag’ 명령어를 사용합니다.
스크립트:
이차방정식
\[ax^2 + bx + c =0 \tag{1}\]
을 풀면
\[x=\frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \tag{2}\]
이다. 단, (1)에서 \(a,\) \(b,\) \(c\)가 실수이고 \(a\ne 0\)일 때 공식 (2)를 사용한다.
출력:
괄호 없이 번호를 붙이려면 ‘\tag*’ 명령어를 사용합니다.
스크립트:
이차방정식
\[ax^2 + bx + c =0 \tag*{34}\]
을 풀면
\[x=\frac{-b \pm \sqrt{b^2 - 4ac}}{2a} . \tag*{\(\square\)}\]
출력:
위 보기에서 볼 수 있다시피 ‘\tag’ 명령어 안에 숫자만 입력할 수 있는 것이 아니라 다른 문자나 수식을 입력할 수도 있습니다.
(10) 수식 회전시키기
편법이지만 수식을 거꾸로 입력하는 방법은 다음과 같습니다.
스크립트:
\[ ABC \style{display: inline-block; transform: rotate(180deg)}{DEF} GHI \]
출력:
원래 TeX에서는 글자를 회전시켜 입력할 수 있습니다. MathJax에서는 글자를 회전시키는 명령어를 지원하지 않지만, 위 예에서 보다시피 CSS를 활용하여 글자를 회전시킬 수 있습니다.
(11) 그 밖에 자주 사용되는 명령어
| 설명 | 출력 | 명령어(스크립트) |
|---|---|---|
| 불일치 기호 | \(\ne\) | \ne |
| 나눗셈 기호 | \(\div\) | \div |
| 곱셈 기호 | \(\times\) | \times |
| 편미분 기호 | \(\partial\) | \partial |
| 글자 위 점 한 개 붙임 | \(\dot{A}\) | \dot{A} |
| 글자 위 점 두 개 붙임 | \(\ddot{A}\) | \ddot{A} |
| 글자 위 줄 | \(\overline{A}\) | \overline{A} |
| 글자 아래 줄 | \(\underline{A}\) | \underline{A} |
| 합성함수 기호 | \(\circ\) | \circ |
| 삼각형 기호 | \(\triangle\) | \Triagle |
| 호 | \(\overset{\huge\frown}{AB}\) | \overset{\huge\frown}{AB} |
| 캐럿 기호 | \(\hat{a}\) | \hat{a} |
| 벡터 | \(\vec{a}\) | \vec{a} |
| 제곱근 | \(\sqrt{A}\) | \sqrt{A} |
| n제곱근 | \(\sqrt[n]{A}\) | \sqrt[n]{A} |
| 오른쪽 화살표 | \(\rightarrow\) | \rightarrow |
| 왼쪽 화살표 | \(\leftarrow\) | \leftarrow |
| 양쪽 화살표 | \(\leftrightarrow\) | \leftrightarrow |
| 오른쪽 함의 화살표 | \(\Rightarrow\) | \Rightarrow |
| 왼쪽 함의 화살표 | \(\Leftarrow\) | \Leftarrow |
| 양쪽 함의 화살표 | \(\Leftrightarrow\) | \Leftrightarrow |
| 긴 화살표 | \(\Longrightarrow\) | \Longrightarrow |
| 결론 기호 | \(\therefore\) | \therefore |
| 근거 기호 | \(\because\) | \because |
| 생략 기호 | \(\cdots \) | \cdots |
| 그리스 소문자 | \(\alpha,\,\, \beta ,\,\, \gamma ,\,\, \cdots\) | \alpha, \beta, \gamma, … |
| 그리스 대문자 | \(\varDelta ,\,\, \varPi ,\,\, \varOmega ,\,\, \cdots\) | \varDelta, \varPi, \varOmega, … |
| 합집합 | \(\cup,\,\, \bigcup_{n=1}^{N}\) | \cup, \bigcup_{n=1}^{N} |
| 교집합 | \(\cap,\,\, \bigcap_{n=1}^{N}\) | \cap, \bigcap_{n=1}^{N} |
| 곱집합 | \(\prod,\,\, \prod_{n=1}^{N}\) | \prod, \prod_{n=1}^{N} |
| 원소 기호 | \(\in\) | \in |
| 포함관계 1 | \(\subset,\,\,\supset,\,\,\subseteq,\,\,\supseteq\) | \subset, \supset, \subseteq, \supseteq |
| 포함관계 2 | \(\subsetneq,\,\,\supsetneq\) | \subsetneq, \supsetneq |
| 차집합 | \(\setminus\) | \setminus |
| 상극한 | \(\varlimsup\) | \varlimsup |
| 하극한 | \(\varliminf\) | \varliminf |
| 부등호 | \(\le,\,\,\ge\) | \le, \ge |
| 한정기호 | \(\forall,\,\,\exists \) | \forall, \exists |
| 적분 | \(\int,\,\,\iint,\,\,\iiint,\,\,\oint\) | \int, \iint, \iiint, \oint |
여기서 소개한 명령어는 자주 사용되는 것들만 모은 것입니다. 여기서 소개하지 않은 다양한 기호와 명령어를 보려면 다음 사이트를 참고하기 바랍니다:
5. 추천 사이트
- Dextify (TeX에서 쓰는 기호 찾기)
https://detexify.kirelabs.org/classify.html - LaTeX/Advanced Mathematics (고급 수식 작성 기법)
https://en.wikibooks.org/wiki/LaTeX/Advanced_Mathematics - Tables Generator (TeX이나 HTML에서 표를 그리는 데 도움을 주는 페이지)
https://www.tablesgenerator.com - Will Kwon (TeX 관련 강좌가 있는 블로그)
http://willkwon.dothome.co.kr/index.php/latex-lecture
- 작성자: 이슬비 | iseulbee.com | designeralice＠daum.net
- 최종 수정한 날짜: 2021년 9월 12일
- 이 글을 다른 곳에 스크랩하거나 복제하는 것을 금지합니다. (URI 링크만 허용합니다.)