HTML 5: , , 또는 ?

2024-04-23

HTML 5: <br>, <br/>, 또는 <br />?

<br> 태그는 다음 두 가지 방법으로 사용할 수 있습니다.

  • <br>: 이것은 자체 닫히는 태그이며 종료 태그가 필요하지 않습니다.
  • <br />: 이것은 종료 슬래시를 포함하는 자체 닫히는 태그입니다.

HTML 5에서는 두 가지 형식 모두 유효하며 어떤 것을 사용하든 상관 없습니다.

참고 사항:

  • <br></br>은 HTML 5에서 유효하지 않습니다. 두 개의 줄 바꿈으로 해석됩니다.
  • XHTML은 대소문자를 구분하지만 HTML은 대소문자를 구분하지 않습니다.
  • 일반 웹사이트에 HTML을 출력하는 경우 텍스트/html로 HTML5를 제공할 때 언제든지 <br> 또는 <br />를 사용할 수 있습니다.

다음은 <br> 태그를 사용하는 방법의 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Line Breaks</title>
</head>
<body>
<p>This is a paragraph.</p>
<br>
This is a new line.
<br />
This is another new line.
</body>
</html>

이 코드는 다음과 같이 표시됩니다.

This is a paragraph.

This is a new line.

<br> 태그는 텍스트를 포맷하는 데 유용한 도구입니다. 주소, 시 또는 단순히 텍스트에 줄 바꿈을 추가해야 하는 경우 <br> 태그를 사용할 수 있습니다.




HTML에서 <br> 태그를 사용하는 예제 코드

단락 간 줄 바꿈

<!DOCTYPE html>
<html>
<head>
<title>Line Breaks Between Paragraphs</title>
</head>
<body>
<p>This is the first paragraph.</p>
<br>
<p>This is the second paragraph.</p>
</body>
</html>

결과:

주소 표시

<!DOCTYPE html>
<html>
<head>
<title>Address</title>
</head>
<body>
<p>123 Main Street</p>
<br>
Anytown, CA 12345
</body>
</html>

123 Main Street Anytown, CA 12345

시 표시

<!DOCTYPE html>
<html>
<head>
<title>Poem</title>
</head>
<body>
<p>Roses are red,</p>
<br>
<p>Violets are blue,</p>
<br>
<p>I love writing code,</p>
<br>
<p>And you do too.</p>
</body>
</html>

Roses are red, Violets are blue, I love writing code, And you do too.

코드 표시

<!DOCTYPE html>
<html>
<head>
<title>Code</title>
</head>
<body>
<p>&lt;p&gt;This is a paragraph.&lt;/p&gt;</p>
<br>
<p>&lt;br&gt;This is a line break.&lt;/br&gt;</p>
</body>
</html>

<br>This is a line break.

특수 문자 표시

<!DOCTYPE html>
<html>
<head>
<title>Special Characters</title>
</head>
<body>
<p>Copyright &copy; 2024</p>
<br>
<p>Registered &reg; trademark.</p>
</body>
</html>

Copyright © 2024

Registered ® trademark.

위 예제는 HTML에서 <br> 태그를 사용하는 다양한 방법을 보여줍니다. 텍스트를 포맷하고 코드를 표시하는 데 유용한 도구입니다.

참고:

  • <br> 태그는 빈 태그이므로 종료 태그가 없습니다.
  • <br> 태그는 대소문자를 구분하지 않습니다.
  • HTML 5에서는 <br>, <br />, <br/> 모두 유효합니다.

이 정보가 도움이 되었기를 바랍니다! 다른 질문이 있으면 알려주세요.




HTML에서 줄 바꿈을 만드는 <br> 태그의 대체 방법

CSS 속성 사용:

  • margin-bottom 속성: 이 속성은 아래 요소와의 여백을 늘려 줄 바꿈 효과를 만들 수 있습니다.

예제:

p {
  margin-bottom: 20px; /* 아래 요소와 20픽셀 여백 추가 */
}

p + p {
  margin-top: 20px; /* 이전 요소 위 20픽셀 여백 추가 */
}

장점:

  • <br> 태그를 사용하지 않아 코드가 더 간결해집니다.
  • 유연성이 높아 원하는 간격을 정확하게 조정할 수 있습니다.
  • 다른 요소에도 스타일을 적용하는 데 유용합니다.
  • 모든 브라우저에서 일관되게 작동하지 않을 수 있습니다.
  • 초보자가 이해하기 어려울 수 있습니다.

요소 사용:

  • <div> 또는 <p>와 같은 블록 요소를 사용하여 줄 바꿈을 만들 수 있습니다.
  • <hr> 태그를 사용하여 가로줄을 추가하여 줄 바꿈 효과를 만들 수 있습니다.
<div>This is a paragraph.</div>
<div>This is another paragraph.</div>
  • 간단하고 사용하기 쉽습니다.
  • 코드가 더冗長해질 수 있습니다.
  • CSS만큼 유연하지 않습니다.
  • 공백(), 탭(\t), 캐리지 리턴(\r) 문자를 사용하여 줄 바꿈을 만들 수 있습니다.
This is a paragraph.
  
This is another paragraph.
  • 매우 간단합니다.
  • 다른 방법이 필요 없는 경우 유용합니다.

HTML에서 줄 바꿈을 만드는 가장 좋은 방법은 상황에 따라 다릅니다. 간단하고 사용하기 쉬운 방법을 찾는 경우 공백, 탭 또는 캐리지 리턴 문자를 사용하는 것이 좋습니다. 코드가 더 명확하고 유지 관리하기 쉽기를 원하는 경우 CSS 속성을 사용하는 것이 좋습니다. 가장 많은 제어 기능이 필요한 경우 요소를 사용하는 것이 좋습니다.


html


HTML에 PDF를 포함하는 권장 방법

HTML에 PDF를 포함하는 방법은 여러 가지가 있지만, 각 방법마다 장단점이 존재합니다.<object> 태그 사용이 방법은 가장 오래되고 간단한 방법이지만, 일부 브라우저에서 호환되지 않을 수 있으며, 접근성이 좋지 않다는 단점이 있습니다...


HTML form에서 readonly 속성을 사용하여 SELECT 및 INPUT 태그를 비활성화하는 방법

예시:참고:readonly 속성을 설정하면 사용자가 탭 키로 입력 필드로 이동할 수 있지만, 값을 변경할 수는 없습니다.JavaScript를 사용하여 readonly 속성을 동적으로 설정하거나 제거할 수 있습니다.disabled 속성은 사용자가 입력 필드를 사용할 수 없도록 설정하는 데 사용됩니다...


HTML, Internet Explorer 및 브라우저: 가 하는 일은 무엇인가요?

작동 방식IE는 다양한 렌더링 엔진을 사용하여 웹 페이지를 렌더링합니다. 이러한 엔진 각각은 웹 표준을 해석하고 표시하는 방식이 다를 수 있습니다. X-UA-Compatible 태그를 사용하면 IE가 가장 최신 렌더링 엔진을 사용하도록 지시할 수 있습니다...


HTML, Google Chrome 및 Autocomplete 관련 'Chrome이 autocomplete=off'를 무시하는 이유 및 해결 방법'

하지만, 예상과 달리 Google Chrome에서는 특정 상황에서 autocomplete="off" 속성을 무시하는 문제가 발생합니다. 이는 사용자 정보 유출 및 보안 취약성으로 이어질 수 있는 심각한 문제입니다.Chrome에서 autocomplete="off" 속성을 사용하여 자동 완성을 완전히 비활성화하려면...


Angular에서 새 탭에서 링크를 여는 방법

HTML 속성 사용HTML a 태그의 target 속성을 사용하여 새 탭에서 링크를 열 수 있습니다.target="_blank" 속성은 링크를 새 탭 또는 새 창에서 열도록 브라우저에 지시합니다.Angular Router를 사용하여 새 탭에서 링크를 열 수도 있습니다...


html

HTML5에서 비공백 자기 닫는 태그: 유효한가요?

자기 닫는 태그는 />로 끝나는 태그입니다. 예를 들어, <img src="image. jpg" alt="Image description" /> 태그는 이미지를 삽입하는 데 사용되는 자기 닫는 태그입니다.비공백 자기 닫는 태그는 내용이 없는 자기 닫는 태그입니다