이번 시간에는 HTML 강좌 7장, HTML Paragraphs에 대한 내용 강좌를 시작합니다.
HTML Paragraphs
HTML <p> element는 문단(단락)을 정의하는데요.
다음과 같은 형태로 나타냅니다.
<p>금년에는 대박나서 팔자 고쳤으면 좋겠네.</p>
기본적으로 위의 예시처럼 start tag <p>와 end tag </p> 사이에 content를 위치시키면 됩니다.
특징을 살펴보면 <p>와 </p> 사이에 글자 사이에 띄어쓰기 형태로 한 칸의 공간을 띄우든 여러 칸을 띄우든 한 칸으로 인식을 합니다.
또한 줄바꿈을 하더라도 한 줄로 이어서 표현됩니다.
<p>금년에 로또 복권 구입해서 당
첨되면 좋겠네. 1등 아니라도 2등
에라도 당첨되면 좋겠네.</p>
첨되면 좋겠네. 1등 아니라도 2등
에라도 당첨되면 좋겠네.</p>
위 예시처럼 문서를 작성하셨더라도 브라우저를 통해서 보면 다음과 같이 표시됩니다.
<p>금년에 로또 복권 구입해서 당첨되면 좋겠네. 1등 아니라도 2등에라도 당첨되면 좋겠네.</p>
몇 칸을 띄어쓰기를 했던 1칸으로만 표시되며 줄바꿈을 했더라도 한 줄로 이어져 있음을 볼 수 있습니다.
HTML 줄바꿈
줄바꿈을 표현하고자 한다면 아래 예시처럼 <br> 태그를 삽입하면 됩니다.
<p>금년에 로또 복권 구입해서 당<br>
첨되면 좋겠네. 1등 아니라도 2등<br>
에라도 당첨되면 좋겠네.</p>
첨되면 좋겠네. 1등 아니라도 2등<br>
에라도 당첨되면 좋겠네.</p>
이처럼 HTML <br> element는 줄바꿈을 정의합니다.
HTML <pre> Element
위의 예시처럼 HTML 문서를 작성한 그대로 보여줄 수는 없을까요?
바로 HTML <pre> element가 이런 것을 가능하게 해줍니다.
<pre>
내가 어제 돼지 꿈을 꿨었지.
내가 어제 돼지 꿈을 꿨었지.
게다가 용 꿈도 꿨지.
오호라, 용이 돼지를 물고 하늘로 승천
하더라.
로또복권 10매 구매했는데 1등 당첨되려나?
</pre>
위의 예시처럼 <pre>와 </pre> 사이에 있는 내용은 위 예시에서 보이는 것과 같이 웹 페이지에 표시됩니다.