본문 바로가기
코딩 공부

HTML 단락 <P> 태그와 <pre>태그

by 사브나 2020. 6. 26.

단락 _ Paragraph

Html에서 <p>태그를 이용해서 단락을 표시한다. 

<br> 태그를 이용해서 단락을 구분짓기도 하지만 코딩을 공부했다면 <br> 태그보다 <p>태그를 쓰기를 바란다. 

<p>태그 위 아래로는 약간은 여백이 자동으로 생선되지만 원하는 여백이 있다면 

<p style="margin-top :40px;"> 이런식으로 구체화시켜줄 수도 있다.

 

Html 코드 작성에서 띄어쓰기를 해도 웹브라우저 화면에서는 전혀 나타나지 않기 때문에 

웹브라우저가 인식할 수 있도록 <p>태그를 씁니다. 

 

<p>태그를 사용해도 그 안에 여러번 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로 표현됩니다.

그래서 만약 Html코드에서 작성한 서식 그대로의 모습을 화면에 노출 시키고 싶으면 <pre>태그를 사용해야 합니다. 

 

 

 

<p>

나의 살던 고향은 꽃피는 산골 <br>

<br>

띄엄    띄엄    보일까요?

</p>

 

---------노출되는 화면

 

나의 살던 고향은 꽃피는 산골

 

 

띄엄 띄엄 보일까요?

 

 

 

<pre>

나의 살던 고향은 꽃피는 산골 

 

띄엄    띄엄    보일까요?

</pre>

 

 

 

---------노출되는 화면

 

나의 살던 고향은 꽃피는 산골

 

띄엄    띄엄    보일까요?

 

<p>태그와 <pre>태그의 차이점 이해 하셨나요?

<pre> 태그 너무 유용하게 잘 쓸것 같네요 

 

 

 

'코딩 공부' 카테고리의 다른 글

HTML LIST <ul>, <ol> , <li>  (0) 2020.06.30
HTML _ 색 그리고 <a>  (0) 2020.06.29
HTML _ 주석 스타일  (0) 2020.06.28
HTML _ 서식 <em><b><mark><del> 태그공부  (0) 2020.06.27
HTML 입문  (0) 2020.06.25

댓글