HTML / (6) 단락 (Paragraphs)

▶ 단락은 항상 새 줄에서 시작하며, 보통 텍스트 블록이다.

 

■ HTML 단락

▶ HTML <p> 요소는 단락을 정의한다.

▶ 단락은 항상 새 줄에서 시작하며, Browser는 앞뒤로 공백을 자동으로 추가한다

<p> 이것은 단락입니다. </p>

 

■ HTML 표시

▶ 크거나 작은 화면이나 크기가 조정된 창은 다른 결과를 만들기 때문에, HTML이 어떻게 표시되는지 확신할 수 없다.

▶ HTML을 사용하면 HTML 코드에 여분의 공백이나 줄을 추가하여 표시를 변경할 수 없는데,

▶ Browser는 페이지가 표시될 때 여분의 공백이나 줄을 자동으로 제거한다.

<p>
공백을 포함한
단락입니다.
한번 따라해
보세요
</p>

<p>
공백을 포함한
단락                  입니다.
한번 따라해
보세요
</p>

<p>
공백을 포함한 단락입니다. 한번 따라해보세요
</p>

 

■ HTML 수평 규칙

▶ <hr> 태그는 HTML 페이지의 주제별 구분(a thematic break) 을 정의한다.

▶ <hr> 요소는 HTML 페이지의 내용을 구분하는데 사용된다.

<h1> 1번 제목 </h1>
<p> 1번 단락 </p>
<hr>
<h2> 2번 제목 </h2>
<p> 2번 단락 </p>
<hr>

▶ <hr> 태그는 공백태그이다. 

 

■ HTML 개행(줄바꿈)

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

▶ 새 단락을 시작하지 않고, 줄바꿈을 하고 싶다면 <br>를 사용한다.

<p> 1번 단락 <br> 2번 단락 </p>

▶ <br> 태그는 공백태그이다.

 

■ 시(문학) 문제

▶ 이 시(문학)는 한 줄에 표시된다.

<p> 윤동주 - 별 헤는 밤 </p>

<p>
...

별 하나에 추억과

별 하나에 사랑과

별 하나에 쓸쓸함과

...
</p>

 

■ 해결책 - HTML <pre> 요소

▶ HTML <pre> 요소는 서식이 정해진 텍스트를 정의한다.

▶ <pre> 요소 안에 텍스트는 고정된 너비 글골로 표시되며, 공백과 줄바꿈을 유지한다.

<p> 윤동주 - 별 헤는 밤 </p>

<pre>
...

별 하나에 추억과

별 하나에 사랑과

별 하나에 쓸쓸함과

...
</pre>

 

출처 : https://www.w3schools.com/html/html_paragraphs.asp

HTML Paragraphs