삶 가운데 남긴 기록 AACII.TISTORY.COM

티스토리 블로그에서 수학 수식 입력 방법 본문

STUDY/Science & Mathematics

티스토리 블로그에서 수학 수식 입력 방법

ALEPH.GEM 2026. 7. 7. 17:09
728x90

티스토리 블로그에서 수학 기호를 LaTeX (레이텍) 문법을 이용해 입력할 수 있습니다.

 

먼저, 티스토리 관리화면에서 → 꾸미기 메뉴  →  스킨편집 메뉴 화면으로 이동합니다.

그러면 html 편집 버튼이 있는데 그 버턴을 누르고 <head> 태그의 맨 하단에 아래 스크립트를 추가로 복사해서 입력하시고 적용하면 됩니다.

  <!-- 수학 수식 입력 스크립트 -->
  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
  });
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>

 

그러면 블로그에서 아래처럼 LaTex 문법으로 입력하면 

\[x^3\]

아래처럼 수학 수식으로 표시가 됩니다.

\[x^3\]

 

 

LaTeX(레이텍) 문법

LaTeX(레이텍)은 주로 수식이나 논문 등 복잡한 학술 문서를 작성할 때 사용합니다.
기본 문법은 역슬래시(\)로 시작하는 명령어와 중괄호({})의 조합으로 이루어집니다.
LaTeX는 특히 수학 기호와 수식을 표현하는 데 강력합니다. 
수식을 작성할 때는 수식의 양옆을 특수 기호로 감싸주어야 합니다. 
 
 
- 본문 내 수식 (Inline): 문장 사이에 수식을 넣을 때는 $ 기호로 감쌉니다.

 

LaTex 문법 입력: 

$x^2 + y^2 = z^2$
 
위 입력이 아래처럼 화면에 수식으로 출력:
$x^2 + y^2 = z^2$
 
 
- 독립된 수식 (Display): 수식을 한 줄 중앙에 크게 강조할 때는 $$로 감쌉니다. 그러면 출력에서 가운데 정렬이 됩니다.
 
LaTex 문법 입력: 
$$\alpha + \beta = \gamma$$

 

위 입력이 아래처럼 화면에 수식으로 출력:

 
$$\alpha + \beta = \gamma$$
 
 
주요 기본 연산자 및 기호: 수학 기호는 대부분 기호의 영어 이름 앞에 \를 붙여서 표현합니다.
 
- 분수: \frac{분자}{분모}를 사용합니다.
LaTex 문법 입력: 
$\frac{a}{b}$

 

위 입력이 아래처럼 화면에 수식으로 출력:

$\frac{a}{b}$

 

- 거듭제곱 및 아래첨자: 위첨자는 ^, 아래첨자는 _를 사용합니다.

LaTex 문법 입력: 

$a^2 + b_1$

 

위 입력이 아래처럼 화면에 수식으로 출력:

 

$a^2 + b_1$

 

- 그리스 문자: 영어 이름을 소문자로 쓰면 소문자, 첫 글자를 대문자로 쓰면 대문자가 됩니다.

LaTex 문법 입력: 

$\pi$, $\Omega$

 

위 입력이 아래처럼 화면에 수식으로 출력:

 

$\pi$, $\Omega$

 

- 곱셈과 나눗셈

LaTex 문법 입력: 

$a \times b$, $a \div b$

 

위 입력이 아래처럼 화면에 수식으로 출력:

 

$a \times b$, $a \div b$

 

- 제곱근

LaTex 문법 입력: 

$\sqrt{x}$

 

위 입력이 아래처럼 화면에 수식으로 출력:

 

$\sqrt{x}$

 

 

자세한 LaTex 문법 참고:

 

 

 

모바일 환경 티스토리 블로그에서 LaTex 수식이 표시되지 않는 문제

PC 환경에서는 위 설정으로 수식들이 정상 표시되지만, 모바일 환경에서는 적용되지 않습니다.

이 문제에 대한 해결책으로 서식을 추가해서 모바일 대응용 MathJax 관련 스크립트를 추가해서 서식으로 저장한 후, 수식을 사용하는 게시물마다 해당 서식을 추가하는 방식으로 해결합니다.

역슬래시 escape 문자 처리 문제 때문에 발생하는 것으로 보입니다.

 

티스토리 블로그 관리 화면으로 가셔서

1. 관리화면 콘텐츠 메뉴

2. 서식관리 메뉴 선택

3. 서식관리 화면에서 서식 쓰기 버튼 클릭

4. 우측 상단 기본모드 selectbox를 선택해 HTML 모드 변경 후 서식 내용에 아래 코드를 입력해 줍니다.

<script> MathJax = { tex: {inlineMath: [['$', '$'], ['\\\\(', '\\\\)']]} }; </script>
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

역슬래시 4개를 써서 2개의 문자 역슬래시가 나오도록 수정했습니다.

이 서식의 제목을 "모바일용 LaTex 적용 서식" 같은 제목으로 저장해 둡니다.

그리고 LaTex 수식을 사용할 게시물에서 해당 서식을 추가하하면 편집 화면에서 게시물에 아래처럼 스크립트가 추가되는데요.

이후 게시물에서 LaTex 수식들을 적게 되면 해당 수식들이 모바일 환경에서도 정상적으로 표시되게 됩니다.

 

 

 

 

 

 

 

 

 
728x90