HTML 태그 완벽 정리 – 줄바꿈 사용법과 실전 예제

HTML에서   태그는 텍스트에 한 번의 줄바꿈(line break)을 적용할 때 사용합니다. 이 태그는 별도의 닫는 태그가 필요 없는 빈 요소(empty element)로, 문단을 나누지 않으면서도 원하는 위치에서 새로운 줄을 시작할 수 있게 해줍니다. 아래 예제를 통해   태그의 기본적인 사용 방법을 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<body>
    <h2>데모 제목</h2>
    <p>데모 텍스트입니다! 다음 문단은 두 번의 줄바꿈 후에 나타납니다.</p> <br><br>
    <p>여기에 데모 문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 여기에 데모
    문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 여기에
    데모 문단을 작성했습니다. 다음 줄은 한 번의 줄바꿈 후에 나타납니다.</p><br>
    <p>데모 텍스트입니다!</p>
</body>
</html>

실행 결과

HTML br 태그 완벽 정리 – 줄바꿈 사용법과 실전 예제

위 예제에서는   태그를 사용해 줄바꿈을 구현했습니다. 먼저,   태그를 두 번 연속 사용하여 다음 문단 앞에 두 줄의 간격을 만든 부분입니다.

<p>데모 텍스트입니다! 다음 문단은 두 번의 줄바꿈 후에 나타납니다.</p> <br><br>

반면, 아래 코드에서는   태그를 한 번만 사용하여 다음 줄 앞에 단 한 번의 줄바꿈만 적용했습니다.

<p>여기에 데모 문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 여기에 데모 문단을 작성했습니다. 다음 줄은 한 번의 줄바꿈 후에 나타납니다.</p><br>
<p>데모 텍스트입니다!</p>

이처럼   태그의 사용 횟수에 따라 줄바꿈 간격을 자유롭게 조절할 수 있습니다. 다만 시맨틱 관점에서는 문단 사이의 간격을 넓히는 용도로   태그를 남용하기보다 CSS의 margin이나 padding 속성을 활용하는 것이 권장됩니다.