본문으로 바로가기

html 줄바꿈 엔터 입니다

category 컴퓨터팁 2019. 2. 13. 06:13

html 줄바꿈 엔터 입니다

html 페이지 작업을 하다 보면 간단하게 보이지만 막상 잘 안되는 부분이 있는데요 . 

html 코드에 개행처리를 해서 줄바꿈을 하고 싶은데 잘 되지 않을 때가 있습니다. 

줄바꿈 코드도 <p>, <br> 태그로 나뉘는데요. 두 태그의 비교와

html 줄바꿈 엔터 방법을 알아보겠습니다.

html 줄바꿈 엔터



기본 html 이 준비되어 있습니다. 

모두 줄바꿈을 하려고 한 문장 입력 후 엔터키를 넣었습니다.

 문장 입력 후 엔터키



브라우저에서 보면 줄바꿈이 되지 않고 한줄로 나오게 됩니다.

줄바꿈이 되지 않고 한줄



두번째 줄 글자에 <p> 를 넣어 보겠습니다.

글자에 <p>



<p>넣은 문장 사이가 줄바꿈이 되었습니다.

문장 사이가 줄바꿈



간격을 넓히기 위해 <p> 태그를 여러개 넣어보겠습니다.

여러개의 p태그



하지만 하나넣은것과 동일한 높이입니다.

<P>태그는 단락의 시작과 끝으로 사용되는 태그라서 그렇습니다. 

일반적으로 <p>내용1</p> <p>내용2</p> 이렇게 사용됩니다.


단락의 엔터



그럼 줄바꿈 태그인 <br> 태그를 넣어보겠습니다. 

두번째 사이에 <br>태그를 3개 넣어보겠습니다.

br 태그 여러개



이제 간격이 벌어지네요

html 줄간격



차이를 확인하기 위해 첫번째 두번째 사이에 <br> 하나만 넣어보겠습니다.

변경이 되는 태그



<br> 태그 하나는 줄바꿈이 됩니다. 2개를 넣으면 2번 줄바꿈이 됩니다.

사용하는 갯수에 따라 적용

지금 까지 html 줄바꿈 엔터  사용 방법을 알아보았습니다.

반응형