HTML 강좌 7장, HTML Paragraphs, p, br, pre 태그

2017.02.14 06:00

이번 시간에는 HTML 강좌 7장, HTML Paragraphs에 대한 내용 강좌를 시작합니다.

 

HTML Paragraphs

 

HTML <p> element는 문단(단락)을 정의하는데요.

 

다음과 같은 형태로 나타냅니다.

 

<p>금년에는 대박나서 팔자 고쳤으면 좋겠네.</p>

 

기본적으로 위의 예시처럼 start tag <p>와 end tag </p> 사이에 content를 위치시키면 됩니다.

 

특징을 살펴보면 <p>와 </p> 사이에 글자 사이에 띄어쓰기 형태로 한 칸의 공간을 띄우든 여러 칸을 띄우든 한 칸으로 인식을 합니다.

 

또한 줄바꿈을 하더라도 한 줄로 이어서 표현됩니다.

 

<p>금년에 로또 복권      구입해서     당
첨되면 좋겠네. 1등      아니라도 2등
에라도 당첨되면 좋겠네.</p>

 

위 예시처럼 문서를 작성하셨더라도 브라우저를 통해서 보면 다음과 같이 표시됩니다.

 

<p>금년에 로또 복권 구입해서 당첨되면 좋겠네. 1등 아니라도 2등에라도 당첨되면 좋겠네.</p>

 

몇 칸을 띄어쓰기를 했던 1칸으로만 표시되며 줄바꿈을 했더라도 한 줄로 이어져 있음을 볼 수 있습니다.

 

HTML 줄바꿈

 

줄바꿈을 표현하고자 한다면 아래 예시처럼 <br> 태그를 삽입하면 됩니다.

 

<p>금년에 로또 복권 구입해서 당<br>
첨되면 좋겠네. 1등 아니라도 2등<br>
에라도 당첨되면 좋겠네.</p>

 

이처럼 HTML <br> element는 줄바꿈을 정의합니다.

 

HTML <pre> Element

 

위의 예시처럼 HTML 문서를 작성한 그대로 보여줄 수는 없을까요?

 

바로 HTML <pre> element가 이런 것을 가능하게 해줍니다.

 

<pre>
   내가 어제 돼지 꿈을 꿨었지.

   게다가 용      꿈도 꿨지.

   오호라, 용이 돼지를 물고 하늘로 승천
   하더라.

   로또복권 10매 구매했는데 1등 당첨되려나?
</pre>

 

위의 예시처럼 <pre>와 </pre> 사이에 있는 내용은 위 예시에서 보이는 것과 같이 웹 페이지에 표시됩니다.

신고
Posted by googlinfo(원래버핏)
Tags
이 댓글을 비밀 댓글로

티스토리 툴바