offfff

HTML 문단(HTML Paragraphs) 본문

프로그래밍

HTML 문단(HTML Paragraphs)

offfff 2016. 8. 25. 09:00

HTML 문단(HTML Paragraphs)


<p>태그는 문단을 정의한다

이 태그를 사용할 때 브라우저가 자동으로 문단 앞뒤로 공백을 생성한다.


<!DOCTYPE html>

<html>

<body>


<p>문단입니다. 앞뒤로 공백이 생겼습니다.</p>

<p>이번엔 다른 문단입니다.</p>


</body>

</html>




브라우저가 화면에 출력할 때(HTML Display)


컴퓨터마다 화면의 크기가 달라서, HTML 문서가 어떻게 화면에 출력될지 확신 못 할 수 있다.

크고 작은 모니터나, 윈도우 해상도 설정 등이 다르기 때문이다.

HTML 코드로는 공백이나 줄바꿈을 추가로 더 넣더라도, 의도한대로 출력이 안된다.

왜냐하면 브라우저가 추가된 공백, 줄바꿈을 의도적으로 없애버리고 출력하기 때문이다.


<!DOCTYPE html>

<html>

<body>


<p>

이 문단은

많은 줄바꿈을 가지고 있는데도

브라우저가 줄바꿈을 반영해주지 않습니다.

</p>


<p>

이 문단은        스페이스를 여러         번 쳤는데도

브라우저가       이를       무시 해서

화면에               한   번   만    표시됩니다.

</p>


<p>

이 문단은 좀더 길게 쓸건데, 이렇게 길게 늘여 쓰더라도, 윈도우즈가 창 폭에 맞게 알아서 줄을 바꿔버립니다. 계속 늘렸다 줄였다 해도 폭에 맞게 지 맘대로 바꿔버립니다.

</p>


</body>

</html>




줄 바꿈 태그(HTML Line Breaks)


<br>태그는 줄 바꿈을 정의하고, 끝 태그 없이 사용한다는게 특징이다.

새로운 <p> 태그 추가 없이 줄 바꿈을 하고 싶을 떄, <br>을 사용한다.


<!DOCTYPE html>

<html>

<body>


<p>문단 태그 안쓰고<br>줄바꿈 하기</p>


</body>

</html>




시 쓸 때 이런 문제가 있을수 있습니다(The Poem Problem)


시는 한 줄 한 줄 출력해야 되는데, 브라우저가 공백이나 줄 바꿈을 하나만 표시해 준다.

그래서 아래와 같이 화면에 표시하고 싶어도, 모든 문장이 한줄로 이어져 나오는 화면을 볼 수 있다.


<!DOCTYPE html>

<html>

<body>


<p>

My   Bonnie   lies   over   the   ocean.


My  Bonnie  lies  over  the  sea.


My Bonnie lies over the ocean.


Oh, bring back my Bonnie to me.

</p>


</body>

</html>




Preformatting(The HTML <pre> Element)


앞서 시 쓸 때의 문제를 해결할 수 있는 방법은 <pre>태그를 사용하는 것이다.

어렵게 말해서, preformat(사전 포맷) 기능이 더해진 문단이라고 볼 수 있다.

쉽게 다시말하면, 공백이나 줄 바꿈을 무시하지 않는 <p>라고 볼 수 있다.

아래 처럼 쓰면 의도한 대로 공백과 줄 바꿈이 모두 잘 표시된다.


<!DOCTYPE html>

<html>

<body>


<pre>

My   Bonnie   lies   over   the   ocean.


My  Bonnie  lies  over  the  sea.


My Bonnie lies over the ocean.


Oh, bring back my Bonnie to me.

</pre>


</body>

</html>




아래 링크를 참조하여 번역 및 수정 함

http://www.w3schools.com/html/html_paragraphs.asp

저작자표시 비영리

'프로그래밍' 카테고리의 다른 글

HTML 글자 모양 편집(HTML Formatting)  (0) 2016.08.27
HTML 스타일(HTML Styles)  (0) 2016.08.26
HTML 제목(HTML Heading)  (0) 2016.08.24
HTML 속성(HTML Attributes)  (0) 2016.08.23
HTML 요소(HTML Elements)  (0) 2016.08.22
'프로그래밍' Related Articles more