[HTML] 문단, 단락 태그 - P 태그, BR 태그

 이번 포스팅에서는 Body 태그 안에 들어가는 본문 내용과 관련된 태그들을 이야기해볼까 합니다. Head 태그 안에 들어가는 내용은 실질적으로 웹페이지 안에는 나타나지 않는 것들이라 처음 접하는 분들은 이해가 잘 안 될 수 있을 겁니다. 하지만 Body 태그 안에 들어가는 태그들은 실제적으로 보여지는 부분이기 때문에 좀 더 이해가 쉬울 것으로 생각됩니다.

 제일 먼저 살펴볼 태그는 P 태그입니다. Paragraph의 약어로 문단이나 단락을 나타내는 태그라고 보시면 됩니다. P 태그로 구분되는 본문 내용은 문단 사이에 설정한 줄간격만큼 떨어져 표시되기 때문에 가독성을 높일 수 있는 방법이기도 합니다.

<p> 첫번째 문단 </p>
<p> 두번째 문단 </p>

 기본 사용 방법은 위와 같습니다. 본문에 표시하고자하는 내용을 양쪽에서 감싸주면 끝입니다. 여기에 정렬방식을 지정하려면 아래와 같이 입력하면 됩니다.

<p align="center"> 가운데 정렬 </p>
<p align="right"> 오른쪽 정렬 </p>
<p align="left"> 왼쪽 정렬 </p>
<p align="justify"> 양쪽 정렬 </p>

 실행결과는 아래와 같습니다. align 속성을 이용해서 문단을 정렬하게 되는데 justfiy의 경우 양쪽 정렬이라고 합니다. 문단의 내용이 길어서 줄바꿈을 할 때 좌측 우측 모두 맞추어주어 보기 좋게 만드는 것입니다.

가운데 정렬 오른쪽 정렬 왼쪽 정렬 양쪽 정렬

 또는 아래와 같은 코드를 이용해서 정렬을 할 수도 있습니다. 티스토리 코드입력을 해보면 아래와 같이 나타나지요. 요즘에는 이런 식으로 많이 이용하고 있습니다. 덤으로 line-height 속성은 줄간격을 부여하는 것인데 2는 200%를 의미합니다.

<p style="text-align: justify; line-height: 2;"> 안녕하세요. 환영합니다. </p>

 문단 가운데 강제로 줄바꾸기를 하려면 BR 태그를 이용합니다. 닫는 태그 없이 단독으로 사용됩니다.

<p style="text-align: justify; line-height: 2;"> 안녕하세요.<br />환영합니다. </p>

안녕하세요. 환영합니다.

 결과를 보면 줄바꿈과 줄간격이 적용된 것을 볼 수 있습니다. 닫는 태그가 없이 단독으로 사용되는 경우에는 <br>이라고만 해도 되는데 <br /> 이렇게 하나의 태그에 같이 닫는 표시를 해주면 나중에 구분하기가 좋습니다.