티스토리 수식입력 메뉴에 의한 첨자입력 오류

티스토리에서는 티스토리 블로그에서 포스팅을 작성할 경우에 수식입력의 편리를 위해 상단 메뉴중 수식입력 메뉴를 제공하고 있습니다.

아래의 그림과 같이 상단 메뉴중에 수식입력이라는 메뉴가 보일 것입니다.

 

 

 

첨자의 오류를 설명드리기 위하여 임의의 숫자로 예를 들어 설명하여 보겠습니다.

임의의 숫자로 20의 -9승 이라는 숫자를 입력해야 한다고 가정해 보겠습니다.

 

상단메뉴의 수식입력 도구를 이용하여 입력하면

이런식으로 나오게 됩니다.

 

 

 

수식편집기상의 입력은 모든 것이 오류없이 입력되었고 결과 모습도 정상적으로 보이는데 편집창에 입력이 되고 나면 위쪽으로 볼록하게 튀어 나와 있어 매우 보기에 좋지 않은 모습으로 있습니다.

대부분은 포스팅을 발행하고 나면 브라우저에 따라 약간씩의 차이가 있을 수는 있지만 정상적으로 표시되긴 하지만 근본적으로 이 첨자수식은 이미지라는 점입니다.

그 이유는 HTML 편집창에 보시면 아시겠지만 아래의 이미지 처럼 수식편집기에서 편집한 모습이 이미지화 되어 저장된다음 다시 이미지로 삽입되는 메카니즘을 가지고 있는 듯 하였습니다.

 

 

 

저의 경우에 이 부분의 수정을 위하여 HTML 보기에서 수식편집기에 의해 삽입된 이미지 태그 소스 대신에 <SUP></SUP> 태그를 사용하였습니다.

SUP 태그는 Superscript 의 줄임말로 Superscript는 어깨문자, 위첨자라는 의미입니다.

같은 방식으로 아래 첨자의 경우에는 아래첨자라는 뜻을 가진 영어인 Subscript의 줄임말을 써서 SUB 라는 태그를 사용하게 됩니다.

 

즉, 20<SUP>-9</SUP> 라고 코드를 고치면 20^-9 이렇게 나오고, 20<SUB>-9</SUB> 라고 코드를 고치면 20_-9 이렇게 나오게 됩니다.

이미지 파일을 불러오게 되는 구조를 가진 티스토리의 수식편집기에 의한 첨자입력 방식보다 소스코드가 훨씬 간결해지는 잇점이 있습니다.

 

이제 한문장에서 두개의 경우를 비교하기 위해 수식편집기에 의한 입력과 SUP태그를 직접입력한 경우의 외관을 나란히 써서 비교해 보도록 하면 아래와 같은 모습으로 나오게 됩니다.

 

이 문장에서 처음에 나오는 것이 수식편집기, 두번재가 태그입력으로 

, 20^-9  와 같이 나오게 됩니다.

물론 선택은 사용하시는 분의 마음입니다.