본문 바로가기
개발/HTML

[HTML] Text 관련 Tag / 특수문자

서파르타 2020. 5. 20. 11:32

 

<h1~6> 

   글자 크기(1에서 6으로 갈수록 작아짐) 

< b>

   bold체 의미론적(Semantic) 중요성 없음

<string> 

   bold체 의미론적(Semantic) 중요성 있음

<i>

   Italic체를 지정한다. 의미론적(Semantic) 중요성 없음

<em>

   강조, 중요한 text 지정 의미론적 중요성 있음

<small>

   특정 글자 작게 나오게 하기

<del>

   가운데 줄긋기

<ins>

   밑줄치기

<sub>

   text 위로 올리기

<sup>

   text 밑으로 내리기

<p>

   단락(Paragraphs) 지정
   텍스트 단락을 만들며 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말함
   만약 웹페이지 창의 너비보다 길어질 경우 자동 줄바꿈이 일어남

<br>

   강제 개행

&nbsp;

   연속적 공백

<pre>

   태그 내의 content 작성된 그대로 브라우저 표시
   HTML은 연속적으로 공백을 많이 넣더라도 한개의 공백만 표시되지만 pre tag는 그대로 표시됨

<hr>

   수평줄 삽입(점선 추가같은 느낌)
   가로 선을 삽입하는 태그이며 닫는 태그 없음

<q>

   “큰따음표”

<blockquote>

   들여쓰기

<mark>

   텍스트에 형광펜 효과를 줄 경우에 사용

<abbr>

   약자 표시용으로 마우스를 올리면 풀네임이 나옴

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name = "generator" content="Visual Studio Code"/>
    <meta name = "author" content = "Ayoung"/>
    <meta name = "keyowrds" content = "HTML5, CSS, meta tag"/>
    <meta name = "dexcription" content = "Make Blog"/>
    <title>Text test</title>
</head>
<body>
    <h1> 글자 크기(1에서 6으로 갈수록 작아짐) - 자동 줄바꿈 됨 </h1>
    <h2> 글자 크기(1에서 6으로 갈수록 작아짐) - 자동 줄바꿈 됨 </h2>
    <h3> 글자 크기(1에서 6으로 갈수록 작아짐) - 자동 줄바꿈 됨 </h3>
    <h4> 글자 크기(1에서 6으로 갈수록 작아짐) - 자동 줄바꿈 됨 </h4>
    <h5> 글자 크기(1에서 6으로 갈수록 작아짐) - 자동 줄바꿈 됨 </h5>
    <h6> 글자 크기(1에서 6으로 갈수록 작아짐) - 자동 줄바꿈 됨 </h6>
 
    <hr>
    <b> b : 위에 보이는 것은 줄이요~ </b>
    <br><br>
    <b> b : bold체 의미론적 중요성 없음  (자동 줄바꿈 안됨)</b>
    <br><br>
    <string> string : bold체 의미론적 중요성 있음  (자동 줄바꿈 안됨)</string>
    <br><br>
    <i> i : ltalic체를 지정한다  (자동 줄바꿈 안됨)</i>
    <br><br>
    <em> em : 강조, 중요한 text 지정 의미론적 중요성 있음  (자동 줄바꿈 안됨)</em>
    <br><br>
    <small> small : 특정 글자 작게 나오게 하기  (자동 줄바꿈 안됨)</small>
    <br><br>
    <del> del : 가운데 줄긋기 (자동 줄바꿈 안됨) </del>
    <br><br>
    <ins> ins : 밑줄치기  (자동 줄바꿈 안됨)</ins>
    <br><br>
    <sub> sub : text 위로 올리기  (자동 줄바꿈 안됨)</sub>
    <br><br>
    <sup> sup : text 밑으로 내리기  (자동 줄바꿈 안됨)</sup>
 
    <hr>
 
    <p>
        p : 단락(Paragraphs) 지정
        텍스트 단락을 만들며 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말함
        만약 웹페이지 창의 너비보다 길어질 경우 자동 줄바꿈이 일어남 
        그런 줄바꿈이 일어날때까지 나는 계속 적을 꼬임
        근데 언제까지 적어야 하냐요?
    </p>
 
    <pre>
        pre : 태그 내의 content 작성된 그대로 브라우저 표시 
        HTML은 연속적으로 공백을 많이 넣더라도 한개의 공백만 표시되지만 pre tag는 그대로 표시됨
    </pre>
 
    <hr>
 
    <q> q : 큰 따음표 </q>
 
    <blockquote> blockquote : 들여쓰기 들어가라~ </blockquote>
 
    <mark> mark : 형광형광 (자동 줄바꿈 안됨)</mark>
    <br><br>
    <abbr> abbr : 마우스 올리면 풀네임 나온다네 </abbr>
</body>
</html>
 cs

 

<결과>

 

< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &gt; &#38;
" quotation mark &quot; &#34;
스페이스 키를 누른효과 &nbsp;   &#160;

 

'개발 > HTML' 카테고리의 다른 글

[HTML] 목록 List /<ul> / <ol> / <il>  (0) 2020.05.20
[HTML] Hyperlink 정리  (0) 2020.05.20
[HTML] 웹페이지를 구성하는 기본 tag  (0) 2020.05.20
[HTML] 시멘틱 태그 (Semantic Web) 란??? / Semantic tag  (0) 2020.05.19
[HTML] 기본문법  (0) 2020.05.18

'개발/HTML' Related Articles

티스토리툴바