[HTML 기초 문법] 텍스트 관련 태그(더미 텍스트로 실습하기)

안녕하세요!

 

이번 시간에는 HTML 기초 중 텍스트 관련 태그에 대해서 실습을 진행하려고 합니다.

여러 가지 태그가 나오지만 꼭 다 외우거나 알아야 할 필요는 없고 필요할 때 찾아서 보시면 될 것 같습니다.

 

원활한 텍스트 관련 태그(paragraph 단락 태그) 실습 진행을 위해 더미 텍스트를 사용하겠습니다.

 

"더미 텍스트가 뭐죠?"

더미 텍스트(dummy text)란 아무런 의미를 갖지 않는 단어들을
무작위로 조합하여 만든 문장이나 글을 말합니다

 

더미 텍스트(dummy text) 사용하기

hangul.thefron.me/

한글입숨 - 무의미한 한글 텍스트 생성기

위 사이트는 더미 텍스트를 자동으로 생성시켜주는 사이트입니다.

굳이 더미 텍스트를 쓰지 않으셔도 괜찮지만 프로그래밍을 하다 보면 연습할 텍스트가 생각이 나지 않거나

단락을 구성하는 데 있어서 어려움을 겪을 수 있기 때문에

텍스트 관련 태그를 연습하시는 데 사용하시는 걸 추천드립니다.

 

자주 사용하는 텍스트 관련 태그에 대해서 알아보겠습니다.

 

 

<h1></h1> (h1 ~ h6)

HTML에서 사용하는 제목 요소 태그입니다. heading을 의미하며, 제목를 표시할 때 사용됩니다. h1 ~ h6까지 사용되며, 숫자의 크기에 따라 포인트가 달라집니다. h1 > h6

 

<p></p>

HTML에서 사용하는 단락 태그입니다. paragraph를 의미하며, 단락을 만들어 줄 때 사용됩니다.

 

<hr>	HTML에서 사용하는 수평선 태그입니다. 수평선을 삽입할 때 사용되며, 닫는 태그가 없습니다.

 

<pre></pre>

코드에 연속된 공백이나 줄 바꿈을 넣었을 때 프로그램은 그것이 붙어있는 것으로 인식합니다. 공백이나 줄 바꿈을 처리할 때는 탈출 문자를 사용하지만 그렇지 않고도, 입력하고 싶은 내용을 그대로 화면에 표시하는 태그입니다. HTML은 공백(Space)를 많이 넣더라도 한 개의 공백만 표시되지만, pre 태그를 사용하면 탈출 문자를 사용하지 않고도 입력한 그대로 표시합니다.

 

<br>	HTML에서 사용하는 줄바꿈 태그입니다. 줄바꿈을 할 때 사용되며 닫는 태그가 없습니다.
<strong></strong> <b></b>	두 태그 모두 화면에서 굵은 글씨를 표현합니다.하지만 strong 태그는 의미상 기능을 사용할 때 강조가 되며, b 태그는 강조되지 않습니다. 단순 볼드를 쓸 경우 B 태그를 사용하시면 됩니다.
<em></em> <i></i>	두 태그 모두 화면에서 이탤릭체를 표현합니다. 기능상의 차이는 위 strong과 b의 차이입니다.
<ins></ins> <u></u>	글자에 밑줄을 그어주는 태그입니다.
<del></del> <s></s>	글자에 취소선을 그어주는 태그입니다.
<mark></mark>	글자에 형광펜으로 강조해주는 태그입니다.
<span></span>	특별한 기능을 갖지는 않지만 텍스트를 묶어 스타일을 적용할 때 주로 사용하는 태그입니다.
<abbr></abbr>	약자 표시하는 태그입니다. 마우스를 올리면 지정한 텍스트가 보여집니다.
<sub></sub> <sup></sup>	HTML에서 사용하는 첨자 태그입니다. <sub> 태그는 subscripted(아래에 쓰인)으로 아랫 첨자를 의미하고, <sup> 태그는 superscripted(위에 쓰인) 윗 첨자를 의미합니다.
<q></q> <blockquote></blockquote>	인용문을 쓸 때 사용됩니다. <q> 태그는 짧은 인용문을 쓸 때 사용되며, <blockquote> 태그는 긴 인용문을 블록형태로 쓸 때 사용됩니다.
<cite></cite>	작품의 제목을 삽입할 때 사용되는 태그입니다.
<small></small>	글자를 작게 표시하고 싶을 때 사용되는 태그입니다.

 

여기까지 텍스트 관련 태그를 알아봤습니다.

블록 태그와 인라인 태그 구분을 해야 하지만 추후에 다루도록 하겠습니다.

 

고생하셨습니다!