현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

x^2+4x+4=0 을 브라우저에서 표현하려면 어떻게 해야하나요?

mywin의 이미지
글쓴이: mywin / 작성시간: 목, 2015/04/09 - 4:24오후

x^2+4x+4=0

MathML을 사용하면 위의 표현식을 브라우저에 그대로 출력할 수 있을것이라 생각했는데, 그대로 출력되 않고 구조만 그대로 출력됩니다. 통상 보아오던 xml이 그런식이지만 저런 구조를 어떻게 사람이 알아들을 수 있죠? 브라우저는 위에 언급한 방식으로 보여주어야만 사람이 이해하기 쉬운 수식이 되죠. xml 코드는 다음과 같습니다.

<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd" 
[<!ENTITY % Schema.prefix "s">]
>
<math xmlns="http://www.w3.org/1998/Math/MathML" xmlns:s="http://www.w3.org/2001/XMLSchema-instance" s:schemaLocation="http://www.w3.org/1998/Math/MathML <a href="http://www.w3.org/Math/XMLSchema/mathml2/mathml2.xsd">
<mrow>
" rel="nofollow">http://www.w3.org/Math/XMLSchema/mathml2/mathml2.xsd">
<mrow>
</a>	<mrow>
		<msup>
			<mi>x</mi>
			<mn>2</mn>
		</msup>
		<mo>+</mo>
		<mrow>
			<mn>4</mn>
			<mo>&InvisibleTimes;</mo>
			<mi>x</mi>
		</mrow>
		<mo>+</mo>
		<mn>4</mn>
	</mrow>
	<mo>=</mo>
	<mn>0</mn>
</mrow>
</math>

요소 구조 자체만 출력됩니다. 사람이 이해할 수 있는 수식으로 출력이 되도록 하려면 뭐가 필요한 건가요. 혹시 css가 없어서 그럴까요? css는 간단한 디자인 정도만 표현할 수 있는 것으로 압니다. 저 수식을 표현할 수는 없을 것 같고요. 뭘로 표현하나요? 이를 이해해서 표현할 수 있는 프로그램이라는 것이 레퍼런스에서 말하는 응용프로그램이라는 것인가요? 브라우저에서는 뭘 이용해서 저 수식을 사람이 이해할 수 있는 방식으로 표현하는 것이고요? 책에서는 너무 원론적으로만 간단히 말해서 잘 와닿지 않습니다. 뭔지좀 알려주세요.

이건 위의 질문과 상관이 없는 질문입니다. 이 사이트에서 제공되는 code 태그를 사용해서 스크립트를 언급했는데, 언급하지 않은 것이 추가되고 그러네요. 태그를 그대로 표현하려면 여기서 어떤 태그를 사용해야 하는건가요?

Forums: 
프로그래밍 QnA
shint의 이미지

글쓴이: shint / 작성시간: 금, 2015/04/10 - 7:12오전

국민학생도 보고. 이해하면 됩니다.
http://webdemo.myscript.com/#/demo/equation

----------------------------------------------------------------------------
젊음'은 모든것을 가능하게 만든다.

매일 1억명이 사용하는 프로그램을 함께 만들어보고 싶습니다.
정규 근로 시간을 지키는. 야근 없는 회사와 거래합니다.

각 분야별. 좋은 책'이나 사이트' 블로그' 링크 소개 받습니다. shintx@naver.com

klara의 이미지

글쓴이: klara / 작성시간: 목, 2015/04/09 - 9:24오후

이전에 올리신 xhtml에 대한 질문과도 같은 맥락입니다만, 브라우저는 HTML을 렌더링하기 위한 도구이지 아무 XML이나 뿌려주는 도구가 아닙니다.
XHTML이 XML이라고 브라우저가 모든 XML을 알아서 다 처리해준다는 게 아닙니다.
SVG가 XML이라고 SVG편집 도구가 모든 XML을 그려주지 않는것과 마찬가지입니다.
브라우저에 따라서는 자체적으로 MathML을 처리해주는 브라우저도 있으니 그런 브라우저를 사용하시거나 수식을 표현하는게 목적이라면 Mathjax같은 브라우저상에서 수식을 뿌려주는 도구를 이용하시면 됩니다.

esrevinu의 이미지

글쓴이: esrevinu / 작성시간: 금, 2015/04/10 - 6:54오전

올리신 XML이 오류가 납니다. math 태크 안에 a 태그가 있어서...
고쳐서 파이어폭스로 열어 봤는데 수식이 보입니다.

https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/MathML_Torture_Test

https://developer.mozilla.org/ko/docs/Web/MathML/Authoring

MathML이 두 종류군요. Content MathML과 Presentation MathML.
Presentation MathML은 파이어폭스 같은 몇 브라우저가 지원하는데 Content MathML은 지원하는 브라우저가 없는 것 같습니다.
XSLT stylesheet라는 것이 있어서 변환을 할 수 있는데 ctop.xsl이 Content MathML을 Presentation MathML로
변환해 줍니다. 이걸 그냥 xml에 stylesheet로 지정해 주면 됩니다. 그럼 파이어폭스에서는 content MathML도 볼 수 있습니다.
Presentation MathML을 XHTML과 CSS로 변환해 주는 것도 있는 것 같습니다. 크로미움에서 테스트해 보았는데 크로미움 버그인지
이상하게 나오네요.
http://www.w3.org/Math/XSL/Overview-tech.html

https://code.google.com/p/web-xslt/wiki/Overview
이 페이지를 보면 pmathml.xsl 작동하는 예시를 보여 달라는 댓글이 있고 그 답으로
http://www.nag.co.uk/numeric/FL/nagdoc_fl22/xhtml/FRONTMATTER/manconts.xml
링크를 걸어 놓았네요.
들어가서 보니 크로미움에서도 수식이 보이네요.

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.