이 글에서는 다음을 사용하여 텍스트에 공백/탭을 추가하는 방법을 알아봅니다. HTML 그리고 CSS . HTML은 기본적으로 둘 이상의 공백을 지원하지 않는다는 것을 알고 있으므로 텍스트 사이에 추가 공간을 확보하려면 추가 속성이나 CSS가 필요합니다.
다음과 같은 접근 방식을 사용하여 텍스트에 공백/탭을 추가할 수 있습니다.
내용의 테이블
HTML 엔터티 사용
- 그만큼 문자 엔터티는 고정된 공백인 줄바꿈 없는 공백을 나타내는 데 사용됩니다. 이는 일반 공간의 두 배로 인식될 수 있습니다. 줄바꿈으로 분리할 수 없는 공백을 줄에 만드는 데 사용됩니다.
- 그만큼 문자 엔터티는 현재 글꼴의 절반 크기를 의미하는 'en' 공백을 나타내는 데 사용됩니다. 이는 일반 공간의 두 배로 인식될 수 있습니다.
- 그만큼 문자 엔터티는 현재 글꼴의 포인트 크기와 동일함을 의미하는 'em' 공백을 나타내는 데 사용됩니다. 이는 일반 공간의 4배에 달하는 공간으로 인식될 수 있습니다.
통사론
// Regular space // Two spaces gap // Four spaces gap>
예: 이 예에서는 공백을 사용하는 방법을 살펴보겠습니다. , 및 텍스트 사이에 공백을 추가해야 하는 코드의 &emsp입니다.
HTML HTML/CSS를 사용하여 텍스트에 공백/탭을 삽입하는 방법은 무엇입니까? 제목> 머리> <body> <h1 style='color: green'>techcodeview.comh1> <b>HTML/CSS를 사용하여 텍스트에 공백/탭을 삽입하는 방법은 무엇입니까?b><p>이곳은 일반 공간입니다.p><p> 두칸의 공백입니다.p><p>이것은 4개의 공백 gap.p> body> html>>'>입니다.</tag> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/javascript-onload">자바스크립트 온로드</a>
</blockquote> <img src='//techcodeview.com/img/css-questions/66/how-insert-spaces-tabs-text-using-html.webp' alt="문자 엔터티"><h2 id='using-the-tabsize-property-in-css'> <b> <strong>CSS에서 탭 크기 속성 사용</strong> </b> </h2><p dir='ltr'><span>그만큼</span> <span>CSS의 탭 크기 속성</span> <span>표시되는 각 탭 문자의 공백 수를 설정하는 데 사용됩니다. 이 값을 변경하면 하나의 탭 문자에 필요한 만큼의 공백을 삽입할 수 있습니다. 그러나 이 방법은 미리 서식이 지정된 텍스트에서만 작동합니다(</span></p><tag data-text-3=' tags). The tab character can be inserted by holding the Alt and pressing 0 and 9 together. Syntax .tab { tab-size: value; /* for e.g: value = 2*/ } Example: In this example, we are going to implement the above-explained method. html <html> <head> <title>HTML/CSS를 사용하여 텍스트에 공백/탭을 삽입하는 방법은 무엇입니까? 제목><style>.tab1 { 탭 크기: 2; } .tab2 { 탭 크기: 4; } .tab4 { 탭 크기: 8; } 스타일> 머리> <body> <h1 style='color: green'>techcodeview.comh1> <b>HTML/CSS를 사용하여 텍스트에 공백/탭을 삽입하는 방법은 무엇입니까?b><pre class='hljs'zalupa>공백이 2개 있는 탭입니다.pre><pre class='hljs'zalupa>공백이 4개 있는 탭입니다.pre><pre class='hljs'zalupa>이것은 8개의 공백이 있는 탭입니다.pre> body> html> 출력: 사용자 정의 CSS 사용 margin-left 속성을 사용하여 일정량의 간격을 제공하는 새 클래스를 생성할 수 있습니다. 공간의 양은 이 속성에 지정된 픽셀 수로 제공될 수 있습니다. 표시 속성도 'inline-block'으로 설정되어 요소 뒤에 줄 바꿈이 추가되지 않습니다. 이렇게 하면 텍스트 및 기타 요소 옆에 공간을 배치할 수 있습니다. 구문 .tab { 디스플레이: 인라인 블록; 여백-왼쪽: 값; /* for e.g.: value = 40px*/ } 예: 이 예에서는 위에서 설명한 방법을 구현해 보겠습니다. HTML<html> <head> <title>HTML/CSS를 사용하여 텍스트에 공백/탭을 삽입하는 방법은 무엇입니까? 제목><style>.tab { 디스플레이: 인라인 블록; 왼쪽 여백: 40px; } 스타일> 머리> <body> <h1 style='color: green'>techcodeview.comh1> <b>HTML/CSS를 사용하여 텍스트에 공백/탭을 삽입하는 방법은 무엇입니까?b><p>이것은<span>스팬>문서의 탭 공간.p> body> html> 출력:></pre> </code></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">범주</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/java-calendar-class/">Java 캘린더 클래스</a> </li><li> <a href="/jpa-tutorial/">Jpa 튜토리얼</a> </li><li> <a href="/physics-class-9-cat/">물리-9급</a> </li><li> <a href="/cpp-pointer/">Cpp 포인터</a> </li><li> <a href="/free-games/">무료 게임</a> </li><li> <a href="/technical-scripter-2020-cat/">테크니컬 스크립터 2020</a> </li><li> <a href="/microprocessor-tutorial/">마이크로프로세서 튜토리얼</a> </li><li> <a href="/cpp-inheritance/">Cpp 상속</a> </li><li> <a href="/bts/">방탄소년단</a> </li><li> <a href="/banking-general-awareness/">은행 일반 인식</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">JavaScript 생성 요소</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> JavaScript는 javascript 튜토리얼, 소개, javascript oops, javascript 적용, 루프, 변수, 객체, 맵, typedarray 등을 사용하여 요소를 생성합니다.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/javascript-create-element"> <i class="fa fa-external-link"></i> 자세히보기</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">재미있는 기사</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/reading-an-excel-file-using-python">Python을 사용하여 Excel 파일 읽기</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/50-greatest-rappers-all-time">역사상 가장 위대한 래퍼 50인 [2024 업데이트]</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-sort-lines-text-files-linux-sort-command">Linux에서 텍스트 파일의 줄을 정렬하는 방법 | 정렬 명령</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/reference-data-types-java">Java의 참조 데이터 유형</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-sort-hashmap-java">Java에서 HashMap을 정렬하는 방법</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">인기 게시물</h2>
<div class="content">
<ul class="list"> <li><a href="/sonu-nigam">소누 니감</a>
</li><li><a href="/python-tkinter-button">tkinter 버튼</a>
</li><li><a href="/bfs-algorithm">bfs 검색</a>
</li><li><a href="/rakhi-sawant">라키 사완트</a>
</li><li><a href="/what-is-username">사용자 이름의 예</a>
</li><li><a href="/spying-mocking-abstract-classes">모의 추상 클래스를 주입하는 방법</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 판권 소유 | <a href="//techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">부인 성명</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">회사 소개</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">개인 정보 보호 정책</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>