[HTML] 줄바꿈(엔터) 하기

HTML에서 줄바꿈 입력하기

HTML에서 줄바꿈을 하는 방법을 알아보도록 하자.

HTML 소스코드에서는 아무리 엔터를 여러번 치면서 줄바꿈을 해도

HTML이 보여지는 웹브라우저에서는 줄바꿈이 적용되지 않는다.

줄바꿈을 적용하기 위해서는 몇가지 특별한 태그를 사용해야 하는데,

지금부터 그 태그들을 알아보도록 하겠다.

1. <br>

br 태그는 'break'의 약자로 단순히 HTML에서 줄바꿈을 할 때 사용된다.

여러개의 <br> 태그를 입력하면 입력된 갯수만큼 줄바꿈이 실행된다.

다른 태그들과 달리 열고(<br>) 닫는(</br>) 태그가 존재하지 않고

그냥 <br> 태그만 써 주어도 무방하다.

See the Pen html example by anna (@hianna) on CodePen.

2. <p></p>

p 태그는 'paragraph'의 약자로, html에서 문단을 표현 할 때 사용된다.

<p>와  </p> 태그로 내용을 감싸면, 내용의 위와 아래쪽에 일정 크기의 공백이 생긴다.

See the Pen html example by anna (@hianna) on CodePen.

이것은 <p>와 </p> 태그 위와 아래쪽에 일정 크기의 공백이 생긴 것으로

이 공백의 크기는 css의 margin 속성을 이용하여 조정할 수도 있다.

3. <pre></pre>

pre는 'preformatted' 약자로, <pre></pre> 태그 내에 있는 

엔터와 스페이스가 그대로 웹 브라우저에 적용되어 보여지게 된다.

See the Pen html example by anna (@hianna) on CodePen.

위의 예에서 <pre></pre> 태그 안에서는 <p>태그나 <br>, &nbsp; 태그를 사용하지 않아도

공백과 줄바꿈이 태그 안에 입력된 대로 적용되는 것을 볼 수 있다.

이 태그는 보통 컴퓨터 소스 코드와 같은 특별한 내용을 표현하기 위해서 종종 사용된다.