[HTML/CSS] #2.줄바꿈

HTML에서 줄바꿈과 관련된 태그는 두가지가 있다. 바로 br태그와 p태그이다.

그렇다면 둘의 차이는 무엇인가?

 

다음의 코드를 보자.

 

The br HTML element produces a line break in text (carriage-return). It is
useful for writing a poem or an address, where the division of lines is
significant.<br><br>
The p HTML element represents a paragraph. Paragraphs are usually represented in
visual media as blocks of text separated from adjacent blocks by blank lines
and/or first-line indentation, but HTML paragraphs can be any structural
grouping of related content, such as images or form fields.

 

그럼 다음과 같이 줄바꿈이 실행된다. <br>태그를 2번 썼으므로 줄바꿈을 2번 실행한 것이다.

 

br태그 사용결과

 

이번에는 <p>태그를 써보자.

 

<p>
  The br HTML element produces a line break in text (carriage-return). It is
  useful for writing a poem or an address, where the division of lines is
  significant.
</p>
<p>
  The p HTML element represents a paragraph. Paragraphs are usually represented
  in visual media as blocks of text separated from adjacent blocks by blank
  lines and/or first-line indentation, but HTML paragraphs can be any structural
  grouping of related content, such as images or form fields.
</p>

그리고 결과를 보면

 

p태그 사용결과

결과는 거의 똑같이 나온다.

 

그렇다면 br과 p의 차이점은 무엇인가?

위에서 보았듯이 br태그는 단순 줄바꿈의 역할을 한다.

반면 p태그는 단락간의 경계를 구분하는 역할을 한다.

따라서, 단락을 표현할 때에는 p태그를 사용하는 것이 웹페이지를 정보로서 더 가치있게 만들어준다.

 

• br - 단순 줄바꿈의 역할
• p - 단락간의 경계를 구분하는 역할

하지만 p태그에는 단점이 하나 존재한다. 바로 간격간의 간격이 고정되있다는 점이다.

CSS를 이용하면 이러한 한계를 극복할 수 있다. 다음의 코드를 보자.

 

<p>
  The br HTML element produces a line break in text (carriage-return). It is
  useful for writing a poem or an address, where the division of lines is
  significant.
</p>
<p style="margin-top: 45px">
  The p HTML element represents a paragraph. Paragraphs are usually represented
  in visual media as blocks of text separated from adjacent blocks by blank
  lines and/or first-line indentation, but HTML paragraphs can be any structural
  grouping of related content, such as images or form fields.
</p>

그리고 결과를 보자.

 

p태그에 CSS를 적용한 결과

위와 같이 p태그에 style="margin-top:45px"를 추가하면 p태그의 위쪽에 45px만큼의 여백을 줄 수 있다.