HTML에서 줄 건너뛰기
-
<p>
태그를 사용하여 HTML에서 줄 건너뛰기 -
두 개의
<br>
태그를 사용하여 HTML에서 한 줄 건너뛰기 -
<hr>
태그의opacity
속성을0
으로 설정하여 HTML에서 줄 건너뛰기 -
CSS
margin
속성을 사용하여 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 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