[HTML] 텍스트 요소 - 서식

단락(Paragraph)

단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고 부릅니다.

<p> 태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입됩니다.

 

<p>단락입니다.</p>

 

 

띄어쓰기와 줄 나누기

TML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못합니다.

웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문입니다.

 

<p>
      줄                  나
      누
      기
</p>

 

즉,  위와 같이 작성하여도 아래와 같이 표시될 뿐입니다.(스페이스바를 많이 누를 필요가 없..)

 

줄 나 누 기

 

 

띄어쓰기는 &nbsp 를 쓰면 하나에 한칸씩 띄어쓰기가 가능하고 줄바꿈은 <br> 태그를 사용합니다.

참고로 <br> 태그는 종료 태그가 없는 빈 태그입니다.

 

<p>
줄을<br>
나눴네?<br>
<br>
이게&nbsp;&nbsp;&nbsp;&nbsp;띄어쓰기&nbsp;&nbsp;&nbsp;&nbsp;라는&nbsp;&nbsp;&nbsp;&nbsp;것이다!!
</p>

 

위와 같이 코드를 작성하면 아래와 같이 표시됩니다.

 

줄을
나눴네?

이게    띄어쓰기    라는    것이다!

 

 

다른 방법으로는 HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용해야 합니다.

<pre>태그(preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현됩니다.

 

<pre>
줄도
나누고.

띄어쓰기도     했     네??
</pre>

 

위와 같이 작성하면 아래와 같이 웹브라우저에 그대로 표시됩니다.

 

줄도
나누고.

띄어쓰기도      했     네??

 

 

참고로 글을 작성하다가 수평으로 선을 그어 구분을 하고 싶다면 <hr> 태그를 사용하면 됩니다.

 

<p>펄스트</p>
<hr>
<p>세컨드</p>
<hr>
<p>써어드</p>

 

위와 같이 코드를 작성하면 아래와 같이 표시됩니다.

 

펄스트

---

세컨드

---

써어드

추가로 텍스트에 여러가지 효과를 넣을수 있는 태그는 다음과 같습니다.

 

<b>, <strong> - 텍스트를 굵게 표현합니다.(strong 은 중요한 내용이라는 의미도 함께 포함)

<i>, <em> - 텍스트를 이탤릭체로 표현합니다.(em 은 중요한 내용이라는 의미도 함께 포함)

<mark> - 텍스트에 하이라이팅(highlighting) 효과를 표현합니다.

<del> - 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 효과를 냅니다.

<ins> - 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 냅니다.

<sup> - 위첨자를 사용합니다.

<sub> - 아래첨자를 사용합니다.

 

 

요기까지 임미다.