5. HTML - 자주 쓰는 기본 태그 <h>, <p>, <br>, <pre>, <hr>

1. Heading 태그 <hn>

 

제목 텍스트로 지정하는 태그로 크기가 크고 진하게 표시된다.

 

제목의 크기에 따라 <h1> ~ <h6> 까지 사용할 수 있다.

 

<p> 태그를 이용해서 제목 텍스트를 만든 다음 진하게 바꿔도 비슷하겠지만,

<hn> 태그를 이용하는 것이 웹 표준에 적합하다. (검색 엔진에서 문서 제목을 잘 알 수 있게 한다.)

 

ex)

 

 

---

 

2. Paragraphs 태그 <p>

 

단락을 나타내는 태그

 

<p> ~ </p> 사이에 텍스트를 입력하면 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다.

 

줄 바꿈이 없는 텍스트 단락은 화면 너비를 넘어갈 경우 자동으로 아래 줄로 넘겨 표시된다.

 

ex)

 

 

- html 소스 코드 상에서 띄어 쓰기가 많이 되거나, 줄 바꿈을 위해 엔터로 위치를 조정하려고 시도 해도

  한 칸씩 밖에 적용되지 않는다!! (띄어 쓰기, 줄 바꿈 한 칸씩만 적용된다.)

 

- <p> 태그 내부에서 형태를 만들기 위해 엔터나 띄어 쓰기를 해도 무조건 한 줄로 표현된다.

 

  위의 문제를 해결하기 위해서는 <pre> 태그를 사용하면 된다. (타이핑 하는 모양으로 표시)

 

- <p> 태그의 속성으로 title 툴팁 속성이 올 수 있다.

 

ex) <p title = "Tooltip"> 텍스트 내용 </p>

 

 

 

 

---

 

3. 줄 바꿈 태그 <br> (line break)

 

웹 브라우저 창에서 줄 바꿈이 되도록 하려면 <br> 태그를 사용한다.

 

<br> 태그가 삽입된 위치에서만 줄 바꿈이 되고, 닫는 태그는 없다.

 

ex)

 

 

---

 

4. <pre> 태그

 

<pre> 태그 내부에서는 enter 나 tab, space 를 모두 활용해서 표현할 수 있다.

(입력하는 내용 그대로 표현된다.)

 

추가적인 <br> 태그나 공백 기호 (&nbsp) 등을 사용할 필요가 없다.

 

ex)

 

 

---

 

5. 수평선 태그 <hr>

 

html 문서에 수평선을 삽입한다. 주로 컨텐츠 내용을 구분할 때 사용된다.