html 7. 단락, 줄바꿈 차이 <p></p> or <br>

1. 아무리 코드에 공백이나 줄바꿈 enter 눌러봤자 홈페이지 상에서는 그렇게 안보임.

글씨를

이런식으로

내려써도 

태그가 적용되지 않는 이상 그렇게 안보임ㅇㅇ

 

2. <p> </p> 는 아예 단락을 바꿈, <br> 은 줄바꿈.

화면상 

---

아

 

안녕하세요

 

이렇게 쓰고 싶다면, <p> </p>

<p> 아 </p> 
<p> 안녕하세요 </p>

 

---

 

아

안녕하세요

 

이렇게 쓰고 싶다면,  <br>

<p> 아 <br> 안녕하세요 </p>

---

단락은 항상 새 줄에서 시작하며, 일반적으로 하나의 텍스트 덩어리.

---

HTML 단락

HTML <p>요소는 단락을 정의함.

단락은 항상 새 줄에서 시작하며, 브라우저는 단락 앞뒤에 자동으로 공백(여백)을 추가함.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

 

---

HTML 표시

HTML이 어떻게 표시될지는 확신할 수 없다.

화면 크기나 창 크기에 따라 결과가 달라진다.

HTML에서는 HTML 코드에 공백이나 줄 바꿈을 추가해도 표시 방식을 변경할 수 없다.

브라우저는 페이지를 표시할 때 불필요한 공백과 줄 바꿈을 자동으로 제거한다.

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

 

---

HTML 가로선

`<br>` 태그 <hr>는 HTML 페이지에서 주제별 구분선을 정의하며, 대부분 가로선으로 표시된다.

`<p>` 요소는 <hr>HTML 페이지에서 콘텐츠를 구분하거나 변경 사항을 정의하는 데 사용된다.

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

해당 <hr>태그는 빈 태그. 즉, 종료 태그가 없다.

---

HTML 줄 바꿈

HTML <br>요소는 줄 바꿈을 정의한다.

<br>새 단락을 시작하지 않고 줄 바꿈(새 줄)을 하려면 이 옵션을 사용하면 된다.

<p>This is<br>a paragraph<br>with line breaks.</p>

해당 <br>태그는 빈 태그입니다. 즉, 종료 태그가 없다.

---

예시

이 시는 한 줄로 표시됨. 지금 시각적으로는 띄어져 있지만, 코드에 br 이나 p 태그가 없기 때문임. 

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

 

---

해결책 - HTML <pre> 요소

HTML <pre>요소는 미리 서식이 지정된 텍스트를 정의함

요소 내부의 텍스트는 <pre>고정 폭 글꼴(일반적으로 Courier)로 표시되며 공백과 줄 바꿈이 모두 유지됨.

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

---

HTML 태그 참조

태그 참조에는 HTML 요소와 해당 속성에 대한 추가 정보가 포함되어 있다.

 

Tag	Description
<p>	Defines a paragraph
<hr>	Defines a thematic change in the content
<br>	Inserts a single line break
<pre>	Defines pre-formatted text