티스토리 블로그에 수학 기호 표기, 함수, 분수, 행렬, 미분, 적분, 수식 입력하기 LaTex MathJax 스크립트

티스토리 블로그에서 수학 기호나 복잡한 수식을 깔끔하게 표시하는 것은 매우 중요합니다. 특히 수학, 과학, 공학 관련 블로거들에게 수식 표현은 필수적인 기능입니다. 이를 쉽게 구현할 수 있는 방법 중 하나는 LaTeX와 MathJax 스크립트를 활용하는 것입니다.

LaTeX는 수학 기호와 수식을 표현하는 전문적인 시스템으로, MathJax는 이를 웹 페이지에 적합하게 출력해주는 자바스크립트 라이브러리입니다. 이번 포스팅에서는 티스토리 블로그에 수학 기호와 다양한 수식을 LaTeX와 MathJax를 사용해 쉽게 입력하는 방법을 소개하겠습니다.

Step 1. 스크립트 복사 후 HTML 편집에 붙여 넣기

첫 번째 단계는 MathJax 스크립트를 티스토리 블로그에 추가하는 것입니다. 이를 통해 블로그 포스트 내에서 수식 표현이 가능해집니다. 아래의 과정을 따라 진행해 보세요.

티스토리 관리 페이지에 접속한 후, 상단 메뉴에서 꾸미기 탭을 클릭합니다.
스킨 편집을 선택하고, 왼쪽 메뉴에서 HTML 편집을 클릭합니다.
<head> 태그와 </head> 태그 사이에 MathJax 스크립트를 추가합니다.

복사할 스크립트는 다음과 같습니다:

<script>
(function () {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
  document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>

위 스크립트를 <head> 태그가 끝나기 전, 편한 위치에 삽입해 주시면 됩니다.

Step 2. 수식 표기법 알아보기

MathJax를 사용해 티스토리 블로그에서 수식을 표기할 때는 기본적으로 LaTeX 수식을 사용합니다. 수식을 입력할 때는 $$ 기호로 시작하고 끝내면 됩니다. 예를 들어, 아래와 같이 수식을 입력할 수 있습니다.

$$ E = mc^2 $$

위 코드는 아인슈타인의 질량-에너지 등가 방정식을 나타내며, $$ E = mc^2 $$
이를 블로그에 삽입하면 수식이 깔끔하게 출력됩니다.

Step 3. 다양한 수식 표현 예시

1. 제곱근과 지수 표현

제곱근이나 지수를 표현할 때는 LaTeX의 기본 수식을 사용하면 됩니다. 예를 들어:

$$ \sqrt{b^3 - 4ac} $$

이 수식은 b³ - 4ac의 제곱근을 나타냅니다. $$ \sqrt{b^3 - 4ac} $$

이는 복잡한 수식도 매우 간단하게 표현할 수 있다는 장점을 보여줍니다.

2. 분수 표기

분수를 표기할 때는 \frac{} 명령어를 사용합니다. 예시:

$$ \frac{4z^3}{16} $$

위 수식은 4z³을 16으로 나눈 값을 나타내며, 복잡한 분수도 간단하게 표현할 수 있습니다.

3. 그리스 문자

수학에서 자주 사용하는 그리스 문자도 MathJax로 쉽게 표현할 수 있습니다. 대표적인 문자로는 알파, 베타, 감마 등이 있으며, 다음과 같이 입력합니다:

$$ \alpha, \beta, \gamma, \Gamma $$

위 수식은 알파(α), 베타(β), 감마(γ), 그리고 대문자 감마(Γ)를 나타냅니다.

4. 행렬 표기

복잡한 수학 수식을 다루다 보면 행렬을 사용해야 할 때도 있습니다. 행렬은 LaTeX에서 매우 쉽게 표기할 수 있습니다. 예를 들어:

$$ \begin{array} {rrr} 
1 & 2 & 3 \\ 
4 & 5 & 6 \\ 
7 & 8 & 9 
\end{array} $$

위 수식은 3x3 행렬을 나타냅니다.
$$ \begin{array} {rrr}
1 & 2 & 3 \\
4 & 5 & 6 \\
7 & 8 & 9
\end{array} $$

이처럼 여러 개의 숫자나 기호를 배열하는 것도 MathJax로 간편하게 구현할 수 있습니다.

Step 4. 미분과 적분 수식

미분

미분 수식 역시 MathJax를 사용해 간편하게 표현할 수 있습니다. 다음은 미분의 예시입니다:

$$ \frac{d}{dx} \left( x^2 \right) = 2x $$

$$ \frac{d}{dx} \left( x^2 \right) = 2x $$
위 수식은 x²의 미분을 나타내며, 결과는 2x입니다.

적분

적분 수식도 MathJax로 쉽게 표시할 수 있습니다. 다음은 적분의 예시입니다:

$$ \int_{a}^{b} f(x) dx $$

$$ \int_{a}^{b} f(x) dx $$
위 수식은 a에서 b까지 f(x)의 적분을 나타냅니다.

Step 5. 다양한 수식 예제들

수식을 좀 더 다양하게 활용할 수 있는 예시들로는 극한, 행렬 곱셈, 복잡한 적분 등이 있습니다. 예를 들어:

1. 극한

$$ \lim_{a \rightarrow b} \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

$$ \lim_{a \rightarrow b} \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

이 수식은 이차 방정식의 근의 공식을 극한 형태로 표현한 것입니다.

2. 복잡한 적분

$$ \int_{a}^{b} \begin{bmatrix}a & b \\c & d \end{bmatrix} \begin{bmatrix}a & b \\c & d \end{bmatrix} $$

$$ \int_{a}^{b} \begin{bmatrix}a & b \c & d \end{bmatrix} \begin{bmatrix}a & b \c & d \end{bmatrix} $$

이 수식은 행렬의 적분을 나타내며, LaTeX를 통해 복잡한 수식도 쉽게 표현할 수 있다는 것을 보여줍니다.

Step 6. 실시간 미리보기 사이트 활용하기

수식을 입력하기 전, 미리 확인하고 싶을 때는 HostMath나 CodeCogs 같은 사이트를 이용해볼 수 있습니다. 이러한 사이트들은 LaTeX 수식을 입력하면 실시간으로 수식이 어떻게 표시되는지 미리보기 기능을 제공합니다. 특히 복잡한 수식을 작성할 때 매우 유용합니다.

HostMath: 실시간으로 LaTeX 수식을 미리 볼 수 있으며, 이미지를 다운로드하거나 HTML 코드를 복사해 사용할 수 있습니다.
CodeCogs: 다양한 수식 기호와 구조를 지원하며, 수식 입력 후 HTML 코드로 변환하거나 이미지로 저장할 수 있는 기능을 제공합니다.

결론

MathJax와 LaTeX를 활용하면 티스토리 블로그에서 수학 기호와 복잡한 수식을 깔끔하게 표현할 수 있습니다. 스크립트만 간단히 추가하면 다양한 수식을 입력할 수 있으며, 이를 통해 수학, 과학, 공학과 관련된 블로그 포스팅을 더 전문적이고 시각적으로 보기 좋게 만들 수 있습니다. 또한 HostMath와 CodeCogs 같은 미리보기 사이트를 활용하면, 수식을 쉽게 확인하고 적용할 수 있어 더욱 편리합니다.

키워드

티스토리 블로그, LaTeX, MathJax, 수식 입력, 수학 기호, 함수, 분수, 행렬, 미분, 적분, HTML

저작자표시 비영리 변경금지

'Dev > script' 카테고리의 다른 글

애드센스 광고 무효클릭 방지 코드 (0)	2024.07.21
자바스크립트 기초대사량 계산기 - 해리스-베네딕트 기초대사량 계산법 (0)	2024.06.03
크롬 확장프로그램 background.js에서 현재 열려있는 탭의 페이지의 DOM에 접근해 특정 값을 popup.html로 전달하기 (0)	2024.05.24
JAVASCRIPT RGB 색상표 (0)	2024.05.19
1678. Goal Parser Interpretation leetcode javascript 해석 및 풀이 (0)	2024.01.03

티스토리 블로그에 수학 기호 표기, 함수, 분수, 행렬, 미분, 적분, 수식 입력하기 LaTex MathJax 스크립트