수학과의 좌충우돌 프로그래밍

[html] 2.텍스트 관련 태그들 (1) 본문

웹프로그래밍/html,css

[html] 2.텍스트 관련 태그들 (1)

ssung.k 2019. 1. 15. 03:05

안녕하세요 강민성입니다.


저번 시간에 이어서 오늘 html 태그들에 대해서 알아보겠습니다.


먼저 텍스트를 덩어리로 묶어주는 태그부터 알아보도록 하겠습니다.


 

텍스트를 덩어리로 묶어주는 태그


텍스트를 덩어리로 묶어준다는 말을 전문 용어로 '블록 레벨 태그' 라고 합니다.


그 말은 이 태그로 묶어주면 자동으로 줄바꿈이 일어난다는 의미입니다.


반대말로는 '인라인 레벨 태그' 가 있습니다.


반대 개념이니 당연히 줄바꿈이 일어나지 않는 태그입니다.





 제목을 표시해주는 <h>태그 



제목을 표시해주는 <h>태그입니다.


제목을 표시하는 만큼 다른 텍스트보다 크고 진하게 표시됩니다. 


종류로는  h1 ~ h6까지 여섯 종류가 있습니다.


h 뒤의 숫자가 작을수록 크기가 점점 더 커집니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목태그</title>
</head>
<body>
    <h1>h1으로 쓴 제목</h1>
    <h2>h2으로 쓴 제목</h2>
    <h3>h3으로 쓴 제목</h3>
    <h4>h4으로 쓴 제목</h4>
    <h5>h5으로 쓴 제목</h5>
    <h6>h6으로 쓴 제목</h6>
</body>
</html>
cs

 






단락을 만들어주는 <p>태그 



<p>태그는 택스트를 표시할 때 사용합니다.


<p>와 </p> 를 기준으로 앞뒤에 줄 바꿈이 있습니다.


 

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>단락태그</title>
</head>
<body>
    <p>이 곳에는 텍스트를 쓸 수 있습니다.</p>
</body>
</html>
cs

 



줄바꿈을 위한 <br>태그, 수평줄을 넣어주는 <hr>태그


html 문서에서 실제로 줄바꿈을 하더라도 웹 브라우저에서는 줄바꿈 없이 한 줄로 인식을 합니다.


그러기 때문에 줄바꿈을 하기 위해서는 <br>태그를 사용해야합니다.



여러 단락이 있을 때 각각의 단락을 구분하는 선을 긋기도 합니다.


이 선을 넣기 위해서는 <hr>태그를 사용해야합니다.


두 태그의 공통점은 둘 다 닫는 태그가 없다는 점 입니다.


 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>줄바꿈과 수평줄 태그</title>
</head>
<body>
    <p>이 곳에는 텍스트를 쓸 수 있습니다.</p>
    <br>
    <p>br태그로 줄바꿈을 할 수 있고</p>
    <hr>
    <p>hr태그로 선을 그을 수 있습니다.</p>
</body>
</html>
cs

 




인용문을 넣는 <blockquote>태그, 그대로 표시해주는 <pre>태그


이번에는 인용한 글귀를 넣는 <blockquote> 태그 입니다,.


인용하는 문장은 아래와 같이 자동으로 들여쓰기가 됩니다.



html에서는 공백을 아무리 많이 입력해도 하나의 공백으로 인식하게 됩니다.


이를 해결하기 위해서 <pre>태그를 이용하면 코드에 사용한 공백이 웹브라우저에 그대로 나타나게 됩니다.


 

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
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인용태그와 pre태그</title>
</head>
<body>
    <h1>코드 입력하기</h1>
   <blockquote>
       다음은 c언어의 코드를 인용한 것입니다.
    </blockquote>
    <pre>
        int main(void)
        {
            printf("Hello World!");
        }
    </pre>
    <p>
        int main(void)
        {
            printf("Hello World!");
        }
    </p>
</body>
</html>
cs

 





텍스트를 한 줄로 묶어주는 태그


아까 위에서 언급했던  '인라인 레벨 태그' 가 이에 해당합니다.


하나씩 살펴보도록 하겠습니다.




굵게 표시해주는 <strong>, <b>태그


텍스트를 굵게 표시해주는 역할을 합니다.


그러면 두 태그의 차이는 무엇일까요?


웹 브라우저에서 겉보기에도 차이가 없지만 굵게 표시하는 태그를


두 개로 구분한 이유는, 화면 낭독기 때문입니다.


<strong>태그는 내용자체가 중요해서 강조를 해줘야 할 때이고


<b>태그는 단순히 굵게만 표시해주는 역할을 합니다.


따라서 <strong> 태그는 화면 낭독기가 그 부분이 중요한 부분이라고 알려주게 됩니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>굵게 표시하는 태그</title>
</head>
<body>
   <p>
       <strong>강조를 해야하는 부분</strong>과
       <b>굵게 표시하는 부분</b>
    </p>
</body>
</html>
cs

 

 



인용 내용을 넣는 <q>태그


위에서도 인용을 위한 태그를 사용했었습니다.


<blockquote>태그인데요, 이 태그와의 차이점은 무엇일까요?


<blockquote>태그는 블록 레벨 태그이기 때문에 들여쓰기를 통해 구별을 해주었지만


<q>태그는 인라인 레벨 태그이기 때문에 줄바꿈없이 다른 내용과 한 줄에 써지게 됩니다.


한 줄에 써지는 대신 " "를 통해 다른 내용과 구별을 해주게 됩니다.


 

1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인용 태그</title>
</head>
<body>
   <p>
       <q>인용하는 부분이 들어갑니다.</q>
   </p>
</body>
</html>
cs

 



형광펜으로 칠한 <mark>태그


<mark>태그를 통해서 형광펜으로 칠한 듯한 효과를 낼 수 있습니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인용 태그</title>
</head>
<body>
   <p>
       중요한 부분은
       <mark>색칠해서</mark>
       표시할 수 있습니다.
   </p>
</body>
</html>
cs

 

 




줄바꿈 없이 영역 지정하는 <span> 태그



사용 빈도 수를 따지면 <span>태그가 제일 많이 쓰일 테지만


이 태그는 겉보기에 아무런 변화를 주지 않습니다.


일부 텍스트만 묶어서 다른 변화를 주기 위해서 사용합니다.


<span>태그는 변화가 없으므로 뒤에서 새로운 태그들을 더 배우면서


알아보도록 하겠습니다.




마무리


이 밖에도 여러가지 텍스트 태그들이 있습니다.


동아시아 글자를 표시하는 <ruby>, 소스코드를 입력하는데 필요한 <code>,


취소선과 밑줄을 긋는 <s>, <u> 등 많은 태그들이 있습니다.


위에서 언급한 주요 태그들을 알고 있고 나머지 태그들은


'아 이런게 있었지' 정도만 알고 계시면  찾아가면서 활용하실 수 있을 겁니다.


오늘도 제 글을 읽어주셔서 감사합니다 :)

저작자표시

'웹프로그래밍 > html,css' 카테고리의 다른 글

[html] 이미지를 만드는 태그  (0) 2019.01.22
[html] 2.텍스트 관련 태그들 (3) 표를 만드는 태그  (0) 2019.01.19
[html] 2.텍스트 관련 태그들 (2) 목록을 만드는 태그  (0) 2019.01.18
[html] html 기본문서 구조  (0) 2019.01.08
[html] html이란, 웹 브라우저와 웹 편집기  (0) 2019.01.08
'웹프로그래밍/html,css' Related Articles more
Comments