이 글에서는 다음을 사용하여 텍스트에 공백/탭을 추가하는 방법을 알아봅니다. 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="//spiritscaution.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="/data-link-layer/">데이터링크 계층</a> </li><li> <a href="/bash-tutorial/">배쉬 튜토리얼</a> </li><li> <a href="/jquery-tutorial/">Jquery 튜토리얼</a> </li><li> <a href="/es6-cat/">Es6</a> </li><li> <a href="/data-mining/">데이터 수집</a> </li><li> <a href="/r-dataframe-function/">R Dataframe 기능</a> </li><li> <a href="/java-keyword/">Java 키워드</a> </li><li> <a href="/shortcut-keys/">단축키</a> </li><li> <a href="/testng-tutorial/">Testng 튜토리얼</a> </li><li> <a href="/geometric/">기하학</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="//spiritscaution.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> Arduino, Arduino 설치, Arduino 데이터 유형, Arduino 변수, Arduino 루프, Arduino 기능, Arduino 문자열 등을 포함한 Arduino 기능</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/arduino-functions"> <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="/geometry-maq/">기하학 - Maq</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-static">C++ 정적</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/cyber-defence-intelligence/">사이버 방어 인텔리전스</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/vb-net-tutorial/">Vb.net 튜토리얼</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/be-not-be-analyzing-hamlets-soliloquy-131542">죽느냐 사느냐: 햄릿의 독백 분석</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="/java-if-else-statement">그렇지 않으면 자바에서</a>
</li><li><a href="/an-array-strings-c">C 코드 문자열 배열</a>
</li><li><a href="/javascript-queryselector">쿼리 선택기</a>
</li><li><a href="/c-gui">C++ GUI</a>
</li><li><a href="/java-switch-statement">자바 스위치 int</a>
</li><li><a href="/kat-timpf">캣 팀프 순 가치</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="//it.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>
</body>
</html>