HTML 숫자기호 ① , < > 괄호 코드 추가하기

 

 

 

 

안녕하세요.!!

 

 

HTML 화면을 그리다보면 순서를 나타낼 때 숫자기호를 넣을 때가 있습니다.

 

 

HTML 코드로 각 기호들을 선언하거나 직접 그 기호를 넣어 출력하는 방법이 있습니다.

 

 

편한 방법으로 추가하시면 됩니다.!!

 

 

 

1>   숫자 기호 출력하기

 

 

 

-       방법1 : 숫자기호에 해당하는 코드 입력

 

<p>&#9312; 동그라미 숫자 1 출력하기 </p>
<p>&#9313; 동그라미 숫자 2 출력하기 </p>
<p>&#9314; 동그라미 숫자 3 출력하기 </p>

 

 

 

-       방법2 : 직접 ①, ② 기호 넣기

 

<p> ① 동그라미 숫자 1 출력하기 </p>
<p> ② 동그라미 숫자 2 출력하기 </p>
<p> ③ 동그라미 숫자 3 출력하기 </p>

……

 

 

숫자기호 별로 아래 문자와 같습니다.

 

 

1이면 9312, 2이면 9313으로 끝에 1씩 더하면 됩니다.

 

 

숫자기호	문자
①	①
②	②
③	③
④	④
⑤	⑤
⑥	⑥
⑦	⑦
⑧	⑧
⑨	⑨
⑩	⑩

 

 

 

 

2>   화면에서 <, > 괄호 출력하기

 

 

      학교 <서울> 선택하기   -> < > 포함된 문장 출력

 

 

 

위와 같이 <서울>을 화면에 출력하고자 할 때 아래처럼 <서울>을 직접 태그안에 넣을 수 없습니다.

 

 

태그가 보통 <> 괄호를 사용하기 때문에 방법은

 

 

< 는 &lt; 로 바꿔주고 >는 &gt; 로 바꿔주면 됩니다.

 

 

 

- 잘못된 작성 X

 

 

<p> 학교 <서울>선택하기 </p>

 

 

 

- 올바른 작성 : < 는 &lt;   >는 &gt;

 

 

<p> 학교 &lt; 서울 &gt; 선택하기 </p>

            

 

 

 

 

3>   기타 HTML 코드 참고

 

 

아래는 HTML 작성하시면 기본적인 코드 참고하시기 바랍니다.

 

 

- 한칸 띄우기 : &nbsp;

 

- 한줄 띄우기 : <br>

 

- 추가로 화면에 밑줄을 그리기 : <hr>

 

- 글씨 두껍게 : font-weight:bold

 

<span style="font-weight:bold"> 1. 글씨를 두껍게 출력하기 </span>

 

- 이미지 가운데 정렬하기 : text-align:center

 

<p class="img" style="text-align:center"><img src="/img/contents/temp.png" alt="TEST이미지"></p> 

 

 

 

아래는 HTML 관련 태그 참고하시기 바랍니다~!!!

 

 

 

[IT/Web] - CSS, HTML Text 글씨 크기, 색깔, align 정렬 방법

CSS, HTML Text 글씨 크기, 색깔, align 정렬 방법

[IT/Web] - HTML 태그, CSS

HTML 태그, CSS

 

 

 

감사합니다.