[HTML] TAG - Paragraph(with. Entity)

<p> 태그

HTML에서 문단을 나타내는 태그는 <p>를 사용하여 나타낸다. <p> 태그를 사용할 경우 브라우저는 자동으로 <p> 요소의 위쪽과 아래쪽에 여백을 추가한다. 이런 여백은 CSS의 margin 속성을 사용하여 조정할 수 있다.

 

<p> 태그는 다음과 같이 사용한다.

<p> paragraph tag : p </p>

 

 

<p> 태그 특징

<p> 태그는 요소가 끝날경우 줄바꿈한다.

<!-- 문단과 문단 사이는 줄바꿈 된다. -->
<p> 첫번째 문단 </p>

<p> 두번째 문단 </p>

아래와 같이 줄바꿈되어서 나온 것을 볼 수 있다.

결과

 

<p> 태그는 요소 안에서 아무리 Enter를 여러번 치고 Space를 여러번 입력해도 모두 1칸 띄어쓰기로 처리한다.

<!-- Enter, space가 연속 입력 : 띄어쓰기 1번 -->
<p> Enter

Enter


Enter      space      space
</p>

아래와 같이 모두 1칸 space로 처리되어 출력되는 것을 볼 수 있다.

 

그렇다면, 공백과 스페이스는 어떻게 넣어주어야 할까? 스페이스의 경우에는 <br> 태그를, 엔터의 경우에는 &nbsp 엔터티를 사용하여야 한다.

<!-- 
space(공백) : &nbsp 엔터티 : None-breaking space의 약자
enter(줄바꿈) : <br> 태그
-->
<p> 
    Enter<br><br>Enter<br><br><br>Enter&nbsp;&nbsp;&nbsp;space&nbsp;&nbsp;&nbsp;space
</p>

다음과 같이 엔터와 스페이스가 잘 동작하는 것을 볼 수 있다.

 

 

Entity란

Html 코드는 꺽쇠(<>)로 이루어진 태그들로 구성되어 있다. 그렇다 보니 content에 꺽쇠모양을 넣고 싶을 때 아래와 같이 태그로 인식하는 등의 문제가 발생한다.

<!-- 안녕을 태그로 인식해버림... -->
<p><안녕>, 나는 HTML이야</p>

 

그렇기 때문에 HTML은 엔터티를 제공하여 꺽쇠 모양, 스페이스(공백) 등을 content에 넣을 수 있도록 제공한다. HTML은 수많은 엔터티를 제공하지만, 그 중 필수적으로 알아야 할 엔터티는 다음과 같다.

기호	Entity
space(공백)	  (non-breaking space)
<	&lt; (less than)
>	&gt; (greater than)
&	&amp; (ampersand)
"	&quot; (double quotation mark)
'	&apos (apostrophe)