[HTML] 09장, 줄바꿈: <br> vs <p>

다음과 같이 보충 설명을 넣어 보자.

 

<h1>HTML</h1> Hypertext Markup language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically included cues for the appearance of the document. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It 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.

 

추가한 내용을 새로고침 하면 아래와 같이 웹 페이지에 나타난다.

 

 

웹 페이지에 나타나는 것을 보았을 때 우리는 단락이 없기 때문에 조금 답답해 보인다고 느낄 수 있다. 우리가 소스코드로 추가한 내용을 보면 단락 사이에 간격이 떨어져 있다. 즉, 코드에거 분명히 줄바꿈을 했음에도 웹 페이지에는 반영되지 않는다.

 

HTML에서 새로운 줄을 표현할 때는 <br>이란 태그를 쓰면 된다. 

 

 

한 줄이 떨어진 것을 확인할 수 있다. 하지만 단락이기 때문에 두개를 사용하면 단락처럼 느껴진다.

 

 

한 개를 사용했을 때보다 두 개를 사용했을 때 확실히 단락이 나누어져 있는 것으로 보인다. 만약 세 번 <br> 태그를 쓴

다면 좀 더 강조된 단락을 표현할 수 있을 거다. <br> 태그는 상당히 자주 사용하는 태그이다.

 

 

두 번 사용했을 때보다 더 확실히 단락이 나뉘었다.

 

<br> 태그는 특징을 가진다. 지금까지 배운 <h1> 태그는 어디서부터 어디까지가 <h1> 태그인지를 설명하기 위해 열리는 태그, 닫히는 태그다 쌍으로 존재하였다. <br> 태그는 줄바꿈이라는 시각적인 의미만 가지고 있기 때문에 뭔가를 감쌀 필요가 없다. 그렇기 때문에 닫지 않는다.

 

그런데 이 <br>이 태그 말고 HTML을 만든 사람들은 단락을 표현할 때 쓰기 위한 태그를 만들어 놨다. <p>라는 태그이다. paragraph의 첫 번째 글자인 P를 딴 것이다. <p> 태그는 <br> 태그와 다르게 어디서부터 어디까지가 한 단락인지 표현할 수 있기 때문에 열리는 태그와 닫히는 태그가 존재한다. 

 

다음과 같이 <p> 태그를 사용하면 두 개의 단락으로 나눈 것이다.

 

 

결과를 보면 <br> 태그를 적용했을 때와 같다. 하지만 사용하는 태그가 다르고 두 태그 가운데 이 맥락에서는 <p> 태그가 더 적절한 태그이다. 왜냐하면 <p> 태그는 이 웹 페이지를 좀 더 정보로써 가치있게 만들어주기 때문이다. 즉, <p>에서 </p>까지 단락이 존재한다는 것을 의미론적으로 표현할 수 있기 때문이다. 그에 반해 <br> 태그는 단지 줄바꿈일 뿐이다. 

 

<br> 태그와 <p> 태그를 비교했을 때 <p> 태그에는 단점이 있다. <br> 태그는 줄바꿈을 하고 싶은 만큼 여러번 사용하면 된다. 하지만 <p> 태그는 정해진 여백만큼 벌어지기 때문에 시각적으로 자유도가 떨어진다. 하지만 우리에게는 CSS라는 기술이 있다.

 

 

 

 

 

---

출처: 생활코딩! HTML+CSS+자바스크립트, 이고잉 지음