인도 루피 기호(₹)는 웹 페이지에서 자주 사용되는 통화 기호 중 하나입니다. 하지만 이 기호는 모든 브라우저에서 동일하게 지원되지 않기 때문에, 환경에 따라 깨진 글자나 빈칸으로 표시될 수 있습니다.
1. 유니코드 문자 엔티티 사용하기
루피 기호의 유니코드 코드 포인트는 U+20B9입니다. HTML에서는 다음과 같이 16진수 문자 엔티티를 사용하여 표현할 수 있습니다.
₹
위 코드를 HTML 문서에 입력하면 루피 기호(₹)가 출력됩니다. 다만, 일부 구형 브라우저나 특정 폰트 환경에서는 해당 글리프가 포함되어 있지 않아 정상적으로 표시되지 않을 수 있습니다.
2. Font Awesome 아이콘 활용하기
브라우저 호환성 문제를 해결하는 가장 확실한 방법은 Font Awesome 같은 아이콘 폰트 라이브러리를 사용하는 것입니다. Font Awesome은 대부분의 브라우저에서 안정적으로 작동하며, 루피 기호를 일관된 스타일로 보여줍니다.
먼저 웹 페이지의 <head> 영역에 Font Awesome CSS 파일을 연결합니다.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
그다음, 루피 기호를 표시하고 싶은 위치에 다음 태그를 추가합니다.
<i class="fa fa-inr"></i>
이렇게 하면 <i> 태그가 있는 자리에 루피 기호가 아이콘 형태로 나타납니다. 필요에 따라 CSS로 크기와 색상을 자유롭게 조절할 수 있다는 점도 장점입니다.
3. 10진수 문자 엔티티 사용하기
16진수 대신 10진수 문자 엔티티를 사용할 수도 있습니다. U+20B9의 10진수 값은 8377이므로, 아래 코드 역시 동일한 결과를 출력합니다.
₹
마무리
정리하면, 간단하게 표시할 때는 유니코드 문자 엔티티(₹ 또는 ₹)를 사용하고, 브라우저 호환성과 디자인 일관성이 중요하다면 Font Awesome의 fa-inr 아이콘을 활용하는 것이 좋습니다. 프로젝트의 요구 사항에 맞는 방법을 선택해 적용해 보세요.