latex('레이텍')은 세계적으로 가장 보편적으로 사용되는 Markup language 다른 언어를 기술하기 위한 기술적 언어 입니다. 어떤 툴을 가져와서 표현하는가가 이 장에서 다룰 내용입니다. 따라서, 한 번 작성된 언어를 영구적으로 관리할 수 있고, 해당 툴에 얽메이지 않아도 되서 좋습니다. 다음 사이트를 참고하였습니다.

MathJax

mathjax.org에서는 설명서( https://docs.mathjax.org/en/latest/)는 물론,코드 공유도 이루어지고 있습니다. 최신 버전에 대한 내용은 여기에서 확인 할 수 있습니다.

아래 코드를 페이지에 삽입하면 아래와 같은 수식을 표현할 수 있습니다. 

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]

When \\(a \\ne 0\\), there are two solutions to \\(ax^2 + bx + c = 0\\) and they are
\\[x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}\\]

버전

버전에 따라 브라우저에서 바로 실행하면 정상적으로 보이지 않는 경우가 있는데, 이 때는 apache나 IIS를 설치하고, 127.0.0.1 (localhost)로 접속하면 정상적으로 동작하는 것을 확인 할 수 있습니다.
https://jsbin.com/qocicuzazu/edit?html,output에서 바로 테스트 해 볼 수 있습니다.

문법(기호)

latex의 기호Symbol
기호 설명 예시
$ 수식 시작 \$ a^b \$ $ a^b $
# 변수 \\newcommand{\\mycmd}[3] { #1_{#2}^{#3} }
\\mycmd{A}{base}{sup} 		\( \newcommand{\mycmd}[3] { #1_{#2}^{#3} } \mycmd{A}{base}{sup} \)
& 줄 맞춤 \\begin{align}  a&=b\\\\&=c  \\end{align} \(\begin{align}a&=b\\&=c\end{align}\)
% 주석 \\(a^b %comment\\) \(a^b %comment\)
^ 윗첨자 a^b \(a^b\)
_ 아래첨자 a_bcde \(a_bcde\)
{ } 범위 a_{bcde} \(a_{bcde}\)
~ 공백 ab~~cd~e \(ab~~cd~e\)
\\ 예약어호출 pi ~ \\pi \(pi ~ \pi\)

기본 문법

\( ... \) 또는 \[ ... \]를 페이지 중간에 삽입합니다.

수식 문서에 삽입방법
문법 기본 확장
한줄
inline		 \\( ... \\) $ ... $
새 줄
new line		 \\[ ... \\] \$\$ ... \$\$

추가설정

<script>
MathJax = {
  tex: {
    inlineMath: [['$', '$'], ['\\(', '\\)']]
  }
};
</script>
피타고라스 정리 \$ a^2 + b^2 = c^2 \$는 원의 방정식 \$\$ x^2 + y^2 = r^2 \$\$과 흡사합니다.
피타고라스 정리 $ a^2 + b^2 = c^2 $는 원의 방정식 $$ x^2 + y^2 = r^2 $$과 흡사합니다.

줄 바꿈

줄 바꿈을 하기 위해서 수식의 시작과 끝에 \begin{aligned}과 \end{aligned}으로 감싸주어야 합니다. 이후 \\를 이용하여 새 줄을 표시할 수 있습니다. 단, 세로줄을 일치시키기 위해서는 &기호를 사용합니다.

- 사용 안함

\\[ a = b + c \\\\ = d + e = f +g \\\\ = h = i \\]
\[ a = b + c \\ = d + e = f +g \\ = h = i \]

- 줄 바꿈 사용

\\[ \\begin{aligned} a = b + c \\\\ = d + e = f +g \\\\ = h = i \\end{aligned} \\]
\[ \begin{aligned} a = b + c \\ = d + e = f +g \\ = h = i \end{aligned} \]

- & 사용

\\[ \\begin{aligned} a &= b + c \\\\ &= d + e = f +g \\\\ &= h = i \\end{aligned} \\]
\[ \begin{aligned} a &= b + c \\ &= d + e = f +g \\ &= h = i \end{aligned} \]

- 문제점: "=f+g"와 "=i" 의 정렬기준이 맞지 않습니다.

\\[ \\begin{aligned} a &= b + c \\\\ &= d + e &= f +g \\\\ &= h &= i \\end{aligned} \\]
\[ \begin{aligned} a &= b + c \\ &= d + e &= f +g \\ &= h &= i \end{aligned} \]

- "\begin{array}"사용 (c:center, l:left, r:right)

\\[ \begin{array}{lll} a &= b + c \\\\ &= d + e &= f +g \\\\ &= h &= i \end{array}\\]
\[ \begin{array}{lll} a &= b + c \\ &= d + e &= f +g \\ &= h &= i \end{array}\]

색

\\( a^ {\\color{red} b } \\)
\[ a^{\color{red}b} \]

RGB(예:#AAAAAA, #888)또는 예약어(red, blue...)를 사용할 수 있습니다.

크기

글자의 크기

글자 크기는 \tiny, \scriptsize, \footnotesize, \small, \normalsize, \large, \Large, \LARGE, \huge, \Huge로 크기를 조절 할 수 있습니다. 다만 디자인 관점에서 CSS를 이용해서 다루는 것이 더 통일성 있고 수월하게 다룰 수 있습니다.

<mjx-container ...

분수의 크기

분수의 크기
(none) displaystyle textstyle scriptstyle scriptscriptstyle
분수 \(\frac12\)의 분수 \(\displaystyle\frac12\)의 분수 \(\textstyle\frac12\)의 분수 \(\scriptstyle\frac12\)의 분수 \(\scriptscriptstyle\frac12\)의
\\frac12 \\displaystyle\\frac12 \\textstyle\\frac12 \\scriptstyle\\frac12 \\scriptscriptstyle\\frac12

괄호의 크기

괄호의 크기
크기 문법 출력
없음 (none) \((a), ({V_{\max}}^2), (\dfrac12)\) (a), ({V_{\max}}^2), (\dfrac12)
소형 bigl, bigr \(\bigl(a\bigr), \bigl({V_{\max}}^2\bigr), \bigl(\dfrac12\bigr)\) \bigl(a\bigr), \bigl({V_{\max}}^2\bigr), \bigl(\dfrac12\bigr)
중형 Bigl, Bigr \(\Bigl(a\Bigr), \Bigl({V_{\max}}^2\Bigr), \Bigl(\dfrac12\Bigr)\) \Bigl(a\Bigr), \Bigl({V_{\max}}^2\Bigr), \Bigl(\dfrac12\Bigr)
대형 biggl, biggr \(\biggl(a\biggr), \biggl({V_{\max}}^2\biggr), \biggl(\dfrac12\biggr)\) \biggl(a\biggr), \biggl({V_{\max}}^2\biggr), \biggl(\dfrac12\biggr)
초대형 Biggl, Biggr \(\Biggl(a\Biggr), \Biggl({V_{\max}}^2\Biggr), \Biggl(\dfrac12\Biggr)\) \Biggl(a\Biggr), \Biggl({V_{\max}}^2\Biggr), \Biggl(\dfrac12\Biggr)
가변형 left, right \(\left(a\right), \left({V_{\max}}^2\right), \left(\dfrac12\right)\) \left(a\right), \left({V_{\max}}^2\right), \left(\dfrac12\right)

기호

html 예약기호를 \를 이용해서 latex에서 구현 할 수 있습니다. 참고
*클릭하면 클립보드로 복사됩니다.

수식 기호
분류 기호
사칙연산 \(\times\)\(\div\)\(\cdot\)
등호 \(\lt\)\(\le\)\(\gt\)\(\ge\)\(\nless\) \(\ngtr\)\(\nleq\)\(\ngeq\)\(\equiv\) \(\ne\)\(\not\equiv\)
포함관계 \(\in\)\(\subset\)\(\supset\)\(\subseteq\) \(\supseteq\)\(\subsetneq\)\(\supsetneq\)\(\cap\) \(\cup\)
그리스 문자 \(\Gamma\)\(\Delta\)\(\Theta\)\(\Lambda\)\(\Xi\)\(\Pi\) \(\Sigma\)\(\Upsilon\)\(\Phi\)\(\Psi\)\(\Omega\)\(\alpha\) \(\beta\)\(\gamma\)\(\delta\)\(\epsilon\)\(\zeta\)\(\eta\) \(\theta\)\(\iota\)\(\kappa\)\(\lambda\)\(\mu\)\(\nu\) \(\xi\)\(\omicron\)\(\pi\)\(\rho\)\(\sigma\)\(\tau\) \(\upsilon\)\(\phi\)\(\chi\)\(\psi\)\(\omega\)
*첫글자가 대문자면, 대문자표기 **일부 대문자는 동작하지 않음
문자 \(\partial\)\(\hbar\)\(\forall\)\(\exists\)
화살표 \(\leftarrow\)\(\rightarrow\)\(\leftrightarrow\) \(\Leftarrow\)\(\Rightarrow\)\(\Leftrightarrow\) \(\Lleftarrow\)\(\Rrightarrow\)\(\rightleftharpoons\) \(\leftrightharpoons\)\(\mapsto\)
괄호 \(\lfloor\)\(\rfloor\)\(\lvert\)\(\rvert\) \(\lVert\)\(\rVert\)\(\langle\)\(\langle\)
기타기호 \(\sim\)\(\backsim\)\(\infty\)\(\therefore\) \(\because\)\(\dots\)\(\vdots\)\(\ddots\) \(\ast\) \(\dagger\)\(\nabla\) \(\triangle\)\(\square\)\(\angle\)\(\parallel\) \(\perp\)\(\circ\)

함수

함수의 동작 사례
기호 예제 서식
분수 \(\frac{1}{2}\) \frac{1}{2}
제곱근 \(\sqrt{2} \sqrt[n]{A} \) \sqrt{2} \sqrt[n]{A}
합 \({\displaystyle \sum_{k=1}^N k^2}\) {\displaystyle \sum_{k=1}^N k^2}
곱 \({\displaystyle \prod_{k=1}^N k^2} \) {\displaystyle \prod_{k=1}^N k^2}
극한 \({\displaystyle \lim_{n \to \infty}x_n} \) {\displaystyle \lim_{n \to \infty}x_n}
적분 \({\displaystyle \int_{-N}^{N} e^x\, dx } \) {\displaystyle \int_{-N}^{N} e^x\, dx }
선적분 \({\displaystyle \oint_{C} x^3\, dx + 4y^2\, dy } \) {\displaystyle \oint_{C} x^3\, dx + 4y^2\, dy }
아래괄호 \(\underbrace {A, B, C ... } \atop N\) \underbrace {A, B, C ... } \atop N