HTML 단락(Paragraph)을 표현하는 방법

단락(Paragraph)
단락이란 텍스트와 텍스트 사이를 끊어서 구분할 수 있도록 하는 것이다. 각각 하나하나의 의미를 부여한다. 문단이라고도 부른다. HTML태그에서는 <p> 태그를 사용하여 정의한다.

예제

<!DOCTYPE html>
<html>
<body>

<p>이것은 단락입니다.</p>
<p>이것 또한 단락입니다.</p>
<p>마찬가지로 이것도 단락입니다.</p>

</body>
</html>

※<p>태그의 위아래로는 약간의 여백(margin)이 자동으로 삽입되게 된다.

<p> 태그의 띄어쓰기와 줄 나누기 표시방식

html코드에서 단락을 사용할 경우 띄어쓰기나 줄 나누기를 여러 번 사용하여도 웹 브라우저를 통해서 보여지는 화면에는 아무런 영향을 주지 못한다. 실제 사용자 입장에서 여러번 띄어쓰기 하거나 줄 나누기를 해도, html 문법이 들어가지 않은 상태라면 웹브라우저는 오직 하나의 띄어쓰기와 줄로만 인식하게 된다.

예제

<!DOCTYPE html>
<html>
<body>

<p>
줄 나누기를
통해서
적어봤습니다.
실제로 화면상에 이렇게 표시될까요?
</p>

<p>
이건                띄어쓰기를                    이런식으로 해본것입니다.
그리고 줄                      나누기도 해봤습니다. 웹브라우저 크롬 또는 IE에서는 어떻게 표현될까요?
</p>

</body>
</html>

HTML <br> 줄 바꿈 태그

이처럼 <p> 태그를 사용하게되면 한 번만 줄 나누기가 된다. 만약 사용자가 원하는 만큼 여러번 줄 나누기를 하고 싶다면 빈 태그(empty tag)인 <br> 태그를 사용해야된다.

예제

<!DOCTYPE html>
<html>
<body>

<p>
줄 나누기를<br>
통해서<br>
적어봤습니다.<br>
실제로 화면상에 이렇게 표시될까요?<br>
</p>

</body>
</html>

종료 태그 사용을 잊지 말자

대부분의 웹 브라우저에서는 종료태그를 사용하지 않아도 html은 올바르게 표시된다. 하지만 문제가 발생할 수 있기 때문에 아래와 같은 예제처럼 종료태그를 잊어버리고 하용하지 않도록 하자.

예제

<!DOCTYPE html>
<html>
<body>

<p>이것은 단락이다.

<p>종료태그를 잊어버리지 말고 꼭 사용하자!</p>

</body>
</html>

※종료 태그를 사용하지 않고, html 태그를 사용할 경우 예기치 못한 오류가 발생할 확률이 높아진다.

HTML <pre> 텍스트(text) 서식 미리 정의하기

html 코드에서 그대로 작성한 텍스트 서식을 표현하고 싶다면 <pre> 태그를 사용해서 정의해야 된다. <pre> 태그는 preformatted text 라고 해서 pre 태그 안에 작성된 내용의 모든 공백과 줄 바꿈은 웹 브라우저에서 그대로 표현될 수 있다.

예제

<!DOCTYPE html>
<html>
<body>

<pre>
뛰어쓰기와                   줄바꿈 내용을 그대로 표현할 수 있을까?
된다면 정말 좋을텐데!!
</pre>

</body>
</html>

※<pre>태그 내에 작성된 텍스트의 글꼴(font)은 고정폭 글꼴(fixed-width font)로 자동변환된다.

HTML 태그 참조

오늘 배운 html 요소 및 해당 속성에 대한 추가 정보를 한 번 더 배우기 위해 표로 작성해봤다.

태그내용
<p>단락을 정의한다.
<br>줄 바꿈을 정의한다.
<pre>텍스트 서식을 미리 정의한다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다