수학 관련 포스팅을 쓰게 되면 블로그에 복잡한 수학 기호들을 적을 필요가 있다.
그 방법에 대해 알아볼 것이다.
일반적으로 다양한 교과서, 논문, 출판물에서 수식입력을 할 때
$\LaTeX$라는 도구를 이용하곤 한다.
그리고 웹상에서 이 $\LaTeX$ 도구를 이용할 수 있게 해주는 도구가 또 있는데
MathJax가 바로 그것이다.
홈페이지에 사용법이 자세하게 나와있으나 아마 여러분들은 그것을 읽고 해석하기가 귀찮아서
검색을 통해 찾아온 것일 것이다. 그래서 필자가 어느 정도 읽어본 후 한글로 정리해보았다.
MathJax는 웹용 LaTeX Display Engine 으로
쉽게 말해서 웹상에서 $\LaTeX$ 문법을 이용하여 수식을 표현할 수 있게 해주는 도구이다.
이를 이용하여 블로그 글쓰기에서 다음 코드를 입력하면
$$ \oint_{C} \vec{F} \cdot d\vec{s} $$
$$ \lim_{n \to \infty} \sum_{k = 1}^{n} \dfrac{1}{k} $$사용자들에겐 아래와 같은 수식이 보여진다
$$ \oint_{C} \vec{F} \cdot d\vec{s} $$
$$ \lim_{n \to \infty} \sum_{k = 1}^{n} \dfrac{1}{k} $$
MathJax는 HTML 편집이 가능한 블로그에서만 사용 가능한것으로 보이며
네이버는 시도해보지 않았지만 일단 티스토리는 보다시피 사용 가능하다.
현재 2021-1-14일 기준 버전 3.1.2가 나와있으며 3버전 말고 2버전도 쓸 수 있으나
이왕이면 최신 버전을 쓰는게 좋을것이다.
MathJax 사용법
블로그의 HTML 편집창을 연다.
여기서는 티스토리 블로그 기준으로 설명하려고 한다.
티스토리에서 HTML 편집을 하기 위해 본인 블로그의 관리 화면으로 들어간다.
그리고 스크롤을 내려 왼쪽 메뉴 바에서 스킨 편집 항목을 찾아서 들어간다.
html 편집을 클릭한다.
그러면 아래 사진과 같이 코드들이 잔뜩 적힌 창이 뜨는데 옆으로 쭉 늘려 보기 좋게 만든 후
사진 밑의 1번, 2번, 3번 코드를 순서대로 복사해서 <head>와 </head>가 있는 공간 사이에 붙여넣는다.
그리고 적용을 하자.
1번 코드
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
2번 코드
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
3번 코드
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
}
};
</script>
1번 코드는 크롬, 사파리, 엣지, 인터넷익스플로러 등 다양한 브라우저의 다양한 버전에서 작동하도록 하는 코드이다.
2번 코드는 MathJax를 불러오는 핵심 코드이다.
3번 코드는 쉽게 말하면 작성할 때 좀 더 편하게 해주는 코드라고 생각하면 된다. 자세한건 밑에서 설명한다.
이제 MathJax를 이용해 LaTeX 문법을 사용하여 수식을 작성할 준비가 완료되었다.
수식 입력하는 방법
이제 글쓰기로 들어가서 수식을 입력해보자.
LaTeX 수식은 일반 텍스트랑 구분하기 위해 특수한 문자로 코드를 둘러싸야한다.
크게 두 가지 방식이 있다.
블록 입력 방식
블록 입력 방식을 이용하려면 수식 코드를 \$\$ \$\$ 로 둘러싸면 된다.
다음 예제를 보자.
아아... 이것은 [예제] 라고 부르는 것이다.
$$ \lim_{x \to 2} 3x = 6 $$ 이것은 식이다.이 내용을 작성하여 미리보기 하거나 포스트를 업로드 하면 아래와 같이 보인다.
아아... 이것은 [예제] 라고 부르는 것이다.
$$ \lim_{x \to 2} 3x = 6 $$ 이것은 식이다.
블록 입력방식의 특징은 다음과 같다.
1. 식이 원형 모습 그대로 잘 표현된다.
2. 식 하나가 무조건 한 줄을 독점한다. (위의 예제 두번째 줄에서 "이것은 식이다" 가 같은 줄에 작성되었음에도 띄워져 표기되었다.)
따라서 이 방식은 중요한 식 하나를 가운데 띄워 집중시키거나 식 원형 그대로인 모습을 보여주고 싶을 때 이용하면 좋다.
인라인 입력방식
인라인 입력방식을 이용하려면 코드를 $ \text{ \ ( \ ) } $ 로 둘러싸면 된다.
(참고로 $ \text{ \ } $ 는 \랑 같은 글자이다. /가 아니다.)
이것이 번거로울 수 있다. 하지만 위에서 언급한 3번 코드를 추가했다면 \$ \$ 로 둘러싸도 된다.
다음 예제를 보자.
코이츠와... [예제]다.
\( \sum_{n = 0}^10 n^4 \)
이 방식은 이렇게 $ \int_{3}^{5} 7x^{2} dx $ 글 도중에 수식을 입력할 수 있다는 장점이 있지..그리고 이 내용을 입력하면 다음과 같이 보인다.
코이츠와... [예제]다.
\( \sum_{n = 0}^{10} n^4 \)
이 방식은 이렇게 $ \int_{3}^{5} 7x^{2} dx $ 글 도중에 수식을 입력할 수 있다는 장점이 있지..
인라인 입력방식의 특징은 다음과 같다.
1. 한 줄에 수식이 들어가야 하므로 일부 수식이 약간 변형되어 표시된다. (예제의 시그마와 적분 기호를 보듯이)
2. 일반 텍스트 작성 도중에 코드가 들어갈 수 있다.
따라서 인라인 입력방식은 설명을 하는 과정에서 수식이 필요한 경우에 사용하면 좋다고 할 수 있겠다.
만약 인라인 모드처럼 작성 글 도중에 식을 표현하면서도 식이 변형되지 않기를 원한다면
인라인 코드 맨 앞에 \\displaystyle 을 적어주면 된다.
$ \displaystyle \int_{5}^{x^{2}} f(t)dt $ 이렇게 말이다.$ \displaystyle \int_{5}^{x^{2}} f(t)dt $ 이렇게 말이다.
$\LaTeX$ 기본 수식과 예제들
1. 각종 기호
$$ \le, \geq, \neq, \infty, \alpha, \beta, \pi, \in, \ni $$$$ \le, \geq, \neq, \infty, \alpha, \beta, \pi, \in, \ni $$
2. 사칙연산
$$ + - \times \div $$$$ + - \times \div $$
3. 루트
$$ \sqrt{x}, \sqrt[3]{y} $$$$ \sqrt{x}, \sqrt[3]{y} $$
4. 지수, 로그, 삼각함수
$$ a^{x}, \log_{b}{y} $$
$$ \sin{x}, \cos{x}, \tan{x} $$$$ a^{x}, \log_{b}{y} $$
$$ \sin{x}, \cos{x}, \tan{x} $$
5. 분수식
$$ \dfrac{분자}{분모} $$$$ \dfrac{분자}{분모} $$
6. 벡터
$$ \vec{a}, \overrightarrow{AB} $$$$ \vec{a}, \overrightarrow{AB} $$
7. 극한, 시그마, 적분
$$ \lim_{x \to a} f(x) $$
$$ \sum_{n = 0}^{N} g(n) $$
$$ \int_{a}^{b} h(x) dx $$
$$ \iiint_{E} f(x,y,z) dV $$
$$ \oint_{S} P dx $$$$ \lim_{x \to a} f(x) $$ $$ \sum_{n = 0}^{N} g(n) $$ $$ \int_{a}^{b} h(x) dx $$ $$ \iiint_{E} f(x,y,z) dV $$ $$ \oint_{S} P dx $$
예제
$$ \int_{a}^{b} f(x) dx = \lim_{n \to \infty} \sum_{k = 1}^{n} f(a+ \dfrac{b-a}{n}k)\dfrac{b-a}{n} $$
팁으로 인라인 방식으로 극한을 쓸 때 $ \lim_{x \to 0} f(x) $ 이런식으로
$ x \to 0 $ 이 극한 옆에 쓰여지게 되는데 이게 거슬린다면
다음과 같은 방법으로 극한에 한정해서 인라인에서도 블록 방식처럼 식이 제대로 표기되도록 만들 수 있다.
$ \lim\limits_{x \to 0} f(x) $$ \lim\limits_{x \to 0} f(x) $
8. 수식 묶음, 줄맞춤, 행렬
\\begin{} 과 \\end{} 를 이용하며 \\두 개로 줄을 띄운다.
줄맞춤의 경우에는 & 기호를 기준으로 정렬된다.
$$ \begin{cases} 식1 \\ 식2 \\ 식3 \end{cases} $$
$$ \begin{align} f(x) = &x^2 - 2x + 1 \\ = &(x-1)^{2} \end{align} $$
$$ \begin{bmatrix} 1 & 2 \\ 3 & 1 \\ 5 & -3 \end{bmatrix} $$$$ \begin{cases} 식1 \\ 식2 \\ 식3 \end{cases} $$ $$ \begin{align} f(x) = &x^2 - 2x + 1 \\ = &(x-1)^{2} \end{align} $$ $$ \begin{bmatrix} 1 & 2 \\ 3 & 1 \\ 5 & -3 \end{bmatrix} $$
9. 태그 달기
$$ y = (x-1)^{2} \tag{식1} $$$$ y = (x-1)^{2} \tag{식1} $$
10. 수식 내 띄어 쓰기
일반적으로 수식 내부에서 스페이스바로는 띄어 쓰기를 할 수 없다.
따라서 다음과 같은 코드로 띄어쓰기를 한다.
약간 띄어 쓰기 $$ \; $$
조금 길게 띄어 쓰기 $$ \quad $$안띄어 쓰면 다음과 같이 보기 불편하다.
$$ \int \cos{\theta}\sin{\theta} d\theta $$
띄어 쓰면 다음과 같이 가독성이 올라간다.
$$ \int \cos{\theta} \; \sin{\theta} \; d\theta $$
'기타' 카테고리의 다른 글
| 레이어, 요술봉 기능 있는 무료 포토샵 Paint.net (0) | 2022.01.19 |
|---|---|
| 티스토리 블로그에서 더보기(접은글) 상자 만들기 (0) | 2022.01.19 |
| [YNK 연고대 편입수학 모의고사] (by 네냐플) 리뷰 (2) | 2021.10.29 |
| [오류를 스스로 찾아보자!] (by 네냐플) 리뷰 (5) | 2021.09.02 |
| 서울대, 카이스트, 고려대 미적분학 기출 모음 사이트 (2) | 2021.01.26 |