HTML5 수학 연산자 완벽 가이드 – 엔티티로 수학 기호 표현하기

HTML5 수학 연산자란?

HTML5의 수학 연산자(Mathematical Operators)는 HTML 문서 안에서 수학 기호나 기술 분야의 특수 기호를 화면에 표시하기 위해 사용됩니다. 웹 브라우저는 <, > 같은 일부 문자를 태그로 해석하기 때문에, 이러한 기호들을 그대로 입력하면 의도대로 출력되지 않을 수 있습니다.

이런 문제를 해결하기 위해 HTML에서는 엔티티 이름(Entity Name)을 사용합니다. 만약 해당 기호에 엔티티 이름이 존재하지 않는다면, 엔티티 번호(Entity Number), 즉 10진수(decimal) 또는 16진수(hexadecimal) 코드 참조를 대신 사용할 수 있습니다.

문법(Syntax)

수학 연산자를 HTML에 삽입하는 기본 문법은 다음과 같습니다.

① 엔티티 이름 사용:

&operatorName;

② 엔티티 번호(10진수) 사용:

&#operatorDecimalCode;

③ 엔티티 번호(16진수) 사용:

&#xoperatorHexadecimalCode;

예제

아래 예제는 다양한 HTML5 수학 연산자를 웹 페이지에 출력하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML5 수학 연산자 데모</h1>
<p>주요 수학 기호 모음</p>
<p>&minus; -- 마이너스(−) 기호</p>
<p>&deg; -- 도(°) 기호</p>
<p>&#8721; -- 시그마(Σ) 기호</p>
<p>&gt; -- 크다(>) 기호</p>
<p>&ge; -- 크거나 같다(≥) 기호</p>
<p>&lt; -- 작다(<) 기호</p>
<p>&le; -- 작거나 같다(≤) 기호</p>
<p>&#8747; -- 적분(∫) 기호</p>
</body>
</html>

실행 결과

HTML5 수학 연산자 완벽 가이드 – 엔티티로 수학 기호 표현하기

자주 사용되는 수학 엔티티 정리

실무에서 자주 쓰이는 주요 수학 기호와 그에 대응하는 엔티티를 아래 표로 정리했습니다.

기호	설명	엔티티 이름	엔티티 번호
−	마이너스	−	−
×	곱하기	×	×
÷	나누기	÷	÷
°	도(degree)	°	°
Σ	시그마(합계)	-	∑
∫	적분	-	∫
√	제곱근	√	√
∞	무한대	∞	∞
≠	같지 않음	≠	≠
≈	근사값	≈	≈