[HTML] <p>, <h1>...<h6>, <hr> 태그 + <br>, &nbsp;

목차
1. HTML 블록 태그
 ① <p> 태그
 ② <h1>...<h6> 태그
 ③ <hr> 태그
2. 번외
 ① <br> 태그
 ② &nbsp;
3. 마치며

---

1. HTML 블록 태그

① <p> 태그

- p → Paragraph에서 따옴, 단락, 절, 문단이라는 의미를 가지고 있음

- 문단 요소를 나타내는 태그

  p 태그를 통해 만든 문단과 문단 사이에는 공백이 존재한다.

- 하나의 p 태그 == 하나의 문단

<p>p태그는 문단을 표시하는 태그입니다.</p>
<p>문단과 문단 사이에는 공백이 존재한다.</p>

p태그는 문단을 표시하는 태그입니다.

문단과 문단 사이에는 공백이 존재한다.

 

---

② <h1>...<h6> 태그

- h → Heading, 제목

  1 ~ 6: 제목의 크기

- HTML 문서에서 제목을 나타내려고 할 때 사용하는 태그

- 숫자 1 ~ 6이 함께 사용되고, 숫자 1일 때 제목 크기가 제일 크다.

  (숫자 6일 때는 제목 크기가 제일 작음)

<h1>Title 1</h1>
<h2>Title 2</h2>
<h3>Title 3</h3>
<h4>Title 4</h4>
<h5>Title 5</h5>
<h6>Title 6</h6>

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

---

③ <hr> 태그

- hr => Horizontal, 수평선

- HTML 문서상에서 수평선을 그어주는 태그, 단일 태그

  문서에서 주제를 변경하거나, 내용을 구분 지으려고 할 때 주로 사용된다.

<h4>HTML의 텍스트 태그</h4>
<h5>p 태그</h5>
<p>p 태그는 문단을 나타내는 태그입니다.</p>
<hr/>
<!-- hr 태그는 단일 태그로
  - <hr> 형태로 입력해도 되지만
  - 태그의 종료를 나타내기 위해서 
  - <hr/>로 입력하였음 -->
<h5>h1 ~ h6 태그</h5>
<p>
제목을 나타내는 태그입니다.
<br/>
숫자 1일 때 제일 크고 숫자 6일 때 제일 작습니다.
</p>
<hr/>
<h5>hr 태그</h5>
<p>
HTML 문서 상에서 수평선을 긋는 태그입니다.
<br/>
주제를 바꾸거나 내용을 구분지을 때 사용합니다.
</p>

HTML의 텍스트 태그

p 태그

p 태그는 문단을 나타내는 태그입니다.

---

h1 ~ h6 태그

제목을 나타내는 태그입니다.
숫자 1일 때 제일 크고 숫자 6일 때 제일 작습니다.

---

hr 태그

HTML 문서 상에서 수평선을 긋는 태그입니다.
주제를 바꾸거나 내용을 구분지을 때 사용합니다.

---

2. 번외

우리가 컴퓨터로 글을 쓰고 있을 때, 다음 줄로 넘어가려고 할 때 사용하는 키가 [Enter]이다.

하지만 HTML 소스코드에서는 [Enter] 키는 의미가 없다.

좀 더 정확하게 말하자면 출력할 텍스트에 Enter를 눌러서 줄 바꿈을 해도

실제로는 한 줄로 출력이 된다.

C, Java와 같은 프로그래밍 언어에서 문장에 줄 바꿈을 적용시키려면 '\n'을 활용한 것처럼

HTML 문서에서 줄 바꿈을 적용시키는 태그인 <br> 태그가 존재한다.

 

① <br> 태그

- 텍스트 안에 줄 바꿈을 적용시키는 태그

- br → Break

<!-- br 태그, 줄바꿈을 적용하지 않고 Enter로만 나눠놨을 때-->
<p>
안녕하세요. 
저는 Rayched입니다.
</p>
<hr/>
<!-- br 태그, 줄바꿈을 적용했을 경우-->
<p>안녕하세요. <br/>저는 Rayched입니다.</p>

안녕하세요. 저는 Rayched입니다.

---

안녕하세요.
저는 Rayched입니다.

---

② &nbsp;

- HTML 코드 상에서 Space Bar를 이용한 공백은 코드 상에서는 한 번만 적용된다.

- 공백을 두 번 이상 표시하려고 할 때, 사용하는 것이 '&nbsp;'이다.

- nbsp → No break space의 약어, 줄 바꿈 없는 공백

<!--Space 공백 한번 적용-->
<p>안녕 하세요.</p>

<!--Space 공백 두번 적용 시도-->
<p>안녕  하세요.</p>

<!-- nbsp를 이용해서 공백 두번 적용-->
<p>안녕&nbsp;&nbsp;하세요.</p>

안녕 하세요.

안녕 하세요.

안녕  하세요.

HTML에서 실제로 Space Bar를 이용한 공백 처리는 한 번만 되는 것을

위의 HTML 코드 출력을 통해서 확인할 수 있다.

---

3. 마치며

예전에 정리해놨던 p 태그와 heading 태그를 정리하다 보니

문득 궁금한 것이 생겨서 게시글을 한번 작성해 봤던 적이 있다.

내용은 별거 없고 그냥 아무 문장 두 개를 쓰고 글씨 크기를

'제목 3'과 '본문 2'로 적용하고, 글쓰기 모드를 [기본모드]에서 [HTML]로 바꿔보니

이런 식의 HTML 코드가 나왔다.

Sample

글씨 크기를 '제목n'으로 하면 Heading 태그로, '본문n'으로 하면 Paragraph 태그로 적용되는 것을 보게되니 감격이 새롭다.

솔직히 별거 아니기도 하고, 당연한 것이지만 HTML을 공부하기 전까지는 별로 신경 쓰지 않았던 것이

HTML을 공부하면서 이런 사소한 게시글도 어떤 원리를 가지고 있는지가 조금씩 보이는 게

너무 즐겁다는 생각이 들었고 나름대로 작은 성취감 비슷한 것을 얻은 것 같다.

아직 공부해야 할 것이 많지만 말이다..

다음 게시글은 인라인 태그의 예시로 올리려고 했던 태그 3가지를 정리해서 올리도록 하겠다.