html에서 루트(제곱근) 입력하기(html)

HTML에서는 제곱근 문자를 √로 나타낼 수 있다.

문자들을 제곱근 안에 묶기 위해서는  뒤에 따라오는 문자들을 span으로 묶어준후 overline을 적용해야 한다.

예시)
&radic;<span style="text-decoration:overline;">&nbsp;n+1&nbsp;</span>

적용하면 다음과 같다.

√ n+1 


그렇다면, 이 상태에서 n에 지수를 적용한 한다면 어떻게 될까?

예시)

&radic;<span style="text-decoration:overline;">&nbsp;n²+1&nbsp;</span>

----------결과----------

√ n²+1 


지수 위에 튀어나온 overline이 신경쓰인다;;;;

그러나 해결할 방법이있다.

바로 table을 쓰면 된다!!!

table을 사용해서 2개의 줄과 2개의 열을 만들고 윗줄 왼쪽칸에는 &ndsp;을 채워넣고, 오른쪽에는 ______이런 적당한 길이의 underline을 채워 넣는다.

물론, 아랫줄 왼쪽 칸에는 제곱근 기호가 있어야 하고, 오른쪽에는 묶고 싶은 문자들이 들어있어야 한다. 또한 이때는 overline을 적용해서도 안된다.

예시)


<table style="border-spacing:0px; border-width:0px; font-family:verdana;">//table의 경계선이 있어선 안돼며 폰트는 다양한 브라우저에서 문제가  발생하지 않도록 arial 또는 verdana로 해준다.
  <tr>
    <td>
&nbsp;
    </td>
    <td>
_______
    </td>
  </tr>
  <tr>
    <td style="padding:0px; font-size:larger"> // 2줄을 생성함으로서 생기는 어색한 공백을 매꾸기 위해 폰트 사이즈를 키운다.
&radic;
    </td>
    <td style="padding:0px;">
&nbsp;n² + 1&nbsp;
    </td>
  </tr>
</table>

---------결과---------

	_______
√	n2 + 1

그래도 뭔가 어색하다... 붕 떠있는게 싫다면 다른 방법을 쓸 수 있다.

<sup>태그 대신에 <span> 태그를 이용해서 지수의 크기와 위치를 직접 조절하는 것인데, 지수로 쓰일 문자의 크기를 줄인다음 수직으로 올려서 배치해서 마치 지수처럼 보이게 하는 방법이다  다음 예시를 보자.


예시)

&radic;<span style="text-decoration:overline">
(<i>n</i><span style="font-size: 8px;vertical-align:+45%;">1.5</span>+
<i>n</i><span style="font-size: 8px;vertical-align:+45%;">-1.5</span>)&nbsp;</span>
//n을 기울여서 표기하기 위해 <i>tag가 사용 되었다. 대부분의 출판물에서 수식은 기울여진 문자를 사용한다. 별 이유는 없다.


----------결과----------


√ (n1.5+ n-1.5) 


이제 더이상 어색하진 않지만 이방법은 높이를 잘못 맞췄을때 이러한 문제가 나타난다.

√ (n1.5+ n-1.5) 

또한 폰트를 적당히 줄여야 한다. 아래 결과물은 지수가 잘 보이질 않는다.

√ (n1.5+ n-1.5) 

따라서 이 방법을 쓸때는 직접 입력해보고 결과를 보고 높이와 폰트크기를 바꿔가면서 적당한 위치를 찾는 수고를 필요로 한다.

이 방법들을 응용하고 확장하여 근의 공식을 만들어 보자;

<table style="font-family:verdana;">
  <tr>
    <td>&minus;b &plusmn;
    &radic;<span style="text-decoration:overline"> &nbsp;
    b<span style="font-size: 8px;vertical-align:+45%;">2</span> &minus;
    4ac&nbsp;</span></td>
  </tr>
  <tr>
    <td style="text-align:center;">
    <span style="text-decoration:overline;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    2a &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>//분수를 표현하기 위해 분모위에 overline을 적용하고 공백으로 매꿨다.
    </td>
  </tr>


--------결과-------

−b ± √   b2 − 4ac

2a

구글 블로그에서 보통 크기의 글을 쓸때는 size8에 45퍼센트 위로 올리는게 가장 적당한거 같다.


참고:http://www.scientificpsychic.com/etc/square-root.html