본문 바로가기
html

[html기초]  , br, pre, p 태그

by 지구별에 2014. 3. 12.

 

 

[html기초]  , br, pre, p 태그 사용법

 

 

html기초에서 제일 처음 다루었어야 하는 게 아닌가 싶은데요....

 

각 항목을 다루기에는 분량이 너무 적어서, 같이 묶어서 정리해 봤습니다.

 

 

<br>

 

<br> 태그는 line break 약자로, 줄바꿈 할 때 사용합니다.

 

<br>태그는 끝태그가 없는 빈 태그(empty tag)입니다. 하지만

 

xhtml 에서는 <br /> 태그로, 열고 닫는 태그를 대신합니다.


  

 <사용 예>

 

우선 아래에서 태그 작성 시 '오신 것을' 이후에 '환영 합니다'가

줄바꿈 되어 있지만, 실제 실행해 보면 한 줄로 나옵니다.

 

 

<html>
 <head>
 <title>지구별 안내서</title>

 </head>

<body>
지구별 홈페이지에 오신 것을
환영 합니다
</body>
</html>

 

 

 

 

이번엔 <br>태그를 넣어 보겠습니다.

 

 

<html>
 <head>
 <title>지구별 안내서</title>

 </head>

<body>
지구별 홈페이지에 오신 것을 <br>환영 합니다
</body>
</html>

 

 실행하면 중간에 줄 바꿈되었습니다.

 

이렇게 한 줄 짜리 문장을 줄바꿈 할 때 <br> 태그를 사용하지만

 

문단을 분리할 때는 <p> 태그를 사용합니다.

 

 

<p>

 

 


<p>는 paragraph 약자로 문단을 구분할 때 씁니다.

<p>태그 앞뒤로 여백이 들어가는데 <br>이 두 번 들어간 것과 같은 결과가 나옵니다

 

사용 예: <p> 내용 </p>

 

<html>
 <head>
 <title>지구별 안내서</title>

 </head>

<body>
<p>지구별 홈피에 오신 것을</p>

<p>환영 합니다</p>
<p>환영 합니다</p>
<p>환영 합니다</p>

</body>
</html>

 

 

 

 

<pre>

 

<pre> 는 Preformatted Text의 약자로, 입력한 대로 화면 출력되는 태그입니다.

문장 안에 있는 여백이나 줄바꿈도 그대로 표시됩니다

 

코드를 표시할 때 사용할 수 있습니다.

 

 

 

<html>
 <head>
 <title>지구별 안내서</title>

 </head>

<body>


<p>환영 합니다</p>

 

<!-- CSS 코드는 이렇게 -->
<pre>
p {
  color:red;
}
</pre>

</body>
</html>

 

<pre>실행 하면입니다. 줄바꿈이나 여백도 그대로 표시되네요..

 

 


 

&nbsp;

 
&nbsp; 는   non breaking space 의 약자인데요

태그는 아니고 공백을 넣는 기능을 합니다.

 

맨 위에 br 태그 사용 예에서 살펴 보았 듯이, html 코드 작성할 때

 

아무리 줄바꿈을 해 보았자, 실행 화면은 줄바꿈이 되지 않아요.

 

또한 공란을 아무리 많이 넣어도 하나 이상의 공란은 인식하지 않아요.

 

공란이 5개라면 1개만을 표시함.

 

 

사용 예 :

 

<html>
 <head>
 <title>지구별 안내서</title>

 </head>

<body>

<p>환영 &nbsp;&nbsp; &nbsp; &nbsp;합니다</p>
<p>환영&nbsp; &nbsp;합니다</p>
<p>환영 &nbsp; &nbsp;합니다</p>

</body>
</html>

 

 

html 코딩과 실행 화면을 대조해서 보시면 공백 구분이 좀 더 쉬우실 거예요. 

 


 

 

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

CSS란? (HTML과 CSS의 차이, CSS 작성법)

 

html, css, javascript 주석 처리 방법

 

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

 

[html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

반응형

댓글