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

• 목록

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

수학 수식을 웹에서 표현하기 위한 방법으로 CodeCogs와 HostMath, 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를 적용했다면, 다음과 같이 복잡한 수식도 웹상에 바로 표현할 수 있습니다. 또한, 이미지가 아니므로 드래그를 통한 수식 복사도 가능합니다.

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

이런식으로 수식이 a+b=c2+dea+b=c2+de 글 중간에 있는 경우를 표현하기 위해서는 인라인(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 을 참고해주세요.

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

Share Post: