들어가기 전에

HTML의 탄생이 문서를 서로 공유하기 위해서였던 만큼 제목, 단락 등과 같은 문서의

기본적인 요소를 나타내는 태그들이 있습니다. 

문서를 만들 수 있는 태그에 대해 배워보도록 하겠습니다.

핵심키워드

• Heading 태그 ( h1~h6 )
• Paragraph 태그 ( p )
• Linebreak 태그 ( br )

학습하기  

제목 태그

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다.

태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 <h1>~<h6>까지 있습니다.

보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 됩니다.

하지만 현재 웹 페이지의 내용은 제목과 본문 식의 문서 형태보다는 주로 이미지나 그림처럼 시각적인 형태로 표현되고 있어서 제목 태그를 <h6>까지 쓰는 경우는 거의 없습니다.

<h1>역사</h1>
<h2>개발</h2>
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
... 이하 생략
<h2>최초 규격</h2>
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
... 이하 생략

예시 글에서는 역사가 가장 큰 제목이기 때문에 <h1>를 사용했고, 개발과 최초 규격에는

그보다 아래 단계인 <h2>를 사용했습니다.

아래 원문을 참고하여 적절하게 태그를 사용했습니다.

(https://ko.wikipedia.org/wiki/HTML 중 역사 섹션)

제목 태그를 사용하면, 일반 텍스트보다 더 강조되는 스타일이 적용되는데 이는 브라우저가

기본적으로 제목 태그에 제공하는 스타일입니다.

제목이라는 의미에 맞게 기본적으로 좀 더 굵고 크게 표현이 됩니다.

단락 태그

단락(paragraph) 태그는 paragraph를 줄여서 p로 씁니다.

제목 태그에 이어 본문에 해당하는 내용을 단락 태그를 이용해 작성해보겠습니다.

<h1>역사</h1>
<h2>개발</h2>
<p>
    1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다.
    ... 이하 생략
</p>
<h2>최초 규격</h2>
<p>
    HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.
    ... 이하 생략
</p>

화면에는 별다른 변화는 없지만, 이전보다 훨씬 의미에 맞게 잘 짜인 마크업 구조라고 볼 수 있습니다. 

개행

<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 됩니다.

그럼 <p> 내부에서 임의로 개행을 하려면 어떻게 해야 할까요?

HTML 문법 중 공백 시간에 배운 대로, html은 한 칸 이상의 공백 및 개행을 무시하기 때문에

실제 코드창에 개행을 하더라도 화면에 나타나지는 않습니다.

따라서 개행을 위해 쓰이는 태그가 바로 <br>입니다. (linebreak 를 줄여서 br 이라고 합니다.)

<br>은 닫기 태그와 내용이 존재하지 않는 빈 태그입니다.

개행하고자 하는 곳에서 <br>을 선언하면 개행이 됩니다.

이처럼 <p>를 이용하면 태그 자체에서 자연스럽게 개행이 되지만, <p> 내부에서 강제로 개행을

하기 위해서는 <br>을 이용해야 합니다.

참고링크