HTML 줄바꿈(4가지 방법)

  HTML 코딩 엔터(Enter)

줄바꾸기 위해서 코딩시에 엔터를 사용하고 브라우저에서 결과를 확인 해 보면 줄바꿈이 발생하지 않은 것을 확인 할 수 있습니다. 

1 2	줄바꿈 테스트 입니다.   줄바꿈 테스트 입니다.

 

 

▼ HTML 코딩 시에  줄바꾸는 4가지 방법에 대하여 알아보겠습니다.

 

  <P> 태그

문단나누기 태그

문단의 여백(margin) 설정 값으로 인해 줄 간격이 발생합니다.

발생하지 않게 하기 위해서는 margin 값을 0px 로 설정하면 됩니다. 

ex) <P style="margin:0px;">내용</P>

1 2	<P>줄바꿈 테스트 입니다.</P>   <P>줄바꿈 테스트 입니다.</P>

 

 

  <BR> 태그

줄 바꾸기 태그로 BR은 Break를 의미 합니다.

1 2	줄바꿈 테스트 입니다.<BR>   줄바꿈 테스트 입니다.<BR>

 

 

  <PRE> 태그

태그 안의 문장에서 여백이나 줄 바꿈 등이 모두 그대로 유지 되어 표시 되게하는 태그 입니다.

즉, <pre> 태그 안의 내용을 브라우저에서 그대로 볼 수 있습니다.

1 2 3 4

<PRE>     줄바꿈 테스트 입니다.     줄바꿈 테스트 입니다.   </PRE>

 

 

  <DIV> 태그

영역을 나누는 DIV 태그로 줄바꿈 표현이 가능합니다.

기본 너비 설정 값이 100%이기 때문에 다음가 같이 사용하게 되면 영역이 나뉨에 따라 줄바꿈 현상이 발생하게 됩니다.

1 2	<DIV>줄바꿈 테스트 입니다.</DIV>   <DIV>줄바꿈 테스트 입니다.</DIV>