성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] 아쉽게도, 커뮤니티는 아니고 개인 블로그입니다. ^^
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
[정성태] 만드실 수 있습니다. 단지, Unity 엔진 내의 스크립트와 W...
[공진영] 안녕하세요 좋은글 감사합니다. 현재 제가 wpf로 관제 모...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <h1 style='font-family: Malgun Gothic, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>HTML에서 수학 관련 기호/수식을 표현하기 위한 방법 - MathJax.js</h1> <p> 사실 제가 수학을 잘 못해서 ^^ 수학 관련 글을 쓰는 경우는 거의 없습니다. 그래도 가끔씩 재미삼아 해보기는 하는데 그 때마다 블로그에 간단한 수학 식을 써야 할 때면 그래픽 이미지를 첨부해야 하는 불편함이 있었습니다. 예를 들어, 다음의 글에서도 그래픽으로 수학 수식을 저장해 놓고 첨부한 경우입니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 황금비율 증명 ; <a target='tab' href='http://www.sysnet.pe.kr/2/0/1312'>http://www.sysnet.pe.kr/2/0/1312</a> </pre> <br /> 그런데 오늘 우연히 다음의 블로그를 방문하게 되었는데요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 알고리즘 대회에 필요한 수학 ; <a target='tab' href='https://algospot.com/wiki/read/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98_%EB%8C%80%ED%9A%8C%EC%97%90_%ED%95%84%EC%9A%94%ED%95%9C_%EC%88%98%ED%95%99'>https://algospot.com/wiki/read/%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98_%EB%8C%80%ED%9A%8C%EC%97%90_%ED%95%84%EC%9A%94%ED%95%9C_%EC%88%98%ED%95%99</a> </pre> <br /> 놀랍게도 내부에 표현된 수학 기호 및 수식들이 이미지가 아닌 텍스트 형식이었습니다. (물론 ^^ 행렬도 표현할 수 있고.)<br /> <br /> IE 개발자 도구를 통해 소스를 살펴 보니 다음과 같이 span 태그의 class값이 mathjax-preview와 "math/tex" 타입의 스크립트 태그가 연이은 형태로 구성되어 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <script type="math/tex">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</script> </pre> <br /> 위의 태그가 HTML 페이지에서 다음과 같이 바뀌어서 보이게 되는 것입니다. (네이버 블로그에서는 그냥 문자열로 출력됩니다.)<br /> <br /> <script type="math/tex">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</script> <br /> <br /> 어떻게 된 일인지 파악하기 위해 해당 페이지에 링크된 자바스크립트 목록을 보니 MathJax.js가 눈에 띄는데요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js"></script> </pre> <br /> MathJax.js 파일의 내용에는 제 블로그에도 무료로 사용할 수 있다는 사실을 알려주고 있습니다. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > /* * /MathJax.js * * Copyright (c) 2009-2014 The MathJax Consortium * * Licensed under the <span style='color: blue; font-weight: bold'>Apache License</span>, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ </pre> <br /> 좀 더 정보를 찾아보니 MathJax.js가 Latex 수식을 지원한다는군요. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 블로그(예: 티스토리)에서 latex (라텍) 수식 쓰기 ; <a target='tab' href='http://soojob.tistory.com/31'>http://soojob.tistory.com/31</a> </pre> <br /> 사용법을 간단하게 정리하면 다음의 HTML 페이지로 보여드릴 수 있습니다. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <!DOCTYPE html> <head> <span style='color: blue; font-weight: bold'><script type="text/x-mathjax-config"> MathJax.Hub.Config({ extensions: [], jax: ["input/TeX", "output/HTML-CSS"], preRemoveClass: "mathjax-preview", "HTML-CSS": { availableFonts: ["TeX"] } }); </script> <script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js"></script></span> </head> <body> <span style='color: blue; font-weight: bold'><span class="mathjax-preview">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</span><script type="math/tex">\begin{pmatrix}2 & 3 \\1 & 2\end{pmatrix}</script></span> </body> </html> </pre> <br /> 오호~~~ 멋집니다. ^^ 이제 제 블로그 글에서도 가볍게 Latex 수식을 쓸 수 있게 되었습니다. ^^<br /> <br /> 참고로, 다양한 수식에 대한 TeX 표기 예제는 다음의 글을 참조하세요. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > Mathematical Notation: LaTeX, Mathematica, HTML Entities, Unicode ; <a target='tab' href='http://hyperpolyglot.org/math-notation'>http://hyperpolyglot.org/math-notation</a> </pre> <hr style='width: 50%' /><br /> <br /> 문제는 스크립트 태그를 넣을 수 없는 네이버 블로그인데요. 구글에서 TeX에 대해 착한 서비스를 하고 있군요. ^^<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > 네이버 블로그에서 수식입력기 없이 수식 입력하기 ; <a target='tab' href='http://yut951121.blog.me/100184779927'>http://yut951121.blog.me/100184779927</a> </pre> <br /> 그래서 다음과 같이 아예 이미지로 출력 결과가 나옵니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; background-color: #fbedbb; overflow: auto; font-family: Consolas, Verdana;' > <img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=<span style='color: blue; font-weight: bold'>x=\frac{-b\pm%20\sqrt{b^2%20-4ac}}{2a}</span>"> <img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=x=\frac{-b\pm%20\sqrt{b^2%20-4ac}}{2a}"> <br /> <img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=<span style='color: blue; font-weight: bold'>\begin{pmatrix}+2+%26+3+\\+1+%26+2+\end{pmatrix}</span>"> <img alt='TeX' src="http://chart.apis.google.com/chart?cht=tx&chl=\begin{pmatrix}+2+%26+3+\\+1+%26+2+\end{pmatrix}"> <br /></pre> </p><br /> <br /><hr /><span style='color: Maroon'>[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
8328
(왼쪽의 숫자를 입력해야 합니다.)