[HTML] br, p 태그

본문은 '생활코딩'님의 <WEB1 - HTML & INTERNET> 강의를 수강하고 개인 학습용으로 정리한 내용입니다.

 

안녕하세요, 오늘은 HTML의 기본 태그 <br>, <p> 태그에 대해 알아보겠습니다

 

두 태그는 모두 줄바꿈을 할 때 사용한다는 공통점이 있습니다

하지만, 태그가 내포하고 있는 '정보'가 다르기 때문에 이 둘을 구분해서 사용해야 합니다

 

본문에서는 <br>, <p> 태그의 사용법과 둘 간의 차이점에 대해 짚어보겠습니다

---

#1. <br> 태그

- <br> 태그는 순수하게 줄바꿈을 위한 태그입니다. 줄바꿈 이외에는 어떠한 의미도 내포하고 있지 않습니다

- <br> 태그는 열리는 태그, 닫히는 태그 쌍으로 존재하지 않고 단독으로 쓰입니다

- <br> 상당히 자주 사용하는 태그입니다

 

br 태그는 <br> 줄바꿈을 해줍니다

 

이렇게 줄바꿈을 하고 싶은 부분 앞에다 <br> 태그를 단독으로 사용하면 아래와 같이 줄바꿈이 된 것을 확인할 수 있습니다

 

웹브라우저에서 보았을 때

---

#2. <p> 태그

- <p> 태그의 'p'는 paragraph(단락)의 앞글자를 딴 것으로, 단락을 나눌 때 사용하는 태그입니다

- <br> 태그와 달리 열리는 태그, 닫히는 태그 쌍으로 사용합니다    

  (단락의 시작과 끝 부분을 정해야 하니까 두 개의 태그가 필요하겠죠?)

 

<p>p 태그는 단락을 나눌 때</p>사용합니다

 

이렇게 단락을 지정하고 싶은 부분의 시작과 끝을  <p> 태그로 감싸면, 그 다음 내용은 줄바꿈이 된 것을 확인할 수 있습니다

 

웹브라우저에서 보았을 때

---

그렇다면 여기서 궁금증이 생깁니다
웹브라우저 상에서 단락을 나누고 싶을 때는 굳이 번거로운 <p> 태그를 사용하지 않고 <br> 태그를 사용하면 되는 거 아닌가? 
왜 굳이 <p> 태그를 만들었지?

 

이에 대한 답변은 다음과 같습니다

단락을 나눌 때 <p> 태그를 사용하는 것이 더 좋습니다
왜냐하면 <p> 태그는 <p> 태그 안에 있는 정보들이 '단락이라는 것을 의미'하기 때문입니다
따라서 해당 웹페이지가 정보로서 더 가치있게 만들어 줍니다
<br> 태그는 해당 부분이 단락이라는 것을 의미하지 않고 단순히 줄바꿈의 의미만 지니고 있을 뿐입니다

---

오늘은 이렇게 HTML의 기본 태그 <br>, <p> 태그에 대해 알아보았습니다

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

두 태그의 기능은 표면상으로는 동일해 보이지만

태그가 내포하고 있는 의미에 차이가 있다는 것을 잊지 말아야겠습니다

 

저는 그럼 HTML 기본 문법에 관한 내용으로 다시 찾아뵙겠습니다