3rd insight : : Topic/: : Blog

티스토리에 수학 기호, 수식 쓰는 방법 [LaTeX /MathJax]

Jay.P Morgan 2023. 12. 14. 17:37

 

티스토리말고도 다른 웹사이트에서도 사용이 가능한 방법입니다.

이 방법으로 웹에 수식을 삽입할 수 있습니다. 

 

 

  1. LaTeX란

 

LaTeX(라텍)은 텍스트 문서를 작성하기 위한 과학 및 수학 분야에서 주로 사용되는 조판 시스템입니다.

LaTeX은 문서의 구조, 서식, 수학식, 참조 및 인용과 같은 다양한 기능을 지원하는 강력한 도구입니다.

LaTaX는 과학 및 기술 문서를 작성할 수 있는 기능(수식 등)이 포함되어있으며, 거의 모든 문서를 작성할 수 있습니다. 

고품질 문서 조판 프로그램이며, 라이선스 비용이 없는 무료프로그램입니다.

 

https://www.latex-project.org/

 

LaTeX - A document preparation system

LaTeX – A document preparation system LaTeX is a high-quality typesetting system; it includes features designed for the production of technical and scientific documentation. LaTeX is the de facto standard for the communication and publication of scientif

www.latex-project.org

 
 
 
 

  2. MathJax 

 

  2.1  MathJax란?

 

MathJax는 JavaScript 라이브러리이며 마찬가지로 오픈 소스 프로그램입니다. 

입력으로 MathML, TeX, ASCII Math을 사용할 수 있으며 HTML+CSS, SVG, MathML의 형식으로 출력합니다. 

https://www.mathjax.org/

 

MathJax

Beautiful math in all browsers.

www.mathjax.org

 

MathJax와 LaTaX문법을 이용해 티스토리에 수식을 작성해보겠습니다. 

 

 

스킨 편집에 들어간 후 

html 편집에 진입합니다. 

그 후 대충 3번 줄 쯤에 있는 <head> 태그 아래줄에 다음의 코드를 삽입합니다.

( </head> 전 줄이면 어디든 상관 없습니다.)  

<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.0.1/es5/tex-mml-chtml.js"></script>

코드를 삽입하면 적용은 끝납니다. 

 

 

 

  2.2  MathJax 사용 방법

 

1. 문장 중간에 수식을 삽입하는 형태 

\( 수식 \)

 

위 "수식" 부분에 TeX문법을 이용하여 ��2+��+�=0 처럼 글쓰는 중간에 삽입하는형태로 사용할 수 있습니다. 

 

2. 화면 중간에 수식을 보여주는 형태 

\[ 수식 \]

 ��2+��+�=0

위 처럼 수식을 화면 한 가운데에 삽입이 가능합니다. 


위 "MathJax 사용 방법" 을 작성하면서 캡쳐한 이미지입니다.  

위 이미지를 참고하여 블로그를 포스팅할때 MathJax를 사용하시면 됩니다.


 

  2.3  간단한 LaTeX 예제

 

유명한 식의 예제입니다. 

 

�=−�±�2−4��2�

\( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)

 

��2+��+�=0 

\( ax^2 + bx + c = 0 \) 

 

�≠0

\( a \ne 0 \)

 


  2.4  편리한 응용사이트

 

1. webdemo math 사이트 

TeX 문법을 익히지 않아도 수식 삽입이 가능합니다. 

https://webdemo.myscript.com/views/math/index.html#

 

math

 

webdemo.myscript.com

수식을 그리면 자동으로 인식하여 TeX 문법을 알려줍니다. 

 

 


2. 한글과 컴퓨터 수식 편집기

https://www.malangmalang.com/trial/f7e32293a5f944bab7dacfbec1896513

 

말랑말랑플랫폼

더 쉽고, 더 색다르고, 더 재미있게! 한컴 말랑말랑플랫폼! 추억의 산성비 게임, 게임으로 즐기는 한컴 타자연습, 다양하고 재밌는 업무/생활 서비스

www.malangmalang.com

로그인/ 회원가입을 해야 사용할 수 있지만, 한글과 컴퓨터에서 만든 편집기이고 편리하게 사용할 수 있습니다. 

 

- 23년 기준 서비스 종료되었습니다. 


mathjax Live Demo

https://www.mathjax.org/#demo

 

MathJax

Beautiful math in all browsers.

www.mathjax.org

미리 실시간으로 문법을 연습, 검사할 수 있습니다.  

 

 

  3. LaTeX 수식 작성 문법 정리

 

  3.1  기호

  •   연산자 (Operators)
\cdot 곱셈기호 / 내적 (inner product)
\times 곱셈기호 / 외적 (cross product)
\pm 플러스 마이너스 (plus minus)
\circ circle / 원 (degree 등을 나타내기 위한 위 첨자로 사용하려면 ^\circ를 이용하면 된다.)
\circledast convolution / 원 안의 별표 (asterisk)
\odot 원 안의 곱셈기호
\oplus 원 안의 덧셈기호
\otimes 원 안의 곱셈기호

 

  • 관계성 기호 (Relation symbols)
\neq not equal / 같지 않음
\geq greater than or eual to / 이상
\leq less than or equal to / 이하
\sim similarity / 유사, 비슷
\simeq asymptotic equality / 유사, 비슷
\approx approximately equal / 유사, 비슷
\propto proportional / 비례

 

  • 화살표 (Arrows)
\rightarrow right arrow / 오른쪽 화살표
\leftarrow left arrow / 왼쪽 화살표
\uparrow up arrow / 위쪽 화살표
\downarrow down arrow / 아래쪽 화살표
\leftrightarrow bidirectional arrow / 양방향 화살표
\Leftrightarrow bidirectional arrow / 양방향 화살표

 

  • 집합 기호 (Set operations)
\cup union / 합집합
\cap intersection / 교집합
\in 원소 포함
\notin 원소 포함되지 않음
\ni 원소 포함
\subset subset / 부분집합
\subseteq subset / 부분집합
\supset supset, subset / 부분집합
\supseteq supset, subset / 부분집합

 

  • 미적분 (Calculus)
\partial partial derivative / 편미분 기호
\nabla nabla / del / 미분 기호 / 역삼각형
\Delta large delta / 미분 기호 / 삼각형
\int integral / 적분

 

  • Others
\angle angle / 각
\therefore therefore
\because because

 

  3.2  수식의 정렬

  • 왼쪽정렬(기본)

$로 수식의 앞 뒤를 감싸면 수식을 작성할 수 있다.
별다른 조치를 취하지 않고 수식을 작성하면 기본적으로 왼쪽 정렬이 된다.
일반 문장 사이에 수식을 넣는 것도 가능하다.

$x+y=1$
$x$는 $y$와의 합이 $1$이다.


 와의 합이 이다.

 

 

  • 중앙정렬

$$ 사이에 수식을 적으면 중앙 정렬이 된다.
원래는 $$가 어떻게 붙든 상관없지만, velog에서는 반드시 여는 $$와 닫는 $$는 다른 줄에 있어야 한다.
다음은 가능한 세 가지 형태이다.

$$
x+y=1$$

$$x+y=1
$$

$$
x+y=1
$$

 

 

  • 특정 문자를 기준으로 정렬

일반적으로 수식을 전개할 때 =기호를 기준으로 정렬한다.
하지만 그냥 중앙정렬을 하면 다음과 같이 보인다.

$$
f(x)=ax^2+bx+c\\
g(x)=Ax^4
$$

이 때 aligned 심볼을 통하여 특정 문자를 기준으로 정렬할 수 있다.
정렬 기준은 &를 기준으로 정렬된다.

$$
\begin{aligned}
f(x)&=ax^2+bx+c\\
g(x)&=Ax^4
\end{aligned}$$

 

 

  3.3  수식 내에서의 줄바꿈

수식에서 Enter key를 누른다고 해서 줄바꿈이 되지 않는다. \\를 입력하면 줄바꿈을 할 수 있다.

$$x+y=3\\-x+3y=2$$

 

 

 

  3.4  수식 내에서의 띄어쓰기

 

 

수식 안에서는 띄어쓰기를 해도 적용되지 않는다. 다음과 같이 명시적으로 띄어쓰기를 입력하여야 한다.

$local minimum$(띄어쓰기 적용 X)
$local\,minimum$(띄어쓰기 한 번)
$local\;minimum$(띄어쓰기 두 번)
$local\quad minimum$(띄어쓰기 네 번)

(띄어쓰기 적용 X)
(띄어쓰기 한 번)
(띄어쓰기 두 번)
(띄어쓰기 네 번)

 

 

  3.5  첨자

윗 첨자는 ^ 기호로, 아랫 첨자는 _ 기호로 적는다.
오른쪽에 한 글자가 자동으로 첨자로 들어가게 되고 두 글자 이상을 적용하려면 { }(중괄호)로 감싸면 된다.

$a_1, a^2, a_1^2$

$y_i=x_i^3+x_{i-1}^2+x_{i-2}$

 

 

 

  3.6  분수 표기법

분수 표기법에는 두 가지 방법이 있다.

\over를 사용하면 \over를 기준으로 왼쪽에 있는 수식은 모두 분자, 오른쪽에 있는 수식은 모두 분모로 들어가게 된다.
\frac을 사용하게 되면 첫 번째 문자는 분자, 두 번째 문자는 분모로 들어가게 된다. 두 문자 이상이라면 { }(중괄호)를 통하여 묶어주면 된다.

$s^2+2s+s\over s+\sqrt s+1$

$\frac{1+s}{s(s+2)}$

 

 

 

  3.7  절대값 표기법

일반적으로 절대값을 표기할 때는 키보드 위의 | 문자를 사용하게 된다.
하지만 이렇게 하면 분수와 같이 큰 객체에 맞게 resizable한 기호를 사용할 수 없다.
그럴 땐 \vert와 \left, \right를 통하여 좌우 기호를 명시해주면 된다.

$\vert x \vert$
$\left\lvert \frac{s^2+1}{s^3+2s^2+3s+1} \right\rvert$

 

 

 

  3.8  sin, log 등의 기호를 세워서 표기

단어 앞에 \를 붙이게 되면 똑바로 글자를 쓸 수 있다.
Markdown에서 명시 되어 있지 않은 수학 단어라면 오류가 발생한다.

$\log_{10}{(x+1)}$
$A\sin(bx+c)$

 

 

 

  3.9  극한/시그마 표기법

그냥 \sum과 \lim 심볼을 사용하게 되면 다음과 같이 linear하게 표기된다.

$\lim_{s\rarr\infin}{s^2}$$
$\sum_{i=0}^{\infin}{(y_i-t_i)^2}$

이럴 땐 \displaystyle을 앞에 명시하면 정상적으로 표시된다. 기본형인 linear 형태는 \textstyle 명시하면 된다.

$\displaystyle\lim_{s\rarr\infin}{s^2}$
$\displaystyle\sum_{i=0}^{\infin}{(y_i-t_i)^2}$

 

 

 

  3.10  벡터 표기법

원래는 LaTex 문법에서 벡터는 \vec 심볼을 사용한다.
하지만, 현재 \vec 심볼을 벨로그에서 사용할 수 없는 것으로 보인다.
\vec 대신 \overrightarrow 심볼을 사용하시면 화살표가 조금 더 크지만 올바로 출력된다.

$\vec{a}$
$\overrightarrow{a}$

 

 

 

  3.11  행렬 표기법

matrix 심볼을 통하여
&로 열을 구분하고, \\로 행을 구분한다.

$\begin{matrix}1&2\\3&4\\ \end{matrix}$
$\begin{pmatrix}1&2\\3&4\\ \end{pmatrix}$
$\begin{bmatrix}1&2\\3&4\\ \end{bmatrix}$
$\begin{Bmatrix}1&2\\3&4\\ \end{Bmatrix}$
$\begin{vmatrix}1&2\\3&4\\ \end{vmatrix}$
$\begin{Vmatrix}1&2\\3&4\\ \end{Vmatrix}$





 

 

 

  3.12  조각함수 등 case 표기법

 


조각함수와 같은 case 표기법

cases 심볼을 통하여 작성할 수 있다.

$\vert x\vert=
\begin{cases}
-x,\;if\;x<0\\
+x,\;if\;x\geq0
\end{cases}$

 

 

 

 

  3.13  Font Type

실수 집합 () 등에서 자주 쓰는 문자

\mathcal{RQSZ}

 

\mathbb{RQSZ}

정리해두고 필요할 때 바로 바로 찾아서 참고하자.

LaTex 수식 작성법 정리 (velog.io)

 

LaTex 수식 작성법 정리

LaTeX(라텍)은 텍스트 문서를 작성하기 위한 과학 및 수학 분야에서 주로 사용되는 조판 시스템이다.

velog.io

 

Reference