HTML <sub>와 <sup> 태그

<!-- 수학 공식 -->
<p>
    피타고라스의 정리: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
</p>

<!-- 화학식 -->
<p>
    물의 화학식: H<sub>2</sub>O
</p>

<!-- 각주 -->
<p>
    이 연구는 2024년에 발표되었습니다<sup>1</sup>.
</p>

<!-- 1. 수학 블로그 -->
<article class="math-blog">
    <h2>이차 방정식</h2>
    <p>
        이차 방정식의 일반형: ax<sup>2</sup> + bx + c = 0
    </p>
    <p>
        근의 공식: x = (-b ± √(b<sup>2</sup> - 4ac)) / 2a
    </p>
</article>

<!-- 2. 과학 블로그 -->
<article class="science-blog">
    <h2>화학 반응식</h2>
    <p>
        2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O
    </p>
    <p>
        CO<sub>2</sub> + H<sub>2</sub>O → H<sub>2</sub>CO<sub>3</sub>
    </p>
</article>

<!-- 3. 스타일링 예제 -->
<style>
.math-blog sup {
    color: #2196f3;
    font-size: 0.8em;
    font-weight: 600;
}

.science-blog sub {
    color: #e91e63;
    font-size: 0.8em;
    font-weight: 600;
}

.footnote sup {
    background-color: #f5f5f5;
    padding: 1px 4px;
    border-radius: 3px;
    color: #666;
}
</style>

<p>
    이 연구는 여러 학자들에 의해 검증되었습니다<sup class="footnote">2,3</sup>.
</p>