HTML 단락(Paragraphs)

이번에는 HTML 단락에 대해 살펴보자. 

단락은 항상 새 줄에서 시작하며 일반적으로 텍스트 블록이다.

 

HTML 단락(Paragraphs)

단락은 항상 새로운 줄에서 시작하고, 단락 전후에 브라우저는 자동으로 몇 몇 흰 공간을 추가한다.

예제

<p>이것은 단락이다.</p> <p>이것은 또다른 단락이다.</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 수평규칙

<hr> 태그는 HTML 페이지에서 주제 구분을 정의하며 대부분 수평 규칙으로 표시된다.
<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>

 

HTML 줄바꿈

HTML <br> 요소는 줄 바꿈을 정의한다.
새 문단을 시작하지 않고 줄 바꿈(새 줄 바꿈)을 원하는 경우 <br>을 사용한다:

예제

<p>This is<br>a paragraph<br>with line breaks.</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 단락 여러줄 표현문제 예

 

문제해결 - 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>

파이썬 단락 pre 태그 활용 옞

 

마무리

이번 글은 HTML문서의 단락에 관해 학습해 보았다.

<p> 태그를 활용하여 단락을 만드는 것과, 시 등에서 표현의 한계를 <pre> 태그를 활용하여 사용하는 방법 등에 대해 알아보았다. HTML문서에서 공백과 줄바꿈에 대해 잘 알아 두면 HTML문서 작성하는데 많은 도움이 될 것 같다.

 

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.