[html] p tag, br tag의 차이

  글을 쓸 때 들여 쓰기를 통해 단락을 나누어 내용을 구분하는 것처럼 html에서 p태그를 사용하면 단락을 표현할 수 있다. 아래는 html를 설명하는 위키피디아의 설명으로 단락을 구분해보고자 가져왔다.

<p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<p>Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<p>HTML elements are the building blocks of HTML pages.</p>
<p>With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

  4개의 p 태그를 사용하여 4개의 단락으로 나누어보았다. p태그는 <p>, </p> 열고 닫고 같은 단락을 묶어서 사용한다.  위 코드의 결과는 다음과 같다. 텍스트 줄이 브라우저 창의 너비보다 길어질 경우, 줄이 자동으로 바뀐다.

4개의 단락으로 나눠지는 걸 볼 수 있는데 이 단락 간격의 크기는 CSS를 활용하면 조정이 가능하다.

 

  한편, br 태그를 사용하면 단순히 줄 바꿈을 할 수 있다. Enter와 비슷한 느낌이라고 보면 될 거 같다.

  </br>을 쓰지 않아도 되고, CSS에서 할 일도 없다. 위와 같은 소스 문장 뒤에 <br>을 붙여보자.

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.<br><br>
It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.<br>
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages.<br> HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.<br><br><br><br>
HTML elements are the building blocks of HTML pages.<br><br><br>
With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.<br>

   html에서는 Enter로 줄바꿈을 표현할 수 없기 때문에 <br>을 사용하면 Enter의 효과를 낼 수 있다.

 

<br>을 여러번 사용한 부분은 그만큼의 줄 간격이 벌어지는 결과를 볼 수 있다.