HTML 태그 – 줄바꿈 요소의 올바른 이해와 사용 방법

` ` 태그의 정의 및 사용법

  태그는
텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타내는 태그입니다.
이 태그는 일반적으로 다음 텍스트를 새 줄로 시작함으로써 시, 주소, 코드 등에 표현할 때 유용합니다.

HTML

<p>
    CSS(Cascading Style Sheets)는
    <br> <!-- 텍스트를 끊어 줄바꿈하고 싶은 지점에 삽입합니다. -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>

위 예시에서 확인할 수 있는 것처럼   태그는 텍스트를 끊어 줄바꿈하고 싶은 지점에 삽입니다.
  태그 뒤의 텍스트는 새 줄로 시작합니다.

  태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그()가 없다는 의미입니다.

주의할 점

  태그는 실제로 텍스트 블록 내용의 일부인 텍스트의 줄바꿈을 만드는 목적으로 사용되어야 합니다.
스타일은 CSS로 제어하는 것이 좋습니다.

문단 사이의 여백으로 활용

문단 사이에   태그를 사용하면 빈 줄과 같은 여백이 생깁니다. 이것은 반복적인 줄바꿈으로 생기는 시각적 효과이지만 이러한 여백을 만들기 위해   태그를 사용하는 것은 삼가야합니다.

대신 CSS로 제어하는 것이 좋습니다.

HTML - 잘못된 사례

<p>
   문단 사이에 br 태그를 사용하면 빈 줄과 같은 여백이 생깁니다.
</p>
<br>
<p>
    이것은 반복적인 줄바꿈으로 생기는 시각적 효과이지만
    이러한 여백을 만들기 위해 br 태그를 사용하는 것은
    삼가야 합니다.
</p>

HTML 태그

HTML - 올바른 사례

<p style="margin-bottom: 3em;">  <!-- CSS의 margin-bottom 속성으로 여백 조정 -->
   문단 사이에 br 태그를 사용하면 빈 줄과 같은 여백이 생깁니다.
</p>
<p>
    이것은 반복적인 줄바꿈으로 생기는 시각적 효과이자만
    이러한 여백을 만들기 위해 br 태그를 사용하는 것은
    삼가야 합니다.
</p>

문단의 구분을 ` ` 태그로 활용

문단의 구분을   태그로 활용하는 것은 웹 접근성에 문제가 발생할 수 있습니다. 시각장애인을 위한 스크린 리더가   태그를 문단으로 인식하지 않기 때문에 이 스크린 리더를 사용하는 사람에게는 문맥의 흐름 파악에 혼돈이 발생할 수 있습니다.

여백 효과를 위한 연속적인 ` ` 태그 활용

  태그를 연속적으로 사용해서 여백 효과를 주는 것은   태그의 "텍스트에서 줄을 바꾼다는 목적"과는 다르게 단순히 스타일링만을 위한 것입니다.

HTML

<p>
    CSS(Cascading Style Sheets)는
    <br>
    <br> <!-- 연속적인 <br> 태그 활용 -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>

이렇게 스타일링만을 위한 목적일 경우에도 CSS를 활용하는 것이 좋습니다.

HTML

<p>
    <span style="margin-bottom: 2em; display:inline-block">
        CSS(Cascading Style Sheets)는
    </span>
    <br> <!-- 스타일을 직접 적용하지 않습니다. -->
    HTML(이나 XML)로 작성된 웹 페이지의 모양과 스타일,
    즉 디자인을 지정하는 데 사용하는 언어입니다.
</p>

HTML 태그