HTML <br> 텍스트의 줄바꿈을 하는 태그

BR 태그란?

<br> 태그는 line break의 약어입니다. (일반적으로 약어를 만드는 규칙과 조금 다르네요. lb라고 해야 하는 것 아닌가요...) 우리가 워드프로세스에서 줄바꿈 할 때는 엔터키를 치지만, HTML에서는 <br> 태그를 써야 합니다.

 

사용법

<p>This is the first line.<br>
This is the second line.</p>

• 텍스트 중에서 줄바꿈 할 곳에 <br>태그를 입력합니다
• <br>태그는 닫는 태그가 없습니다

See the Pen br by 40's Programmer (@40sProgrammer) on CodePen.

위의 예시를 보면, 첫 번째는 줄바꿈이 잘 적용되었네요.

두번째는 제가 코드상에서 엔터키를 쳤지만 <br>태그가 없으면 줄바꿈이 안되는 것을 확인할 수 있습니다.

 

 

줄바꿈은 텍스트에만 적용되는 것은 아니에요.

<img src="pro1.jpg" alt="Pro 1"><br>
<img src="pro2.jpg" alt="Pro 2">

위의 코드 예시는 이미지 파일이 두 개 들어가는데요. 만약 <br> 태그가 없다면 이미지가 연달아서 보일텐데, <br>로 줄바꿈을 할 수 있습니다.

 

HTML <br> 태그는 텍스트 블록에서 줄바꿈을 하거나 세로 간격을 추가하는 도구입니다. 편리하죠.

그런데 제가 CSS를 공부하다 보니까 display, flex, margin, padding 등 요소들을 디자인적으로 잘 배치하는 기능들이 훨씬 많더라구요.

 

지금까지 간단한 줄바꿈 태그 <br>에 대해 알아보았습니다.