줄바꿈태그 <br>과 <br/>의 차이

“안녕, 친구하지 않을래?” 라는 텍스트를 표시하고 싶어서 html 파일을 만들고 아래와 같이 썼습니다.

<p> 태그를 이용하여 텍스트를 감싸 주었습니다. <p>는 paragraph의 약자로 ‘문단’을 의미합니다. 그런데 에디터(왼쪽)에서 엔터를 쳐서 줄바꿈을 하더라도 미리보기 페이지(오른쪽)에서는 줄바꿈이 적용되지 않아요.

<p>가 문단이라는 의미이니 이를 응용하여 <p></p> 태그를 두 번 사용하면 줄바꿈 효과를 낼 수 있습니다. 하지만 문단이므로 사이 간격이 벌어진 것을 확인할 수 있어요.

우리는 이럴 때 <br> 태그를 사용하여 아래와 같이 간단하게 줄바꿈을 할 수 있습니다.

<br>은 break의 약자이며 열고 닫는 태그가 존재하지 않아서 <br>만 써주어도 됩니다. 간혹 <br/>이나 <br />이 보이는데 문법상 차이가 거의 없다고 보아도 무방합니다.

  • HTML5 : <br>을 사용하며, <br/> 또는 <br />과도 혼용 가능
  • XHTML : <br />을 사용하며, 일부 <br> 또는 <br/>도 사용 가능

되도록이면 동일한 문서에서는 <br> 표기법을 통일하여 사용하는 것을 추천합니다. 이 외에도 <pre> 태그를 이용하여 줄바꿈, 띄어쓰기 등을 자유롭게 표현할 수 있는데, 이 태그도 다음에 기회가 되면 자세히 소개하도록 하겠습니다.

관련 게시물

ko_KRKorean