Please Enable JavaScript!
Gon[ Enable JavaScript ]

HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법

웹 프로그래밍/HTML
반응형

HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법

 

환경: Eclipse Mars, Android 4.2.2

 

HTML 에서는 텍스트의 줄 바꾸기는 엔터가 아닙니다. 그리고 스페이스를 여러 개 쳐서 공간을 늘여도 하나만 인식하게 됩니다. 그럼 웹 브라우저에서는 텍스트에 엔터 효과를 어떻게 줄까요? 두 가지 태그로 이야기 해 보겠습니다.

 

아래 그림처럼 HTML 문서에 엔터를 눌러서 줄을 띄워도 웹 브라우저에서는 한 줄로 나타나게 됩니다. 그리고 스페이스바로 아무리 띄워도 한 칸만 인식하게 됩니다. 이 때 줄바꿈을 해 주는 태그가 <br> <p> 입니다. <br> 은 줄바꾸는 태그이고 <p> 는 문단을 구분하는 태그입니다. 자동으로 줄바꿈이 되는 것이죠.

 

HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법

 

아래 그림은 위의 소스를 실행했을 때 모습입니다. 소스에서는 3칸을 띄웠지만 브라우저에서는 한 줄이 되었네요. 의도 한대로 표현 하시려면 <br> <p>이 필요합니다.

HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법

 

¤ <br> 태그를 적용

 

그럼 줄 바꿈을 위한 <br>, <p> 태그의 차이는 무엇일까요? <br> Line Break 의미로 태그가 있는 다음 내용은 줄바꿈이 됩니다. <p> <p> </p> 사이에 값을 넣어서 단락을 구성하는 것입니다. 단락이기 때문에 한 줄이 더 띄워 집니다. 그러니까 <br> 이 두 개 들어간 효과를 얻는 것이죠.

HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법

 

HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법

 

 

¤ <p> 태그를 적용

 

<p> 태그는 위에서 설명했듯이 단락을 의미합니다. 문서의 단락과 동일하다고 생각하시면 됩니다. 단락과 단락 사이에는 줄 바꿈과 함께 한 줄 더 띄워 집니다. 만약 <p> 태그 안에 <p> 태그가 들어가면 어떻게 될까요? 결과는 연속으로 사용한 것과 같은 효과를 나타냅니다. 그러니까 아래 두 소스는 동일한 결과가 나온다는 것이죠.

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> 정렬 </title>
 </head>
 <body>
 <p> <p> 로 문서의 줄 바꿈을 합니다.
 	<p> <p> 두 번째 단락입니다. </p> 
 </p>
 </body>
</html>

HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법

 

반응형
Posted by 녹두장군

댓글을 달아 주세요