[HTML] HTML - 6.단락

단락(Paragraph)

html에서 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미합니다.

이것을 문단이라고도 불리는데

 

HTML에서는 <p> 태그를 이용해서 이러한 단락을 표현합니다.

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<p>단락 부분</p>

<p> 태그의 위아래 여백은 자동적으로 채워집니다.

---

HTML 띄어쓰기와 줄 나누기

HTML 코드에서 띄어쓰기와 줄 나누기를 여러 번 작성해도 웹 브라우저 상에서는 전혀 영향을 주지 못합니다.

웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식합니다.

 

<p>
html에서 띄어스기를 하기위해서는 
이렇게 여러번의 띄어쓰기와 줄나누기를 한다.

줄나누기
</p>

위 예제는 여러번의 띄어쓰기와 줄 나누기를 표현하기 위해 <p>태그를 사용합니다.

하지만 <p>태그 내에 작성된 여러번의 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기만 표현됩니다.

 

<br> 태그(break line)을 사용해 새로운 단락을 만들지 않고도 줄을 나눌 수 있습니다.

<br>태그는 종료 태그가 없는 빈 태그(empty tag)입니다.

  <p>
        html에서 줄나누고 싶다면 <br>
        br 태그를 사용할 것 <br>
        <br>
        띄어스기 결과
    </p>

---

텍스트(text) 서식 미리 정의

HTML 코드에 작성된 텍스트 서식을 그대로 표현하기 위해서는 <pre> 태그를 사용합니다.

<pre> 태그내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저내에 그대로 표현됩니다.

    <pre>
        줄을 나누기 위해
        pre 태그를 사용한다

        출력 결과
    </pre>

---

수평 가로 구분선

문서 내 단락을 나누려 할때 또는 내용상 구분을 표현하고자 할 때에는 수평 가로 구분선을 

사용합니다.

 

이렇게 사용되는 수평 가로 구분선을 HTML 코드에서 

<hr>태그로 간단히 표현할 수 있습니다.

<p>맨 위 단락</p>
<hr>
 <p>단락1 표현</p>
<hr>
<p> 단락2 표현</p>

---

참고 자료

코딩교육 티씨피스쿨