HTML에서 라인 브레이크 및 수평 규칙을 만들려면 이러한 목적으로 설계된 특정 태그를 사용합니다.
라인 브레이크의 경우 <br> 태그를 사용합니다. 이 태그는 자체 폐쇄이며 닫는 태그가 필요하지 않습니다. HTML 코드에 삽입되면 다음 텍스트 나 요소가 새 줄에서 시작하도록 강요합니다. 다음은 사용 방법의 기본 예입니다.
<code class="html"><p>This is a paragraph of text.<br>This line starts on a new line.</p></code>
수평 규칙의 경우 <hr> 태그를 사용합니다. <br> 태그와 마찬가지로 <hr> 태그는 자체적으로 폐쇄됩니다. HTML 문서에 배치되면 페이지를 가로 질러 수평선을 생성하여 컨텐츠를 시각적으로 분리하는 데 사용할 수 있습니다. 다음은 사용의 예입니다.
<code class="html"><p>This is the first section of content.</p> <hr> <p>This is the second section of content.</p></code>
이 두 태그는 CSS와 함께 추가로 스타일링하여 <br> 의 선 높이 변경 또는 <hr> 의 스타일과 색상을 변경하는 것과 같은 모양을 수정할 수 있습니다.
수평 규칙을 삽입하기위한 HTML 코드는 <hr> 입니다. 이 태그는 내용을 분리하는 주제별 브레이크 또는 수평선을 만드는 데 사용됩니다. 자체 폐쇄 태그이므로 별도의 닫는 태그가 필요하지 않습니다. 아래는 html에서 <hr> 태그를 사용하는 방법의 예입니다.
<code class="html"><p>Content above the horizontal rule.</p> <hr> <p>Content below the horizontal rule.</p></code>
<hr> 태그에 속성을 추가하여 크기, 너비 또는 정렬을 설정하는 등 모양을 수정할 수도 있습니다. 그러나보다 정확한 제어와 콘텐츠 및 프레젠테이션의 더 나은 분리를 위해서는 스타일링에 CSS를 사용하는 것이 좋습니다.
<br> 태그를 사용하지 않고 HTML에 라인 브레이크를 추가 할 수 있습니까? 예, <br> 태그를 사용하지 않고 HTML에 라인 브레이크를 추가 할 수 있습니다. 이를 달성하는 방법에는 여러 가지가 있습니다.
CSS 이 방법은 HTML에서 수평 규칙에 대한 의미와 목적 : 유연성과 스타일링 : 내용 분리 및 프레젠테이션 : 브라우저 지원 및 일관성 : 요약하면, white-space 속성 사용 : CSS white-space 속성을 사용하여 텍스트 내에서 선 파단을 보존 할 수 있습니다. 예를 들어, white-space: pre; 또는 white-space: pre-wrap; html 소스에서와 같이 라인이 깨지는 것을 유지하기 위해 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 또는 <code class="html"><div style="white-space: pre;"> This text has line breaks without using br tags. </div></code>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 태그 사용 : <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> 태그는 사전 형식화 된 텍스트를 표시하는 데 사용됩니다. 즉, 공백과 라인 브레이크가 모두 보존됩니다. <code class="html"><pre class="brush:php;toolbar:false"> This text has line breaks without using br tags.
또는
엔티티 : 이들은 각각 라인 피드 및 캐리지 리턴을위한 HTML 엔티티입니다. 그러나 그 효과는 브라우저 및 컨텍스트에 따라 다를 수 있으며 일반적으로 이메일 또는 텍스트 입력 영역과 같은 컨텍스트에서 더 유용합니다. <code class="html"><p>This text
has a line break.</p></code>
<br> 태그에 대한 대안을 제공하여 명시 적 태그 사용없이 라인 브레이크를 허용합니다. HTML의 수평 규칙에 대한
<hr> 와 CSS 사용의 차이점은 무엇입니까?<hr> 태그와 CSS 사용의 차이는 주로 유연성, 의미론 및 컨텐츠 및 프리젠 테이션의 분리를 중심으로 진행됩니다.
<hr> 태그 : <hr> 태그는 컨텐츠 섹션 사이의 주제별 중단을 나타내는 시맨틱 HTML 요소입니다. 주제 나 섹션의 전환을 나타내는 검색 엔진과 접근성 도구에 의해 본질적으로 이해됩니다.
<hr> 태그 : <hr> 태그는 CSS와 스타일을 지정할 수 있지만 기본 스타일은 CSS 와만 수평 규칙을 만드는 것만 큼 유연하지 않을 수 있습니다. 색상, 너비 및 기타 속성을 수정할 수 있지만 기본 수평선으로 시작하면 창의성을 제한 할 수 있습니다.<div> 또는 다른 요소를 사용하고 <code>border , background 또는 box-shadow 와 같은 CSS 속성을 적용하여 원하는 모양을 달성 할 수 있습니다.
<hr> 태그 : <hr> 태그 사용은 컨텐츠 구조를 프리젠 테이션과 혼합합니다. CSS로 스타일링 할 수는 있지만 태그 자체는 HTML 컨텐츠의 일부입니다.
<hr> 태그 : <hr> 태그는 모든 브라우저에서 지원되며 약간 다른 기본 스타일이 있지만 다른 브라우저에 지속적으로 표시됩니다.<hr> 태그를 사용하면 의미 론적 의미와 수평 규칙을 삽입하는 빠른 방법을 제공하지만 CSS는 컨텐츠 및 프리젠 테이션 분리에 중점을 둔 최신 웹 개발 관행과 더 큰 유연성을 제공하고 더 잘 조정합니다.
위 내용은 HTML에서 라인 브레이크 및 수평 규칙을 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
