HTML에서 줄 건너뛰기

Subodh Poudel 2023년2월19일
  1. <p> 태그를 사용하여 HTML에서 줄 건너뛰기
  2. 두 개의 <br> 태그를 사용하여 HTML에서 한 줄 건너뛰기
  3. <hr> 태그의 opacity 속성을 0으로 설정하여 HTML에서 줄 건너뛰기
  4. CSS margin 속성을 사용하여 HTML에서 줄 건너뛰기
HTML에서 줄 건너뛰기

이 기사에서는 HTML에서 줄을 건너뛰거나 추가하는 여러 가지 방법을 살펴봅니다.

<p> 태그를 사용하여 HTML에서 줄 건너뛰기

HTML에서 한 줄을 건너뛰는 가장 간단한 방법은 <p> 태그를 사용하는 것입니다. 단락 요소인 <p> 태그는 HTML에서 단락을 생성합니다.

단락은 HTML 문서의 텍스트 블록을 나타내는 블록 수준 요소입니다. 우리는 항상 두 단락 사이에 빈 줄을 찾을 수 있습니다.

그렇게 두 단락을 식별할 수 있습니다. <p> 요소를 사용하여 줄을 자동으로 건너뜁니다.

간단한 예에서 구현해 보겠습니다.

먼저 <p> 태그를 만들고 태그 안에 원하는 텍스트를 작성합니다. 다음으로 다른 <p> 태그를 만들고 그 안에 일부 단락 내용을 작성합니다.

아래 코드 조각은 두 텍스트 사이에 빈 줄을 추가합니다. 이것이 HTML에서 텍스트 사이의 줄을 건너뛸 수 있는 방법입니다.

예제 코드:

<p>
 The first paragraph
</p>
<p>
 The second paragraph
</p>

두 개의 <br> 태그를 사용하여 HTML에서 한 줄 건너뛰기

<br> 태그를 사용하여 HTML에서 한 줄을 건너뛸 수도 있습니다. 줄 바꿈 요소인 <br>은 한 줄을 나눕니다.

연속된 두 줄을 나누기 때문에 두 번 사용하면 빈 줄이 생성됩니다. 태그에는 닫는 태그가 없습니다. 이를 빈 태그라고 합니다.

<br> 태그의 한 가지 응용 프로그램은 시를 쓰는 동안 텍스트를 새 줄로 지정하는 것입니다.

시의 두 절 사이를 건너뛰기 위해 <br> 태그를 구현한 아래 예를 보십시오. 첫 번째 줄 끝에 있는 <br> 태그는 줄을 끊고 다음 줄로 이동합니다.

두 번째 줄 이후에 두 개의 <br> 태그를 사용했습니다. 첫 번째 줄을 끊고 세 번째 줄로 안내합니다.

그런 다음 두 번째 <br> 태그는 세 번째 줄을 끊고 빈 줄을 만듭니다. 그 후, 우리는 각 줄 끝에 단일 <br> 태그를 사용하여 또 다른 시 연을 작성했습니다.

따라서 예제는 두 개의 <br> 태그를 사용하여 텍스트 사이의 한 줄을 건너뛸 수 있는 방법을 보여줍니다.

예제 코드:

<p>
 got out of the bed at four, not seven<br>
 after meditation, it was like heaven<br>
 <br>
 kept myself up, coding till eleven<br>
 lately i've been doing Java, I 'll be using Maven
</p>

<hr> 태그의 opacity 속성을 0으로 설정하여 HTML에서 줄 건너뛰기

이 메서드는 HTML에서 줄을 건너뛰는 트릭을 구현합니다. 트릭은 <hr> 태그를 사용하여 보이지 않게 만드는 것입니다.

<hr> 태그는 수평선을 만듭니다. 수평선의 CSS opacity 속성을 0으로 설정할 수 있습니다.

결과적으로 수평선이 차지하는 공간은 빈 줄처럼 보입니다.

예를 들어 원하는 텍스트를 작성하십시오. 다음으로 <hr> 태그를 사용하여 수평선을 만듭니다.

style 속성을 사용하여 인라인 방식으로 CSS 스타일을 적용합니다. 불투명도 속성을 0으로 설정하십시오. <hr> 다음에 다른 줄을 작성하십시오.

여기서 opacity 속성의 0 값은 수평선을 완전히 투명하게 만듭니다. 0 값은 요소를 완전히 투명하게 만들고 1 값은 완전히 불투명하게 만듭니다.

결과적으로 이 예제는 <hr> 태그와 opacity 속성을 사용하여 텍스트 사이의 줄을 건너뛸 수 있는 방법을 보여줍니다.

예제 코드:

The line before blank line
<hr style="opacity:0">
The line after blank line

CSS margin 속성을 사용하여 HTML에서 줄 건너뛰기

이제 CSS margin 속성을 사용하여 HTML에서 줄을 건너뛰는 마지막 방법에 대해 설명합니다.

<section> 태그를 사용하여 건너뛴 줄 뒤에 쓸 텍스트 섹션을 나타낼 수 있습니다. 그런 다음 해당 섹션의 상단에 여백을 적용하여 공백이 발생하도록 할 수 있습니다.

예를 들어 원하는 텍스트를 작성합니다. 다음으로 <section> 요소를 만들고 그 안에 텍스트를 작성합니다.

CSS에서 section 요소를 선택하고 margin 속성을 1em 0으로 설정합니다. 1em 값은 섹션의 상단 및 하단 여백과 유사합니다.

결과적으로 텍스트의 상단과 하단에 글꼴 크기와 동일한 크기의 여백이 생성됩니다.

이것이 CSS margin 속성을 사용하여 HTML에서 빈 줄을 만드는 방법입니다.

HTML 코드:

This is the first line
<section>This is the line after the skipped line</section>

CSS 코드:

section {
 margin: 1em 0;
}
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn

관련 문장 - HTML Line