Skip to content
toylee blog · 컴퓨터, 프로그램 정보 공유

toylee blog · 컴퓨터, 프로그램 정보 공유

html 띄어쓰기 태그 사용

toylee, 2023년 06월 03일

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

[목차]

  • 1. 띄어쓰기 태그 사용
  • 2. html 띄어쓰기 –   태그
  • 3. html 띄어쓰기 – wbr 태그
  • 4. html 띄어쓰기 – hr 태그
  • 5. html 띄어쓰기 – pre 태그
  • 6. 결론 및 의견

1. 띄어쓰기 태그 사용

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

2. html 띄어쓰기 – &nbsp; 태그

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

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

실행화면

html 띄어쓰기 태그  

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

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

실행화면

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

wbr tag

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

wbr tag

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

실행화면

html 띄어쓰기 태그

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

실행화면

pre tag

6. 결론 및 의견

HTML에서 띄어쓰기를 조절할 수 있는 태그를 적절히 활용하면, 웹 페이지의 가독성을 높일 수 있습니다. 따라서, HTML을 사용하여 웹 페이지를 제작할 때, 띄어쓰기 태그를 적극적으로 활용해보는 것을 추천합니다.

[관련글]

Flex Css display 주요기능

all html tag 설명 및 예제

html css 예제 적용 및 연결

http https 차이

html html 띄어쓰기html 띄어쓰기 태그

글 내비게이션

Previous post
Next post

Related Posts

html

html 띄어쓰기

2023년 07월 11일

HTML은 웹 페이지를 만드는 가장 기본적인 언어입니다. 한국어 웹 페이지에서는 띄어쓰기 규칙이 다른 언어들과 다릅니다. 이에 따라 한국어 문장에서의 띄어쓰기 규칙과 HTML에서 이를 적용하는 방법에 대해 더 자세히 알아보겠습니다. 한국어 띄어쓰기 규칙 한국어에서는 띄어쓰기 규칙이 다른 언어들과 다릅니다. 예를 들어, “안녕하세요”와 같은 문장에서는 “안녕”과 “하세요” 사이에 띄어쓰기가 없습니다. 이러한 띄어쓰기…

Read More
html

all html tag 설명 및 예제

2023년 05월 27일

HTML은 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. 웹 브라우저에게 웹 페이지를 어떻게 표시해야 하는지 알려주는 일종의 지시어이죠. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 데 중요한 역할을 하며, 다양한 태그를 사용해 내용을 표시합니다. 이번 글에서는 all html tag 설명 및 예제 까지 제공하겠습니다. 1. All HTML Tag – 기본 태그…

Read More
html

Flex Css display 주요기능

2023년 05월 30일

그동안 다양한 방식으로 레이아웃을 구성해왔지만, Flex CSS는 유연하게 레이아웃을 구성할 수 있는 기술입니다. 이번 글에서는 Flex CSS를 사용하는 이유와 Flex CSS 주요 기능에 대해 알아보겠습니다.

Read More

답글 남기기 응답 취소

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

최신 글

  • usb 쓰기금지 해제방법, 어렵지 않아요
  • usb a타입에 대해 알아보자
  • 포토샵 누끼따기 방법
  • vpn 연결방법 쉽게 설명해드립니다.
  • usb 장치 인식 실패시 해결방안

최신 댓글

  1. 윈도우 단축키 모음 Best5의 ace
  2. http https 차이의 챗GPT 란? · Working for you

보관함

  • 2025년 6월
  • 2025년 5월
  • 2025년 4월
  • 2025년 3월
  • 2025년 2월
  • 2025년 1월
  • 2024년 12월
  • 2024년 11월
  • 2024년 8월
  • 2024년 6월
  • 2024년 5월
  • 2024년 3월
  • 2024년 2월
  • 2023년 11월
  • 2023년 9월
  • 2023년 8월
  • 2023년 7월
  • 2023년 6월
  • 2023년 5월
  • 2023년 4월
  • 2023년 3월
  • 2023년 2월

카테고리

  • flutter
  • html
  • linux
  • macbook
  • Pc Useful Tips
  • 미분류
  • 워드프레스
  • 자바(Java)
  • 파이썬
  • 프로그래밍
©2025 toylee blog · 컴퓨터, 프로그램 정보 공유 | WordPress Theme by SuperbThemes