7.6 math 요소(Element)
math 요소는 W3C에서 권고한 수학적인 마크업 언어인 MathML(Mathematical Markup Language)을 HTML 문서에서 사용할 수 있도록 하는데 사용되는 요소입니다. 여기서는 HTML5 웹페이지에 math 요소를 이용하여 수학적인 수식을 표현할 수 있는지 간단한 예제를 2개의 예제를 다루어보고자 합니다. 먼저 기본적으로 HTML5 페이지 내에서 math 요소를 이용하여 MathML을 사용하기 위해서는 다음과 같은 형식을 이용하여 접근을 합니다.
<math>
MathML 코드 작성
</math>
이제 예제를 해볼까요?
첫 번째 예제는 “ + = “을 math 요소와 MathML을 이용하여 나타내는 예제입니다.
일단 코드부터 작성합니다. 메모장을 열어서 HTML5 문서의 기본 태그들을 작성한 후 body 요소의 시작
과 마침 태그 내에 다음과 같이 코드를 작성합니다.
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<msup>
<mi>a</mi><mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mi>b</mi><mn>2</mn>
</msup>
<mo>=</mo>
<msup>
<mi>c</mi><mn>2</mn>
</msup>
</mrow>
</math>
</body>
위 코드에 대해서 요약하여 정리하면 다음과 같습니다.
|
요소 |
기능 |
|
mrow |
표현식 전체를 그룹화하는데 사용 |
|
msup |
지수함수를 표현하는 것과 같이 어깨 글자(여기서는 지수)를 나타낼 때 사용하며 첫 번째 나오는 요소가 밑(base)이 되고 뒤에 나오는 요소가 어깨글자(지수)가 됩니다. |
|
mi |
변수, 함수, 상수를 나타낼 때 사용 |
|
mn |
숫자를 나타낼 때 사용 |
|
mo |
더하기, 빼기, 곱하기 등과 같은 연산자에 사용 |
작성이 완료되었으면 "mathEx.html"로 저장하고 FireFox로 열어보면 다음과 같이 원하는 형태로
웹페이지에 표시가 되는데 현재 대부분의 다른 브라우저는 제대로
표시되지 않습니다.
다음으로 행렬식을
나타내는 예제를 알아봅니다. 이번 예제에서 나타낼 행렬식은 2x2 행렬의
단위행렬입니다. 메모장을 열어서 HTML5 문서의 기본 태그들을 작성한 후 body 요소의 시작과 마침
태그 내에 다음과 같이 코드를 작성합니다.
<body>
<math>
<mrow>
<msub>
<mi>I</mi><mn>2</mn>
</msub>
<mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mn>1</mn></mtd>
<mtd><mn>0</mn></mtd>
</mtr>
<mtr>
<mtd><mn>0</mn></mtd>
<mtd><mn>1</mn></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>
</body>
위 코드에 대해서 요약하여 정리하면 다음과 같습니다.
|
요소 |
기능 |
|
msub |
아래 첨자를 나타낼 때 사용하는 요소로 첫 번째 나오는 요소가 밑(base)이 되고 뒤에 나오는 요소가 아래 첨자가 됩니다. |
|
mfenced |
괄호로 숫자나 문자 등을 묶을 때 사용하며 open 속성을 이용하여 괄호의 시작을, |
|
mtable |
행렬이나 테이블을 나타낼 때 사용 |
|
mtr |
행렬이나 테이블의 한 행을 나타낼 때 사용 |
|
mtd |
행렬의 한 원소 혹은 테이블의 하나의 셀을 나타낼 때 사용 |
"matrixEx.html"로 저장한 후 Firefox로 열어보면 다음과 같이 그럴듯하게 단위 행렬을 보여줍니다.
끝으로 수학적인 표현을 웹페이지에 나타내고자 하는 분들은 “http://www.w3.org/TR/MathML/” 참고해서
공부를 해보시는 것도 괜찮을 것같다는 생각을 해봅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8. Tabular Data Elements (0) | 2013.07.31 |
|---|---|
| 7.7 svg 요소(Element) (0) | 2013.07.31 |
| 7.5 iframe 요소(Element) (0) | 2013.07.31 |
| 7.4 PDF 파일을 embed 요소(Element)를 이용하여 임베딩 (0) | 2013.07.31 |
| 7.3 object, param 요소(Element) (3) | 2013.07.31 |
