HTML5에서 MathML 활용하기: 수학 공식 표현 예제

HTML5와 MathML의 만남

HTML5의 HTML 문법은 <math>...</math> 태그를 사용하여 문서 안에 MathML(Mathematical Markup Language) 요소를 직접 작성할 수 있도록 지원합니다. MathML은 W3C에서 제정한 XML 기반 마크업 언어로, 복잡한 수학 기호와 공식을 웹 페이지에 구조적으로 표현할 수 있게 해줍니다.

브라우저 호환성

대부분의 최신 웹 브라우저는 MathML 태그를 정상적으로 렌더링합니다. 대표적으로 파이어폭스(Firefox)는 오랫동안 MathML을 완벽하게 지원해 왔으며, 사파리(Safari) 역시 우수한 지원 수준을 보여줍니다. 반면 크롬(Chrome)은 한동안 지원이 중단되었지만, 이후 다시 MathML 지원을 도입하며 개선되고 있습니다.

만약 사용 중인 브라우저에서 MathML이 올바르게 표시되지 않는다면, 가장 안정적인 환경인 최신 버전의 파이어폭스를 사용하는 것을 권장합니다.

실전 예제: 피타고라스 정리

아래 예제는 HTML5 문서 안에서 MathML을 사용하여 유명한 피타고라스 정리(a² + b² = c²)를 표현한 것입니다.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pythagorean theorem</title>
    </head>
    <body>
        <math xmlns="https://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>
</html>

코드 구조 살펴보기

위 코드에서 사용된 주요 MathML 요소는 다음과 같습니다.

<mrow>: 여러 식을 하나의 그룹으로 묶어주는 컨테이너 역할을 합니다.
<msup>: 위첨자(거듭제곱)를 나타냅니다. 첫 번째 자식은 밑(base), 두 번째 자식은 지수(exponent)입니다.
<mi>: 변수나 함수 이름 같은 식별자(identifier)를 표기합니다. 예제에서는 a, b, c가 해당됩니다.
<mn>: 숫자(number) 리터럴을 나타냅니다.
<mo>: +, = 등의 연산자(operator)를 표기합니다.

이 코드를 브라우저에서 실행하면 일반 텍스트가 아닌, 수학 교과서처럼 자연스러운 형태의 수식으로 렌더링되는 것을 확인할 수 있습니다. 이처럼 MathML을 활용하면 이미지 없이도 접근성이 뛰어난 수학 콘텐츠를 웹에 게시할 수 있습니다.