HTML 문법(줄바꿈 태그 <br> vs <p>) | 생활코딩 강의 복습 | 프로그래밍 공부

* 이 포스팅은 생활코딩 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://opentutorials.org/ 에서 보실 수 있습니다.*

HTML의 줄 바꿈 태그를 알아보자.

우선 가장 기본적인 줄 바꿈 태그로는 <br> 태그가 있다.

현재 줄 바꿈 태그가 없는 상태의 텍스트이다.

여기서 줄 바꿈을 하고 싶은 곳 앞에 <br>을 붙여 넣으면 된다.

<br> 태그는 앞에서 배웠던 태그들과는 다르게, 닫는 태그 없이 여는 태그만 쓰면 된다.

</br>이 필요 없다는 이야기이다.

위처럼 태그를 넣으면,

줄 바꿈이 된다.

만약 줄을 더 띄우고 싶다면, 원하는 만큼 <br>을 넣으면 된다.

<br> 세 개를 넣었더니

줄이 세 번 띄워진다.

<br> 태그 외에 줄 바꿈을 할 수 있는 또 하나의 태그가 있다.

단락 태그인 <p> 태그이다.

<p></p> 사이에 단락으로 구분 짓고자 하는 텍스트를 넣어주면 된다.

위처럼 단락을 넣으면,

<br> 태그 없이도 단락이 구분되었고, 단락과 단락 사이의 여백도 보인다.

그렇다면, <br> 태그와 <p> 태그 중 어느 것을 써야하느냐?

프로그래밍을 할 때 의미를 파악하기 쉽게할 수 있는 <p> 태그를 넣는게 더 좋다.

<p> 태그는 여기부터 여기까지가 단락이다라는 의미를 내포하고 있기 때문이다.

단락과 단락사이의 여백을 조절하고 싶다면???

CSS를 쓰면 된다.

다음과 같이 <p> 태그에 CSS를 넣어주면 된다.

단락 위 여백을 45px로 하고 싶다는 의미이다.

여백이 조정되었다.