HTML에서 텍스트 사이에 공백 추가
-
<pre>태그를 사용하여 HTML의 텍스트에 공백 삽입 -
사용 HTML의 텍스트에 공백을 삽입하려면 -
CSS
padding속성을 사용하여 HTML의 텍스트에 공백 삽입
이 기사에서는 HTML의 텍스트에 공백과 탭을 삽입하는 몇 가지 방법에 대해 설명합니다. HTML은 일반적으로 한 번에 둘 이상의 공백을 허용하지 않습니다. 이러한 메서드는 둘 이상의 공백을 추가하는 데 도움이 됩니다.
<pre> 태그를 사용하여 HTML의 텍스트에 공백 삽입
<pre> 태그는 미리 형식이 지정된 텍스트를 정의합니다. HTML 코드에 작성된 그대로 텍스트를 표시합니다. 이 태그 안의 공백은 작성된 대로 표시됩니다. 거의 모든 웹 브라우저에서 지원됩니다. <pre> 태그를 사용하여 HTML을 사용하여 텍스트에 공백을 삽입할 수 있습니다. <pre> 태그는 HTML의 거의 모든 전역 속성을 지원합니다.
예를 들어 HTML 본문 내에서 먼저 <pre> 태그를 엽니다. 이 태그 안에 원하는 텍스트를 입력합니다. 이제 일반적으로 텍스트에서 문장의 단어 사이에 임의의 공백을 추가하십시오(I'm learning HTML used in the example below) . 원하는 텍스트를 완성한 후 <pre> 태그를 닫습니다. 또한 이전에 열린 모든 태그를 닫는 것을 잊지 마십시오.
아래 예는 HTML의 텍스트에 뱅크 스페이스를 추가하는 방법을 보여줍니다. <pre> 태그가 열리면 미리 형식이 지정된 텍스트를 지정합니다. I'm learning HTM 텍스트는 <pre> 태그 안에 작성됩니다. 보시다시피 learning과 HTML 단어 사이에 5개의 공백이 사용되었습니다. 출력은 또한 작성된 것처럼 두 단어 사이에 5개의 공백을 표시합니다. 우리는 원하는 만큼 공간을 배치할 수 있습니다. 이런 식으로 HTML의 텍스트에 공백을 추가할 수 있습니다.
예제 코드:
<pre> I'm learning HTML</pre>
사용 HTML의 텍스트에 공백을 삽입하려면
를 사용할 수 있습니다. 태그를 사용하여 HTML 코드의 텍스트에 공백을 추가합니다. 엔티티 NBSP는 비분리 공간을 나타냅니다. 줄 바꿈하지 않는 공백은 새 줄로 나누지 않는 공백으로 해석됩니다. 줄 바꿈하지 않는 공백으로 구분된 두 단어는 다른 줄이 아니라 같은 줄에 있습니다. 브라우저가 HTML 페이지에서 공백을 자르지 않도록 하는 것이 좋습니다.
예를 들어 HTML 본문 안에 원하는 텍스트를 입력합니다. 공백을 추가하려는 위치에 를 입력합니다. 같은 수의 를 입력해야 합니다. 원하는 여백으로. 의 인스턴스 5개 쓰기 나머지 텍스트를 계속 입력합니다. 완료되면 이전에 열린 모든 태그를 닫습니다.
아래 예는 HTML 코드의 텍스트에 공백을 추가하는 또 다른 방법을 보여줍니다. learning이라는 단어 뒤에는 라는 항목이 있습니다. 5회 연속 주문됩니다. 이는 learning과 HTML 단어 사이에 5개의 공백이 있음을 의미합니다. 코드의 텍스트에 5개의 공백을 입력하면 브라우저는 4개의 공백을 제거하지만  는 원하는 만큼 공백을 추가하는 데 도움이 됩니다. 따라서 이것은 HTML 코드에 공백을 추가하는 또 다른 방법입니다.
예제 코드:
<body>
I'm learning HTML
</body>
CSS padding 속성을 사용하여 HTML의 텍스트에 공백 삽입
CSS padding 속성을 사용하여 HTML의 텍스트에 공백을 추가할 수도 있습니다. <span> 태그와 함께 padding 속성을 사용하여 공백을 확보할 수 있습니다. <span> 태그는 새 줄에서 시작하지 않으므로 인라인 컨테이너라고 합니다. 텍스트 또는 문서를 마크업하는 데 사용됩니다. 시각적 변화를 단독으로 수행하지 않기 때문에 본질적으로 아무 것도 나타내지 않습니다. 스타일링 목적으로 사용되며 모든 웹 브라우저에서도 지원됩니다. 또한 HTML의 모든 전역 및 이벤트 속성을 지원합니다. <span> 요소의 padding-left 속성을 사용하여 공백을 추가할 수 있습니다.
예를 들어 HTML 본문 안에 원하는 텍스트를 입력합니다. 공백을 추가할 위치에 <span> 요소를 생성하고 그 안에 스타일을 적용합니다. padding-left 속성을 30px로 설정합니다. 그런 다음 <span> 태그를 닫습니다. 나머지 텍스트를 작성하고 코드에서 이전에 열린 모든 태그를 닫습니다.
아래 예에서 learning 단어 뒤에 <span> 요소를 만들었습니다. 요소에 30px의 왼쪽 패딩을 적용했습니다. 그것은 우리가 learning 단어 뒤에 30px의 공백을 만들고 나머지 단어는 계속된다는 것을 의미합니다. 따라서 CSS와 HTML을 사용하여 텍스트에 공백을 추가했습니다.
예제 코드:
<body>
I'm learning <span style="padding-left:30px;"></span>HTML
</body>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn