[HTML/CSS] HTML로 텍스트 표현하기1 — Block-level Elements
웹 페이지에서 보이는 텍스트는 어떻게 표현할 수 있을까? 지난 포스트에서 봤듯이, body 태그 내에 작성하는 내용이 웹 페이지에 표시된다. 직접 작성하고 확인하면서 진행해보자. 물론 메모장이나 텍스트 편집기로도 html 문서를 작성할 수 있지만, html 언어로 코드를 작성하는데 좋은 환경을 제공을 해주는 프로그램을 사용하는 것이 생산성 향상에 도움이 되므로 visual studio code 라는 프로그램이 설치되어 있지 않거나 설정이 필요한 분은 아래 링크의 안내에 따라 설치를 진행해주시면 되겠습니다.
텍스트 표시하기
포스트의 가독성을 높이기 위해 CodePen 이라는 웹 어플리케이션의 기능을 이용하려고 한다. CodePen 의 html 코드는 body 태그 내에만 해당함을 주의하자. html 의 기초를 다지기 위해선, 직접 DOCTYPE, head, meta, title 을 작성하는 습관을 기르자.
처음이니까 예시로 위 코드를 만약 visual studio code에서 작성한 것을 보자면, 아래와 같은 코드임을 확인하자.
위 코드를 보면 아무 태그 없이 텍스트만 적어도 웹 페이지에 표시되는 것을 볼 수 있다. 우리는 여기서 body 태그가 웹 페이지의 내용을 보여주는 것을 확인할 수 있었다. 더 나아가서, 이런 텍스트를 html 코드를 이용하여 특정 형태나 특징을 갖는 텍스트로 표시할 수 있다. 이제부터 이런 태그를 이용하여 코드를 나타내보자.
제목을 나타내는 태그
<h1>, <h2>, …, <h6>
hn 태그의 ‘h’ 는 heading, 즉 제목을 나타내고, 숫자가 작을수록 중요한 제목을 나타낸다. hn 태그는 반드시 닫는 태그를 갖는다.
<!-- h 태그 기본형 --><h1> 텍스트 </h1>
<h2> 텍스트 </h2>
<h3> 텍스트 </h3>
<h4> 텍스트 </h4>
<h5> 텍스트 </h5>
<h6> 텍스트 </h6>
Ex2 에서 볼 수 있듯이 제목은 Ex1 의 보통 텍스트와는 다르게 글씨가 굵고, 또 중요한 제목일수록 글씨 크기가 크게 보이는 것을 알 수 있는데, 이는h1~h6 까지 태그가 기본으로 정해진 스타일을 갖고 있기 때문이다. Fig1 은 기본적으로 정해진 h1~h6 까지의 스타일 속성이고, 이런 스타일 속성을 바꿀 수 있으나 그에 관한 내용은 본 포스트에서는 다루지 않는다. 그러나 이런 속성들이 CSS 속성에 해당하고, CSS 는 웹 페이지에 보여지는 내용들의 스타일을 관리함을 알아두자.
우리가 hn 태그를 작성할 때 주의할 점은, 글씨 크기와 굵기를 표현하기 위해 h 태그를 사용하면 안 된다는 것이다. hn 태그는 웹 페이지를 검색할 때 지표 중 하나로 사용하기 때문에 html 코드 작성 시에 몇 가지 사항을 염두해두고 작성해야 한다.
* 정말 필요하지 않을 경우를 제외하고 h1은 한번만 사용하는 것이 좋다.
* h태그는 문서의 논리구조를 나타낼 수 있기 때문에, h1 ~ h6 의 순서로 사용하는 것이 좋다. (h1 이후에 h3 를 사용하는 등의 경우를 지양하자.)
* h1 태그와 메타 태그에 동일한 콘텐츠를 담는것은 지양하자.
* h태그를 단지 스타일을 위해 사용하는 것은 지양하자.
단락을 나타내는 태그
<p>
p 태그는 paragraph, 즉 단락을 나타내는 태그이다. p 태그 역시 닫는 태그를 갖는다. 단락은 앞 뒤로 줄바꿈이 있는 것을 말한다.
<!-- p 태그 기본형 --><p> 텍스트 </p>
Ex3 에서 볼 수 있듯이, p 태그 내부 혹은 p 태그 이전과 이후의 텍스트는 코드에서 줄바꿈을 하여 작성해도 웹 페이지의 결과에는 줄바꿈하여 표시하지 않는다. 그러나 p 태그를 기준으로 앞 뒤는 줄바꿈하여 표시된 것을 볼 수 있다.
<!-- p 태그 css 기본값 -->p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
p 태그는 html 문서의 기본 구조가 되는 태그들을 제외하면 열 손가락에 들만큼 자주 사용되는 태그이다.
<pre>
pre 태그의 pre는 preformat 이라는 단어의 줄임말이다. Ex3 에서 봤듯이 p 태그는 감싼 내용의 위 아래로 줄바꿈이 생기나, p 태그 내부에 줄바꿈을 작성해도 웹페이지 상에서는 줄바꿈이 표시되지 않는다. 또, 코드 상에서 여러 개의 공백(스페이스)를 넣어도 웹페이지 상에서는 하나의 공백으로 표시된다.
그러나 pre 태그로 감싼 내용에는 줄바꿈이나, 공백이 코드 상에 작성한 그대로 표시된다.
<!-- pre 태그의 기본형 --><pre> 텍스트 </pre>
<!-- pre 태그 css 기본값 -->pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
<blockquote>
blockquote 태그는 다른 웹페이지에서 인용한 내용을 나타낼 수 있는 섹션이다. cite 속성를 함께 사용해주는 것이 좋다. blockquote 태그의 기본 스타일은 좌우에 여백을 갖고 있어서, 다른 내용들과 더 구분되어 보인다.
<!-- blockquote 태그의 기본형 --><blockquote> 인용할 내용 </blockquote>
<!-- blockquote 태그 css 기본값 -->blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
수평선을 표현할 수 있는 태그
<hr>
hr 태그는 horizontal rule 의 줄임말이다. 단락의 주제가 바뀔 때 위 단락과 아래 단락을 구분할 때 등의 경우에 사용한다. 기본적으로 수평선으로 위, 아래를 구분한다.
<!-- hr 태그 기본형 --><hr>
<!-- hr 태그 css 기본값 -->hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
Block-level Elements 란?
이번 포스트의 제목에서 볼 수 있듯이, 본 포스트에서는 block-level 요소에 대해서 다루었다. 이번 포스트에서 다룬 태그들의 기본 css 스타일들을 보면 dislay: block;이라는 속성을 볼 수 있다. 이 속성이 바로 block-level 요소를 나타내고, block-level 요소는 시각적으로 다음과 같은 특징을 갖는다.
- 새로운 줄에서 시작하고, 해당 요소 이후에 새로운 줄로 구분된다. (요소 앞 뒤로 줄바꿈이 있다.)
- 기본적으로 화면의 너비를 전부 차지한다. (정확히는 화면의 너비를 전부 차지하는 직사각형 형태이다.)
Block 요소의 특징은 두 가지 말고도 더 있지만, 본 포스트에서는 더 자세히 다루지는 않는다. 단, block-level 요소는 텍스트를 표현하는 태그 뿐만 아니라 다른 태그들도 있음을 알아두자.
References
- [W3School] “HTML tutorial” — https://www.w3schools.com/html/default.asp
- [W3School] “HTML tags” — https://www.w3schools.com/tags/default.asp
- 고경희, 2019, HTML + CSS3 웹표준의 정석, 이지스퍼블리싱
- [Ideveloper] “Web — Heading Tag (제목 태그) 와 검색엔진 최적화의 연관” — https://ideveloper2.tistory.com/161
- [Ascent] “H태그(헤딩, 표제요소) 최적화하기” — https://www.ascentkorea.com/heading-tag-seo/
