HTML 독학을 위한 HTML의 문단 <p>, <br>, <pre>,<blockquote>

이번에는 <p>, <br>, <pre>, <blockquote>태그에 대해서 한번 알아보겠습니다. 

 

단락 구분 <p>태그, 개행 <br>태그 

<p>태그는 일반적으로 단락을 구분하기 위해서 사용하는 태그입니다. 웹 상에서 가장 많이 볼 수 있는 태그 중 하나이기 도 합니다.

<p> 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세! </p><br>

<p> 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. <p><br>

<p>태그는 문단을 구분하는데 개행을 원할경우 <br>태그를 사용해서 줄바꿈을 해주어야 합니다. 블로그에 여러줄의 글을 작성한 뒤에 HTML문서로 변환해 한번 확인해보면 수많은 <p>태그가 생성되어 있는 것을 보실 수 있습니다. 

 

만약 <p>태그로 공백과 엔터를 사용했을때 페이지는 어떻게 표시될까? 

 

아무리 많은 공백과 엔터를 사용한다고 하더라도 웹페이지 에서는 스페이스는 아무리 많이 사용해도 1번만 사용되고 아무리 줄바꿈을 해도 <br>태그가 없기때문에 개행이 되지 않습니다. 

 

<pre>태그

<pre>태그는 <p>태그와 다르게 사용자가 입력한 형식 그대로 보여주는 태그입니다. 이게 무슨 말일까?? 

일반적으로 THML에서 아무리 많은 빈칸을 입력하더라도 한 칸밖에 인식하지를 못하고 아무리 엔터키를 사용한다고 하더라도 <br>태그가 없다면 줄바꿈이 되지 않습니다. 하지만 <pre>태그는 space, tab, enter 키를 입력한 그대로 인식하여 화면에 보여지게 됩니다. 

 

위에서 봤던 <p>태그를 <pre>태그로 변경한뒤에 결과는 어떻게 바뀔까? 

 

<p>태그를 <pre>태그로 변경하여 실행하게 되면 

 

웹 상에는 작성한 그대로 적용되어 나타나게 됩니다. 이러한 기능은 글자 간격이 중요한 내용을 다룰때에 사용하면 좋은 기능입니다. 

 

<blockquote>태그

들여쓰기 기능을 가지고 있습니다. 하지만 들여쓰기를 할때마다 사용하게 된다면 CSS로 옷을 입힐때 혼돈을 줄 수 있어 보통의 <blockquote>태그는 인용문을 사용할때 주로 사용됩니다. 

 

티스토리 블로그 글쓰기의 기능중에서도 인용1, 인용2와 같이 인용을 위한 기능을 제공해줍니다. 인용 2를 누르면 네모난 영역이 생성되는 것을 확인할 수 있습니다. 

>> 인용2  << 

위에 인용 부분이 생성되었는데 해당 소스를 한번 보겠습니다. 

 

<blockquote> 코드가 생성되어 있고 data-ke-style="style3" 이라는 속성을 가지고 있습니다. blockquote의 기능에 옷을 입혀 새롭게 보이도록 한 것이지만 원래 기능은 들여쓰기의 기능을 가지고 있습니다. 

 

소스코드에는 <blockquote>태그를 시작해 바로 "<<이쪽에 들여쓰기가 되어서 시작되었네??"라고 작성했지만 결과를 보면 본문의 시작! 다음 글에는 들여쓰기가 되어 "        <<~~~~"로 보이는 것을 확인하실 수 있습니다. 

 

<p>, <br>, <pre>, <blockquote>에 대해서 공부해봤습니다. HTML에서 단락을 어떻게 꾸미는지에 대해서 알아봤는데요. 만약 티스토리 블로그를 하고 있다면 "HTML모드"를 활용해서 글을한번 써본다면 HTML을 조금 더 쉽게 이해할 수 있고 내용이 많아졌을때 소스를 쉽게 읽을 수 있는 능력도 향상될 것 같습니다. 

 

html에 대해서 궁금한 점이 있으시면 아래 댓글로 남겨주시면 가능한 먼저 기능을 다룰 수 있도록 해보겠습니다. HTML, CSS, JAVASCRIPT에 대한 기능이 궁금하시면 아래 댓글에 남겨주세요.