태그 - 줄바꿈 태그

HTML5,CSS3

태그 - 줄바꿈 태그

e코딩넷 블로그 2024. 2. 2. 11:45

태그는 HTML에서 줄 바꿈 할 때 사용되는 태그입니다. 이것은 닫는 태그가 필요하지 않습니다.

HTML에서는 일반적인 엔터(줄바꿈)를 무시하고 렌더링되기 때문에, 단순히 텍스트를 엔터로 나눠서 작성해도 브라우저에서는 줄바꿈이 되지 않습니다. 아래의 예제를 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>엔터로 줄바꿈 예제</title>
</head>
<body>

    <h2>엔터로 줄바꿈 예제</h2>
    
    <p>
        안녕하세요!
        반갑습니다.
        이렇게 엔터를 사용하면 줄 바꿈이 되지 않아요.
    </p>

    <p>
        HTML에서는 일반적인 엔터(줄바꿈)는 무시되기 때문에,
        특별한 태그를 사용하지 않으면 텍스트가 한 줄로 표시됩니다.
    </p>

</body>
</html>

위 예제에서 태그를 사용하지 않고 엔터로만 텍스트를 나눠놓았습니다. 그 결과로 브라우저에서는 텍스트가 하나의 줄로 표시됩니다. 따라서 줄 바꿈을 위해서는 태그나 다른 블록 요소를 사용해야 합니다.

아래는 간단한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BR 태그 예제</title>
</head>
<body>

    <h2>BR 태그 예제</h2>
    
    <p>
        안녕하세요!<br>
        반갑습니다.<br>
        이렇게 간단하게 줄을 바꿀 수 있어요.
    </p>

    <p>
        HTML5에서는 줄 바꿈을 위해 BR 태그를 사용합니다.<br>
        이렇게 여러 번 사용하면 여러 줄에 걸쳐 텍스트를 작성할 수 있어요.
    </p>

</body>
</html>

위 예제에서 태그는 텍스트를 새로운 줄로 바꿉니다. 이를 통해 여러 문장이나 단락을 간편하게 작성할 수 있습니다. 학습자들이 실제로 브라우저에서 이 코드를 열어보면서 태그가 어떻게 작동하는지 확인하면 이해하기 쉬울 것입니다.

<br> 태그 - 줄바꿈 태그