FrontEnd/HTML

[HTML] 텍스트 표시 (p, pre, h)

코딩마루 2022. 12. 21. 19:59

HTML 문서에서 텍스트는 특별한 태그 없이 <body>태그 안에 표시할 수 있다. 하지만 해당 방법은 여러 줄로 작성된 텍스트도 모두 연결되어 나오기 때문에 원하는 형식으로 출력할 수는 없다. 이를 위해 p태그가 존재한다.

  • HTML 문서를 작성할 때 입력한 줄 바꿈 문자는 무시된다.

1. 단락 (Paragraph)

단락은 <p>태그로 정의된다. 웹 브라우저는 단락의 전후에 자동으로 빈 줄을 추가한다. 만약, 새로운 단락을 사용하지 않고 줄 바꿈을 하고 싶다면 <br>태그를 사용하면 된다. br은 break를 의미하며 종료 태그를 가지지 않는다. 

<body>
	<p> This is Sentence1 <br> This is Sentence2 </p>
	<p> This is Sentence1 <br> This is Sentence2 </p>
</body>

단, 이때 <p></p>사이에 엔터를 여러 줄을 사용해도 줄 바꿈은 되지 않는다. 또한 스페이스를 여러 개 입력해도 스페이스가 여러 개 표시되지는 않는다. 웹 브라우저는 여러 개의 연속된 스페이스도 하나의 스페이스로 간주하며 연속되는 빈 줄 역시 하나의 스페이스로 간주한다.

만약 우리가 입력한 그대로를 화면에 출력하고 싶다면 <pre>태그를 사용하면 된다.

<body>
	<pre>This is Sentence1
	This is Sentence2 </pre>
</body>

2. 헤딩 (Heading)

헤딩은 웹 페이지의 머리기사(headline)으로 <h1>~<h6> 총 6개의 태그가 존재한다. 헤딩은 머리기사 용도로만 사용해야 하며 글씨를 크게 하거나 굵게 하기 위해 사용해서는 안된다.

<body>
	<h1>heading1</h1>
	<h2>heading2</h2>
	<h3>heading3</h3>
	<h4>heading4</h4>
	<h5>heading5</h5>
	<h6>heading6</h6>
</body>

3. 텍스트 서식

볼드체, 이탈릭체와 같은 것 역시 태그를 활용해 정의할 수 있다.

<body>
	<p> <b>bold</b> </p>
	<p> <i>italic</i> </p>
	<p> <strong>strong</strong></p>
	<p> <em>emphasized</em></p>
	<p> <code>codes</code> </p>
	<p> ThisIs<sup>superscript</sup> </p>
	<p> ThisIs<sub>subscript</sub> </p>
</body>

단, <b>와 <i> 태그는 다른 모든 태그가 적절하지 않는 경우에만 사용되어야 하며 강조해야 하는 것은 <em>, 중요한 것은 <strong> 태그를 사용하는 것이 좋다.

4. 기타 (수평선, 특수 문자)

  • <hr>태그를 사용하면 브라우저의 너비만큼 수평선을 그릴 수 있다.
  • &nbsp;는 non-breaking space의 약자로 공백 문자 한 개를 표시한다.
  • &lt;는 <를 표시한다.
  • &gt;는 >를 표시한다.
  • &quot;는 "를 표시한다.
  • &amp;는 &를 표시한다.