이 글에서는 다음을 사용하여 텍스트에 공백/탭을 추가하는 방법을 알아봅니다. 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="/verilog-tutorial/">Verilog 튜토리얼</a> </li><li> <a href="/calculus/">계산법</a> </li><li> <a href="/law/">법</a> </li><li> <a href="/python-turtle/">파이썬 거북이</a> </li><li> <a href="/javascript-functions/">자바스크립트 함수</a> </li><li> <a href="/commerce-difference-between/">상업-차이점</a> </li><li> <a href="/c-conversion-programs/">C 변환 프로그램</a> </li><li> <a href="/cyber-security/">사이버 보안</a> </li><li> <a href="/moores-voting-algorithm/">무어의 투표 알고리즘</a> </li><li> <a href="/python-numpy-linear-algebra/">Python Numpy-선형 대수학</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">라시/황도대 차트: 이름과 생년월일로 라시를 알아보세요.</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> 인도 점성술 체계는 각각 뚜렷한 특성을 지닌 12개의 라시 또는 황도대 별자리를 인식합니다. 출생 시 달의 위치에 따라 결정되는 달 별자리는 베다 점성술에서 매우 중요합니다. 조디악 표지판을 이해하면 개인이 자신의 성격 특성, 호환성 및 미래가 무엇인지 발견하는 데 도움이 됩니다.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/rashi-zodiac-chart-know-your-rashi-name"> <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="/9-amazing-legal-programs-131834">고등학생을 위한 9가지 놀라운 법률 프로그램 및 법률 인턴십</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/top-10-biggest-animals-world">세계에서 가장 큰 10대 동물 [2024년 업데이트 목록]</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-add-foreign-key-sql">SQL에 외래 키를 추가하는 방법</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/do-i-need-mouse-pad">마우스 패드가 필요합니까?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-check-if-variable-is-not-null-javascript">JavaScript에서 변수가 NULL이 아닌지 확인하는 방법</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="/bubble-sort-java">버블 정렬 자바</a>
</li><li><a href="/how-sort-list-java">자바 목록 정렬</a>
</li><li><a href="/alphabet-numbers">알파벳의 숫자</a>
</li><li><a href="/how-check-if-variable-is-not-null-javascript">js에서는 null이 아님</a>
</li><li><a href="/default-parameter-java">자바 기본 매개변수</a>
</li><li><a href="/list-cities-usa">미국에는 도시가 몇 개 있나요?</a>
</li><li><a href="/arduino-functions">아두이노의 기능</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="//es.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>