웹 페이지에 수식이 들어가 있는 것을 보신 적이 있으신가?
보시고 어떻게 느끼셨는가?
보통 웹 페이지에 수식을 넣을 땐, (통용되는 형식의) 텍스트로 표시하거나, 수식을 아예 그림으로 저장해서 넣곤 한다.
예로, 근의 공식을 한 번 보자:
- 텍스트 (형식은 내 마음대로 정했다):
- (-b +- (b^2 - 4ac)^(1/2)) / (2a)
- 그림:
뭐.. 각 방법에 장단점이 있겠지만, 일단 텍스트는 읽기 힘들고, 그림은 해상도 문제도 있고..
이 블로그를 처음 만들 때에도 그래서 고민을 좀 했다.
그래서 찾아낸 게 MathJax이다.
(이 블로그에서 MathJax를 이용한 글은 여기를 참고.)
여기선 간단하게, HTML 파일을 만들 때 MathJax를 쓰는 법에 대해 설명하겠다.
(아, 참고로 MathJax의 홈페이지의 documentation에도 나오는 내용이다. (영어다.))
일단 기본적인 HTML file은 이렇게 생겼다:
<html>
<head>..</head>
<body>..</body>
</html>
- 일단
html태그 사이에 HTML 코드가 들어간다. head태그 사이에 뭐랄까.. 일종의 설정 같은 것들이 들어간다.body태그 사이에 실제 웹페이지에 표시될 내용들이 들어간다.
그래서.. 일단 근의 공식(만)을 표시하는 웹페이지의 html 코드는 다음과 같다:
<html>
<head>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
${-b \pm \sqrt{b^2 - 4ac}}\over{2a}$ <br />
</body>
</html>
위의 HTML 코드를 간단하게 설명하자면:
head태그 사이의 내용은 MathJax를 쓰기위한 설정이다. (그러니 만약 MathJax를 쓰려면 그 내용을 그대로 복사-붙여넣기 하자.)body태그 사이의 내용을 보면 아시겠지만, 수식은 LaTeX의 수식 입력 형식을 그대로 쓰면 된다.
웹 브라우저상에서는 이렇게 나온다:
이 페이지에 다시 (MathJax를 이용해서) 근의 공식을 넣어보면:
−b±√b2−4ac2a
위의 식을 마우스로 드래그해 보라.
숫자나 기호들을 따로 선택할 수 있을 것이다.
그리고, 브라우저 설정에서 화면 확대를 해보라.
그림으로 저장된 수식들은 그림이 깨질 텐데, MathJax로 나타낸 수식은 전혀 깨지지 않음을 알 수있다.
댓글 없음:
댓글 쓰기