본문으로 바로가기

html 줄바꿈 입니다

category HTML 2018. 2. 9. 01:22

html 줄바꿈 (엔터) 입니다

html 작업 시 내용 작성 중 새로운 글이 생기면 줄바꿈을 해야 하는데요 코드에서 아무리 엔터를 눌러봐도 한줄로만 나옵니다. p 태그와 br 태그를 사용해야 하는데요 

이번 시간은 html 줄바꿈 태그를 알아보겠습니다. 

html 줄바꿈



네게의 문단을 새로 입력 했습니다. 

물론 내용에 엔터키를 눌러서 코드에서 줄바꿈을 했습니다. 브라우저에서 어떻게 보이는지 볼까요?

html 줄바꿈



예상한대로 한줄로 나옵니다.

html 엔터



문단에 줄바꿈을 할 때 <p> 태그를 넣습니다. 

html은 코드를 열었으면 닫아야 합니다. 

<html>  </html> 이렇게요

중간에 내용이 들어가지 않을 때는 <html/> 로 해서 끝에 /를 넣으면 됩니다.

<p> 태그를 사용할 때도 <p/> 로 사용하는것이 바람직합니다. 

문단사이에 <p/>태그를 넣어보겠습니다.

html줄바꿈태그



결과를 보면 p 태그를 넣은 문단에 줄바꿈이 되었습니다.

html 엔터



간격을 너 넓히고자 해서 <p/> 태그를 넣어 보겠습니다.

html 줄바꿈



좀전과 그대로입니다.

<p/> 태그는 아무리 넣어도 한줄로만 인식 됩니다. 해서 이럴 경우 <br/> 태그를 이용합니다. 

html 줄바꿈 입니다



<br/>  태그를 3개 넣어보겠습니다. 이렇게 되면 3번 줄바꿈이 됩니다. 

html 줄바꿈 입니다



결과를 보면 간격이 벌어진 것을 확인할 수 있습니다.

html 줄바꿈



<br/>  태그를 하나부터 3개까지 넣어서 비교를 해보겠습니다

html 줄바꿈



<br/> 를 하나 넣으면 그냥 줄바꿈이 되고 두개와 3개는 간격이 더 벌어 집니다. 

사용범위에 따라 <p/>  ,<br/> 태그를 적절히 사용하시면 됩니다. 

html줄바꿈태그

이상 html  줄바꿈 방법을 알아보았습니다.

반응형