[VScode] <p> 태그와 <br> 태그

HyperText Markup Language

 

<p> 태그

- paragraph (단락)의 약자

- html 은 줄 바꿈이 되지 않기 때문에 원하는 문장 단락의 시작과 끝점을 <p> 태그로 묶어 준다.

 

파일명 p.html       

'간단한 웹페이지 만들기' 에서 사용했던 1.html / 2.html / 3.html / 4.html 자료를 사용해보려 한다. 

코딩 화면과는 다르게 출력된 화면에서는 줄바꿈이 되지 않는 것을 볼 수 있다. 

 

<p> 태그 사용 후 출력 결과

 

영화제목을 구분하기 위해 <h2> 태그를 사용했다.

단락 사이의 간격을 넓히는 방법

1. 줄바꿈을 할 때 사용하는 <br> 태그 사용 

2. <p> 태그가 갖고 있는 간격의 값을 css로 변경해 넓히거나 좁힐 수 있다.

---

<br> 태그 

- 줄바꿈을 하는 태그

- <p> 태그는 줄 바꿈의 간격이 고정되어 있지만 <br> 태그를 여러 번 사용하여 간격을 조정할 수 있다.

 

파일명 br.html

- p.html 파일을 변경할 것이다.

- <br> 태그는 내용이 없는 (열린 태그)이기 때문에 줄바꿈할 마지막에 <br>만 넣어준다.

<br> 태그를 여러번 사용하여 줄 바꿈 간격을 늘릴 수 있다.

- 하지만 하나의 단락이라는 정보를 주기 위해서는 <p> 태그로 묶어주는 것이 좋다. 

- 줄바꿈 간격 조정은 나중에 배울 css로 하는 것이 좋다. 

 

<br> 태그는 시를 쓸 때 편리하게 사용된다.