html 띄어쓰기 태그 사용

웹 페이지를 만들 때 띄어쓰기 태그를 적극적으로 활용하지 않으면, 텍스트나 문장 사이의 간격이 맞지 않아 보기에 불편한 웹 페이지가 되어버릴 수 있습니다. 이러한 문제를 해결하기 위해 HTML 띄어쓰기 태그 사용을 합니다. 같이 간단히 알아보겠습니다.

1) 1. 띄어쓰기 태그 사용

2) 2. html 띄어쓰기 – 태그

3) 3. html 띄어쓰기 – wbr 태그

4) 4. html 띄어쓰기 – hr 태그

5) 5. html 띄어쓰기 – pre 태그

6) 6. 결론 및 의견

1. 띄어쓰기 태그 사용

HTML에서 띄어쓰기를 조절할 수 있는 태그는  , <wbr>, <hr>, <pre> 등이 있습니다.   태그는 공백을, <wbr> 태그는 자동 줄 바꿈을, <hr> 태그는 수평선을, <pre> 태그는 고정폭 글꼴로 텍스트를 표시합니다. 이러한 태그를 적절히 사용하면 띄어쓰기를 조절하여 텍스트나 문장 간 간격을 적절히 조절할 수 있습니다.

2. html 띄어쓰기 –   태그

  태그는 HTML에서 가장 많이 사용되는 띄어쓰기 태그입니다. 이 태그는 공백을 생성합니다. 브라우저는   태그가 생성한 공백을 합치지 않습니다. 따라서,   태그를 사용하여 텍스트나 테이블 내부의 요소들을 정렬할 수 있습니다.

1
2
3
4
5
6
7
8
9
<html>
<head>
    <title>&nbsp; Example</title>
</head>
<body>
    <p>This is some&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;spaced out text.</p>
    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Indented text.</p>
</body>
</html>
Colored by Color Scripter
cs

실행화면

첫 번째 단락에서 공백을 생성하여 텍스트를 오른쪽으로 정렬하고, 두 번째 단락에서는 공백을 생성하여 텍스트를 들여쓰기했습니다.

3. html 띄어쓰기 – wbr 태그

<wbr> 태그는 긴 텍스트를 줄 바꿈할 수 있는 위치를 나타냅니다. 이 태그는 브라우저가 긴 텍스트를 적절히 줄 바꿈할 수 있도록 도와줍니다. <wbr> 태그를 사용하여 긴 URL이나 단어가 레이아웃을 깨지지 않도록 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <title>&lt;wbr&gt; Example</title>
</head>
<body>
    <p>This is a long URL that needs to break: <wbr>https://www.example.com/very/long/url/that/needs/to/break.html</p>
    <p>This is a long word that needs to break: <wbr>supercalifragilisticexpialidocious</p>
</body>
</html>
 
Colored by Color Scripter
cs

실행화면

브라우저가 넓을때는 길게 글이 늘어짐

브라우저가 좁을때는 자동으로 문단이 내려가면서 맞춰짐

4. html 띄어쓰기 – hr 태그

<hr> 태그는 수평선을 그리는 태그입니다. 이 태그는 웹 페이지에서 여러 섹션을 구분하는 데 사용할 수 있습니다. 또한, 요소들을 구분하는 데도 사용할 수 있습니다. CSS를 사용하여 <hr> 태그의 스타일을 변경할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
    <title>&lt;hr&gt; Example</title>
    <style>
        .custom-hr {
            color: red;
            border-style: dashed;
            border-width: 2px;
        }
    </style>
</head>
<body>
    <h1>Section 1</h1>
    <p>This is the content of section 1.</p>
    
    <hr>
    
    <h1>Section 2</h1>
    <p>This is the content of section 2.</p>
    
    <hr class=“custom-hr”>
    
    <h1>Section 3</h1>
    <p>This is the content of section 3.</p>
</body>
</html>
 
Colored by Color Scripter
cs

실행화면

5. html 띄어쓰기 – pre 태그

<pre> 태그는 텍스트를 고정폭 글꼴로 표시합니다. 이 태그를 사용하면, 원래의 텍스트 서식을 유지할 수 있습니다. 이 태그는 정확한 문자 위치에 의존하는 테이블이나 ASCII 아트와 같은 텍스트를 표시할 때 유용합니다. 또 <pre> 태그는 HTML에서 텍스트를 표시할 때, 텍스트의 원형을 유지하면서 문자열의 공백, 줄바꿈 등을 그대로 보여주는 태그입니다. 이 태그는 문서의 코드를 보여줄 때 유용하게 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
    <title>&lt;pre&gt; Example</title>
</head>
<body>
    <pre>
        function sayHello() {
            console.log(“Hello, World!”);
        }
 
        var message = “This is a preformatted text.”;
        console.log(message);
    </pre>
</body>
</html>
 
Colored by Color Scripter
cs