[HTML / Tistory] 웹 페이지에 수식(기호) 넣기

웹페이지에서 미/적분, 루트 등을 넣기 위해서 별도의 코드를 사용합니다.

스크립트 코드 작성

...
<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' async></script>
</head>
...

head 태그 내부에 아래에 작성된 스크립트 태그를 복사하여 넣어줍니다.

티스토리의 경우 [설정 - 꾸미기 - 스킨편집 - html 편집]으로 들어가 마찬가지로 나타나는 html 코드에 head 태그 부분에 삽입하시면 됩니다.

삽입 후 [적용] 버튼을 누르고 빠져나옵니다.

수식 작성 방법

출력할 내용을 문법에 맞게 $$사이에 작성해주시면 됩니다.

- 예제

<body>
    <p>분수 : $\frac{1}{2}$</p>

    <p>제곱 : $3^{2}$</p>

    <p>미분 : $\displaystyle \lim_{h \to 0}\frac{f(a+h)-f(a)}{(a+h)-a}$</p>

    <p>행렬 : $\frac{\mathrm{1} }{\mathrm{ad-bc}}\begin{bmatrix}
    d & -b \\
    -c & a \\
    \end{bmatrix}$</p>
</body>

티스토리의 경우 별도의 html 작성으로 모드의 변경 없이도 기본 모드에서 작성으로 제대로 결과물이 나오는 것을 확인할 수 있습니다.

에디터로 수식을 코드로 변환

코드 작성 방법을 매번 외우고 작성하기 번거롭다면 웹 에디터를 통해서 간단하게 적용할 수 있습니다.

https://www.codecogs.com/latex/eqneditor.php

Online Equation Editor - standalone

Download svg gif png pdf emf HTML URL URL Encoded LaTeX pre TiddlyWiki phpBB WordPress 5 pt 9 pt 10 pt 12 pt 18 pt 20 pt 50 80 100 110 120 150 200 300 Transparent White Black Red Green Blue Inline Block

www.codecogs.com

웹 에디터에서 원하는 기호를 선택하면 그에 맞는 코드가 생성이 되며, 결과를 아래에서 간편하게 확인 할 수 있습니다.

작성이 완료된 코드를 복사하여 웹 페이지 코드에 붙여넣기 한 후 앞 뒤에 $표시를 추가적으로 작성하시면 됩니다.

'Web > etc' 카테고리의 다른 글

[Three.js] Three.js 설치 및 기본 사용법 (1)	2023.09.09
[Maven] Mvnrepository 사용법 (with Spring) (0)	2023.05.06
[Bootstrap] Footer 화면 하단에 배치(고정)하기 (0)	2023.03.16
[manifest] manifest.json 파일 Key 정리 (0)	2022.07.21
[PWA] 프로그레시브 웹 앱이란? (0)	2022.07.18

AngelPlayer`s Diary