이 글에서는 다음을 사용하여 텍스트에 공백/탭을 추가하는 방법을 알아봅니다. 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> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /><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><!--//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="/application-layer/">애플리케이션 계층</a> </li><li> <a href="/binary-search-tree/">이진 검색 트리</a> </li><li> <a href="/cpp-map/">Cpp-맵</a> </li><li> <a href="/cell-signaling/">세포 신호</a> </li><li> <a href="/t-sql-tutorial/">T-Sql 튜토리얼</a> </li><li> <a href="/java-timestamp-class/">Java 타임스탬프 클래스</a> </li><li> <a href="/godot-tutorial/">고도 튜토리얼</a> </li><li> <a href="/physics-formulas/">물리-공식</a> </li><li> <a href="/avl-tree/">Avl-트리</a> </li><li> <a href="/history-gk/">역사 Gk</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">설명: YouNow가 무엇인가요?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> YouNow는 무료 라이브 스트리밍 앱이자 웹사이트입니다. 사용자는 자신의 비디오를 방송하거나 다른 사용자의 라이브 방송을 시청할 수 있습니다.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/explained-what-is-younow-24278"> <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="/gimp-draw-arrow">김프 그리기 화살표</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/array-range-queries/">배열 범위 쿼리</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-include-iostream-c">C++에 iostream 포함이란 무엇입니까?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-many-ap-classes-do-you-need-1311138">아이비리그 학교에는 몇 개의 AP 수업이 필요합니까?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/factorial-python">Python의 계승()</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="/how-download-youtube-video-vlc-media-player">vlc에서 YouTube 비디오 다운로드</a>
</li><li><a href="/osi-model">네트워킹의 OSI 참조 모델</a>
</li><li><a href="/java-try-catch-block">자바에서 블록을 잡아보세요</a>
</li><li><a href="/java-string-substring">자바의 str.substring</a>
</li><li><a href="/how-sort-arraylist-java">정렬된 배열 목록 자바</a>
</li><li><a href="/tcp-ip-model">TCP 및 IP 모델</a>
</li><li><a href="/how-sort-arraylist-java">arraylist 정렬 자바</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="//uk.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>