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>태그를 사용하면 브라우저의 너비만큼 수평선을 그릴 수 있다.
- 는 non-breaking space의 약자로 공백 문자 한 개를 표시한다.
- <는 <를 표시한다.
- >는 >를 표시한다.
- "는 "를 표시한다.
- &는 &를 표시한다.
'FrontEnd > HTML' 카테고리의 다른 글
| [HTML] form 태그 (0) | 2023.01.31 |
|---|---|
| [HTML] 리스트 (ul, ol, dd) (0) | 2022.12.21 |
| [HTML] HTML 문서의 기본 구조 (0) | 2022.12.21 |
