Home Science Coding Design Etc. AboutMe

HTML에서 수학 수식 (LaTeX) 넣는 방법 - CodeCogs, HostMath, MathJax

Dec. 4, 2020   /   3 mins read   /  

HTML에서 수학 수식 (LaTeX) 넣는 방법

수학 수식을 웹에서 표현하기 위한 방법으로 CodeCogsHostMath, MathJax 총 3가지를 소개합니다.


만약 수식 작성이 한두번만 사용하면 되는 간단한 경우거나, 이미지 파일로 넣기를 원한다면 CodeCogs 또는 HostMath를, 수식 작성할 일이 많거나 사이트 내부에서 바로 적용하시려면 마지막에 소개할 MathJax를 추천드립니다. 😀



1. CodeCogs

CodeCogs의 경우 따로 설치 등의 복잡한 과정 없이 CodeCogs 사이트 에 접속하여 수식을 작성하면, 수식 작성창 밑에 작성한 수식이 실시간으로 보여줍니다. 수식을 다 작성한 뒤 글씨 크기, 굵기, 글꼴, 이미지 포맷등을 설정한 후 아래에 있는 Click here to Download Image 버튼을 누르면 수식을 이미지로 저장할 수 있습니다.

이 후 자신이 원하는 웹에 게시하면 끝. 혹시 HTML code가 필요하다면 하단에 HTML code도 나오니 복사해서 사용하면 됩니다. 이미지로 저장할 수 있으니 PC든, 모바일이든 똑같은 이미지로 보여줄 수 있습니다.

다만 이미지 파일의 단점이라면, PC에서는 적당히 보이는게 모바일에서는 너무 크거나 작게 보일 수도 있을 것 같습니다. 아마도 CSS를 이용하면 해결은 가능할 것 같은데, 저는 불편해서 사용하진 않았어요. 😶




2. HostMath

다음으로 소개할 HostMath의 경우, 앞서 언급한 CodeCogs와 사용법이 거의 비슷합니다. 마찬가지로 HostMath 사이트 를 접속해서 실시간으로 수식을 작성할 수 있고, CodeCogs보단 개인적으로는 UI가 좀 더 깔끔하게 정리되어 있습니다.

다 작성한 수식은 하단의 Show External URL 또는 Show Embeded Code를 선택하면 복사 할 수 있습니다. 혹시라도 앞서 소개드린 CodeCogs에 문제가 있다면, 대안으로 HostMath를 이용하면 될 것 같습니다.




3. MathJax

마지막으로 소개할 방법은 MathJax인데요. 앞의 두 사이트와는 다르게 직접 웹에서 띄울 수 있는 script를 추가하는 방식입니다. 공식 문서는 여기 를 참고하세요.

사용 방법으로는 CDN 서버를 통해 MathJax를 불러오면 되는데요. HTML</body> 앞에 다음과 같이 추가해주면 됩니다.

your_page.html

<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

html에 MathJax를 적용했다면, 다음과 같이 복잡한 수식도 웹상에 바로 표현할 수 있습니다. 또한, 이미지가 아니므로 드래그를 통한 수식 복사도 가능합니다.

$$$i\hbar \frac{\partial}{\partial t} \Psi(r,t)=[\frac{-\hbar ^2}{2m} \nabla ^2 + V(r,t)]\Psi(r,t) $$$


예를 들어, a^2+b^2=c^2+\frac{d}{e} 같은 수식을 작성후, 구분자(수식의 시작 및 종료를 나타냄)로 감싸주면 아래와 같이 표현됩니다.

$$$a^2+b^2=c^2+\frac{d}{e}$$$

이런식으로 수식이 $$a+b = c^2+\frac{d}{e} $$ 글 중간에 있는 경우를 표현하기 위해서는 인라인(inline) 구분자를 사용하면 됩니다.



그리고 초기설정에는 수식 작성 시작과 끝을 알려주는 구분자\\( 와 \\) 또는 \\[ 와 \\] 으로 지정돼 있는데요. 개인적으론 다소 불편하길래 기본 구분자$$$ 로, 인라인(inline) 수식의 경우에는 $$ 바꾸었습니다.

저처럼 시작과 끝을 표시하는 구분자 (delimiter)를 변경하려면 아래와 같은 코드를 추가하시면 됩니다.

your_page.html

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: { inlineMath: [['$$', '$$']], displayMath: [['$$$', '$$$']] }
    });
</script>
<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

더 자세한 옵션들은 공식문서의 Configuration Options 을 참고해주세요.

혹시라도 막히는 부분이 있거나, 잘못된 내용이 있으면 댓글 남겨주세요. 읽어주셔서 감사합니다. 😀