Heading(제목) & Paragraphs(단락)

이번 글에서는 html 문서에서 제목을 표현하는 <h#> 계열 태그와 단락을 표시할 때 사용하는 <p>태그에 대해서 알아보도록 하겠습니다.

 

<h1> ~ <h6> 태그

html 상에서 제목은 다음과 같이 <h1> ~ <h6> 태그를 사용해서 표현합니다.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

코드를 작성한 모습(왼쪽), 웹브라우져 상에 나타나는 모습(오른쪽)

태그의 번호는 1부터 6까지 있으며 숫자가 올라갈수록 크기가 작아지는 것을 확인할 수 있습니다. <h#> 계열의 태그에 7 이상의 번호를 할당하는 경우 더 이상 heading에 대한 효과가 적용되지 않는 것을 확인할 수 있습니다. 그렇기 때문에 h 계열 태그를 사용할 때에는 1 ~ 6 사이의 번호만을 사용할 수 있음을 기억하시기 바랍니다.

 

그리고 <h#> 계열의 태그를 사용하게 되면 브라우져가 자동으로 각 제목의 전/후에 빈공간(White Space)을 추가한다는 점 또한 예시를 통해서 확인하실 수 있을 것 입니다.

 

제목(Heading)의 중요성

검색엔진은 웹페이지의 구조와 내용을 색인/식별하는 데에 제목을 사용합니다. 또한 많은 사용자들은 제목으로 페이지를 훑어보는 경향이 있기 때문에 나타내고자 하는 내용을 명확하게 전달하고 문서구조를 올바르게 표시하기 위해서는 제목을 사용하는 것이 대단히 중요합니다. 그렇기 때문에 제목은 제목을 표현하는 용도로만 사용하고 이 목적을 벗어난, 단순히 글을 크게 만들거나 볼드체로 만드는 용도로 사용하는 것은 피하는 것이 좋습니다.(단순히 글을 크게 만들거나 볼드체로 만들기 위한 것은 나중에 css 또는 style 속성에 대해서 자세히 공부하면서 다룰 것입니다.)

 

제목을 원하는 사이즈로

각 html 제목은 기본적으로 정의된 사이즈를 가지고 있습니다. 그런데 이를 style 속성을 사용함으로서 다음과 같이 제목을 원하는 사이즈로 지정하는 것이 가능합니다.

<h1 style="font-size:60px;"> Heading Size Test </h1>

다음과 같이 제목을 원하는 크기로 나타내는 것이 가능함을 확인할 수 있다.

 

<p> 태그

이어서 html 상에서는 다음과 같이 <p> 태그를 사용해서 단락/문단을 표시할 수 있습니다.

<p> paragraph1 </p>
<p> paragraph2 </p>
<p> paragraph3 </p>
<p> paragraph4 </p>
<p> paragraph5 </p>
<p> paragraph6 </p>

보통 단락은 다음과 같이 제목과 함께 사용되는 경우가 많습니다. <h#>계열태그가 제목을 나타내기 위한 목적으로 사용된다면 <p> 태그는제목과 관련된 내용, 단락들을 표시하기 위한 목적으로 사용합니다. 또한 <h#>계열 태그와 동일하게 브라우져가 자동으로 각 단락의 전/후에 빈공간(White Space)을 추가합니다.

코드를 작성한 모습(왼쪽), 웹브라우져 상에 나타나는 모습(오른쪽)

 

HTML이 내용을 표시하는  방식

 

웹 페이지를 띄우는 사용자 환경이 모두 같을 수는 없습니다. 단적인 예로 사용자가 사용하는 디스플레이의 크기와 비율이 각각 다릅니다. PC의 경우에는 사용되는 모니터의 크기와 비율들이 대표적인 값들도 정형화 되어 있지만 최근 많이 사용되는 스마트폰, 태플릿과 같은 모바일 기기들은 굉장히 다양한 비율과 크기의 디스플레이를사용합니다. 그리고 또한 멀티테스킹이나 다른 목적으로 사용자가 사용 중인 웹 브라우져의 창 크기를 마음대로 조절할 수도 있습니다.

 

이러한 경우 웹 페이지는 사용자가 사용하는 디스플레의 크기, 비율과 같은 특성들을 고려해서 사용자가 가장 편하게 사이트를 사용할 수 있도록 레이아웃을 적절히 조절해주어야할 필요성이 있습니다. (이와 관련된 내용은 추후에 자세히 다룹니다.)

 

html에서는 내용에 몇개의 공백을 넣는 지에 관계없이 그 출력결과가 동일하게 나타납니다. 왜냐하면 웹브라우져가 페이지를 표시할 때 존재하는 여분의 공백과 줄들을 제거하기 때문입니다. 즉, 아무리 많은 수의 공백이나 개행문자를 넣어도 html은 이를 오직 하나의 공백으로만 인식하게 됩니다.

 

이해를 돕기 위해서 다음의 예시 코드를 첨부합니다.

<!-- Part1 -->
<p>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세
</p>

<!-- Part2 -->
<p>
동해물과           백두산이 마르고 닳도록
하느님이 보우하사        우리나라 만세
무궁화       삼천리 화려강산
대한사람 대한으로       길이 보전하세
</p>

<!-- Part3 -->
<p>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세
</p>

위와 같이 애국가 1절을 3개의 파트로 나눠서 단락을 코드로 작성해두었습니다.

각 단락은 모두 동일한 애국가 1절을 내용으로 담고 있지만 각각 다음의  특징을 가지고 있습니다.

• Part1 : 에디터 상에서 enter 를 입력해서 개행을 진행하였음

• Part2 : 에디터 상에서 space를 입력해서 중간에 여러개의 공백을 삽입하였음

• Part3 : 에디터 상에서 enter 입력없이 한 줄로 내용을 입력하였음

 

위의 코드를 저장하고 웹브라우져를 통해서 내용을 출력하면 어떻게 나올까요? 그 결과는 다음과 같습니다.

3개의 파트가 모두 같은 출력결과를 보임을 확인할 수 있다.

다음과 같이 내용은 같지만 서로 다르게 작성된 3개의 파트가 모두 같은 출력결과를 보임을 확인할 수 있습니다.

따라서, 각 파트의 작성내용과 출력결과을 비교해봄으로서 다음을 확인할 수 있습니다.

• Part1 : 에디터 상에서 넣는 개행문자는 1개의 공백으로만 인식된다.

• Part2 : 에디터 상에서 2개 이상의 공백을 넣어도 1개의 공백으로만 인식된다.

Part3는 다음을 확인하고자 하는 목적으로 작성하였다.

해당 내용이 출력되고 있는 웹페이지의 크기를 임의로 조절해보면(해당 문자열의 길이보다 작도록 창의 사이즈를 조절해보았다.)

조절한 창의 사이즈에 맞춰서 내용이 잘리지 않도록 개행되어 출력된다.

다음과 같이 사용자가 사용하는 창의 사이즈에 따라서 내용의 손실이 없이 모두 출력되도록 나타나는 모습을 확인할 수 있다.

 

HTML 줄바꿈(개행)

의도적으로 개행을 하고 싶은 경우 다음과 같이 <br> 태그를 사용하면 개행할 수 있습니다.

<p>동해물과 백두산이 마르고 닳도록<br>하느님이 보우하사 우리나라 만세<br>무궁화 삼천리 화려강산<br>대한사람 대한으로 길이보전하세</p>

웹브라우져로 출력한 모습, 개행처리되어 출력되는 것을 확인할 수 있다.

 

Pre 태그

하지만 기존에 수없이 사용해 오던 MS Word나 한컴 한글에 익숙하던 저희는 이러한 <br /> 태그를 이용한 개행이 너무나 불편한 작업일 수 밖에 없습니다. 그런데 <pre>태그를 사용하면 이에 대한 불편함을 해소할 수 있습니다. 에디터 상에서 입력하는 enter, space 등의 요소들을 html 상에서 그대로 반영하여 나타내고 싶다면 다음과 같이 <pre> 태그를 사용하여 나타낼 수 있습니다.

<pre>
동해물과 백두산이 마르고 닳도록
하느님이 보우하사 우리나라 만세
무궁화 삼천리 화려강산
대한사람 대한으로 길이 보전하세
(pre tag test)
</pre>

 

 

사용자가 입력한 형식을 그대로 유지하여 출력하는 모습을 확인할 수 있다.

다음과 같이 <pre> 태그는 사용자가 입력한 형식을 그대로 유지하여 출력할 수 있다는 장점이 존재합니다. 단, <pre> 태그는 각 영역별로 서식을 꾸미는 것이 불가능하며 해당 태그를 사용한 영역 내의 모든 텍스트들은 시스템에서 지정한 폰트만을 사용하게 되고 이전처럼 유동적으로 창의 사이즈의 변동에 따라서 개행이 일어나지 않는다는 한계점이 존재합니다. 그럼에도 불구하고 원하는 만큼 공백을 주거나 복잡한 단락구조를 사용자의 의도에 따라서 쉽게 표현할 수 있다는 장점이 존재하기 때문에 주로 소스를 표현할 때 많이 사용된다.