티스토리말고도 다른 웹사이트에서도 사용이 가능한 방법입니다.
이 방법으로 웹에 수식을 삽입할 수 있습니다.
1. LaTeX란
LaTeX(라텍)은 텍스트 문서를 작성하기 위한 과학 및 수학 분야에서 주로 사용되는 조판 시스템입니다.
LaTeX은 문서의 구조, 서식, 수학식, 참조 및 인용과 같은 다양한 기능을 지원하는 강력한 도구입니다.
LaTaX는 과학 및 기술 문서를 작성할 수 있는 기능(수식 등)이 포함되어있으며, 거의 모든 문서를 작성할 수 있습니다.
고품질 문서 조판 프로그램이며, 라이선스 비용이 없는 무료프로그램입니다.
https://www.latex-project.org/
2. MathJax
2.1 MathJax란?
MathJax는 JavaScript 라이브러리이며 마찬가지로 오픈 소스 프로그램입니다.
입력으로 MathML, TeX, ASCII Math을 사용할 수 있으며 HTML+CSS, SVG, MathML의 형식으로 출력합니다.
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#
수식을 그리면 자동으로 인식하여 TeX 문법을 알려줍니다.
2. 한글과 컴퓨터 수식 편집기
https://www.malangmalang.com/trial/f7e32293a5f944bab7dacfbec1896513
로그인/ 회원가입을 해야 사용할 수 있지만, 한글과 컴퓨터에서 만든 편집기이고 편리하게 사용할 수 있습니다.
- 23년 기준 서비스 종료되었습니다.
mathjax Live Demo
미리 실시간으로 문법을 연습, 검사할 수 있습니다.
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}
정리해두고 필요할 때 바로 바로 찾아서 참고하자.
Reference
'3rd insight : : Topic > : : Blog' 카테고리의 다른 글
티스토리 블로그에 인용구를 넣자 (HTML, CSS 서식 만들기) (0) | 2023.10.23 |
---|