HTML5 Math 태그 사용법

1. Math 태그란?

Math 태그는 웹 페이지에 수학 표현식을 표시하는 데 사용됩니다. MathML(Mathematical Markup Language)을 사용하여 수학 기호와 수식을 표현할 수 있습니다.

2. 기본 구조

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <mi>x</mi>
        <mo>=</mo>
        <mfrac>
            <mrow>
                <mo>-</mo>
                <mi>b</mi>
                <mo>±</mo>
                <msqrt>
                    <msup>
                        <mi>b</mi>
                        <mn>2</mn>
                    </msup>
                    <mo>-</mo>
                    <mn>4</mn>
                    <mi>a</mi>
                    <mi>c</mi>
                </msqrt>
            </mrow>
            <mrow>
                <mn>2</mn>
                <mi>a</mi>
            </mrow>
        </mfrac>
    </mrow>
</math>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 기본 수식 예제 -->
<div class="basic-example">
    <h3>기본 수식 예제</h3>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mrow>
            <mi>a</mi>
            <mo>+</mo>
            <mi>b</mi>
            <mo>=</mo>
            <mi>c</mi>
        </mrow>
    </math>
</div>

<!-- 분수 예제 -->
<div class="fraction-example">
    <h3>분수 예제</h3>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <mfrac>
            <mn>1</mn>
            <mn>2</mn>
        </mfrac>
    </math>
</div>

<!-- 제곱근 예제 -->
<div class="sqrt-example">
    <h3>제곱근 예제</h3>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
        <msqrt>
            <mi>x</mi>
        </msqrt>
    </math>
</div>

<style>
    /* 기본 수식 예제 스타일 */
    .basic-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 분수 예제 스타일 */
    .fraction-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 제곱근 예제 스타일 */
    .sqrt-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .basic-example,
        .fraction-example,
        .sqrt-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 기본 수식 스타일 */
    math {
        font-size: 1.2em;
        margin: 1em 0;
    }

    /* 블록 수식 스타일 */
    math[display="block"] {
        display: block;
        text-align: center;
        margin: 1em 0;
    }

    /* 인라인 수식 스타일 */
    math[mode="inline"] {
        display: inline;
        vertical-align: middle;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        math {
            font-size: 1em;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 경우에만 MathML을 사용합니다.
• 복잡한 수식은 라이브러리를 사용합니다.
• 수식 렌더링을 최적화합니다.
• 캐싱을 활용합니다.

7. 검증 및 테스트

Math 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 수식 렌더링 테스트
• 성능 테스트
• 접근성 검사 도구 사용