텍스트 관련 요소들 - 블록레벨

BitYoungjae·2020년 3월 3일

HTML스터디

목록 보기

1/9

텍스트 관련 요소들 - 블록레벨 요소들

본 포스트는 HTML 스터디에 사용할 자료 목적으로 작성하였습니다.

Heading 1~6 Element

<h1> ~ <h6> 요소는 6단계의 제목을 나타냅니다.

<html>
  <body>
    <h1>HTML 헤딩요소에 대하여</h1>
    <p>&lt;h1&gt; ~ &lt;h6&gt; 요소는 6단계의 제목을 나타냅니다.</p>
    <h2>헤딩 요소란 무엇인가?</h2>
    <!-- ... 중략 ... -->
  </body>
</html>

제목 요소를 가지고 목차(Table of contents) 를 생성하기도 합니다.
제목 요소를 글자 크기를 조절하기 위한 수단으로 사용해서는 안됩니다.
제목 요소는 반드시 순서대로 사용해야 합니다. <h2> 에서 바로 <h5>로 건너가서는 안됩니다.
<h1> 으로 마크업된 제목은 해당 페이지가 어떤 페이지인지를 나타낼 수 있습니다. 어떤 도서나 영화의 타이틀이 두 개가 아니듯이, <h1> 요소는 반드시 페이지 당 하나만 존재해야합니다. 검색엔진 최적화(SEO, Search Engine Optimization) 에 유용합니다.

검색엔진 최적화란 웹사이트를 보다 검색엔진의 검색결과에서 검색 랭킹을 높이고 눈에 잘 띄도록 만드는 작업을 의미합니다.
HTML은 결국 문서의 외형이 아닌 구조를 나타내는 언어일 뿐이므로, 아무렇게나 사용해도 CSS를 통해 모양을 꾸밀 수 있습니다.
단, 목적에 맞는 HTML 요소를 사용해 페이지를 구성하지 않을 경우, 이 검색엔진 최적화와 웹 접근성 향상에 독이 될 수 있습니다.

Paragraph Element

<p> 요소는 하나의 문단을 나타냅니다.
문단은 보통 시각 매체에서 인접한 블록들과 공백 라인으로 구분된 텍스트들의 블록으로 표현됩니다.

문단이란 무엇일까요? 네이버 지식백과에서는 문단이란 문장이 모여 하나의 중심 생각을 나타내는 덩어리라고 합니다.

문단을 나누어 쓰는 목적은 하나의 생각을 효과적이고 명확하게 전달하는 데 있다고 해요.

HTML에서 문단은 이렇듯, 한 줄의 공백들로 구분하여 표시됩니다.

<p>
  문단이란 무엇일까요? 네이버 지식백과에서는 문단이란 문장이 모여 하나의 중심
  생각을 나타내는 덩어리라고 합니다.
</p>
<p>
  문단을 나누어 쓰는 목적은 하나의 생각을 효과적이고 명확하게 전달하는 데 있다고
  해요.
</p>
<p>HTML에서 문단은 이렇듯, 한 줄의 공백들로 구분하여 표시됩니다.</p>

웹 페이지의 내용들을 문단으로 구분짓게 되면, 웹 접근성 향상에도 도움이 됩니다.

시각장애인분들이 스크린리더로 웹 페이지를 탐색할 때, 대부분의 스크린리더들이 문단 단위로 스킵하는 기능을 제공한다고 하네요.

따라서, <p> 요소를 빈 줄을 만들기 위한 용도로 사용하지 맙시다.

스크린리더에 혼동을 줄 수 있으니까요.

Line Breaking Element

<br> 요소는 텍스트 안에서 빈 줄을 만들어 냅니다.
시(Poem) 와 주소 처럼 텍스트 내에서 줄 구분이 꼭 필요한 경우에 사용합니다.

모양새를 만들기 위해 사용하는 요소가 아닙니다.

<p>
  이런들 엇더며 져런들 엇더료<br />
  만수산(萬壽山) 드렁칡이 얼거진들 엇더리<br />
  우리도 이치 얼거져 백년(百年)지 누리리라.<br />
</p>

<br> 요소처럼 닫는 태그가 필요없이 혼자서 제 역할을 하는 태그를 빈 태그(Empty tag)라고도 합니다.
그냥 <br> 로 쓸 수도 있고 태그 안에 스스로 끝났음을 표시하듯 <br/>와 같은 형태로 사용할 수 있습니다.

<br> 태그를 문단을 구분하기 위한 용도로 사용하지 말고, 앞서 알아본 <pre> 태그를 대신 사용하도록 합시다.

Horizontal Rule

<hr> 요소는 문단 레벨 요소들을 주제별로 분리하기 위해 사용합니다.

예를 들어 이야기 속에서 장면의 전환이 있거나, 구획 별 주제의 이동이 있을 때 이를 구분짓기 위해 사용합니다.

마크다운에서는 아래와 같이 표시됩니다.

<h1>데스노트 사용법</h1>
<p>
  첫째, 데스노트에 이름을 적힌 자는 죽는다.
</p>
<hr />
<p>
  둘째, 죽이고자 하는 인물의 얼굴을 모르면, 효과는 없다.
</p>

Quotation Elements

콘텐츠 내에서 인용문임을 나타내기 위해 사용하는 요소들이 있습니다.

<blockquote> 요소는 블록으로 묶을 수 있는 긴 줄의 인용문을 마크업할 때 사용됩니다.
<q> 요소는 한 줄의 인용문을 마크업할 때 사용됩니다.

<blockquote>
  교육은 암기를 얼마나 열심히 했는지, 혹은 얼마나 많이 아는지가 아니다. 교육은
  아는 것과 모르는 것을 구분할 줄 아는 능력이다.
</blockquote>

마크다운에서는 아래와 같이 표현됩니다.

교육은 암기를 얼마나 열심히 했는지, 혹은 얼마나 많이 아는지가 아니다. 교육은 아는 것과 모르는 것을 구분할 줄 아는 능력이다. - 아나톨 프랑스

cite 속성과 <cite> 요소를 이용해 출처에 대해 명확히 표시할 수 있습니다.

cite 속성은 출처가 된 문서의 주소나, 인용된 정보에 대한 메시지를 포함할 수 있습니다.

보통, 인용한 문서의 인터넷 주소를 적어놓습니다.

Citation Element

<cite> 요소는 인용된 창작물에 대한 참조를 설명하는데 사용되며, 반드시 해당 저작물의 제목을 포함해야합니다.

<cite> 요소는 창작물에 대한 제목을 마크업하는데 사용되며, 그 창작물의 예시는 다음과 같습니다.

책의 제목
논문 제목
시의 제목
노래 제목
영화 제목
웹 사이트 이름
웹 페이지 이름
트위터의 트윗이나 페이스북 포스트

<blockquote
  cite="https://bityoungjae.com/2019/11/09/JavaScript/개념정리/디바운싱과%20쓰로틀링"
>
  보통 웹 서핑을 할 때 스크롤은 그냥저냥 휙휙 넘기는 녀석이다. 경우에 따라
  다르겠지만, 마우스 휠 한 번을 굴리는데 스크롤 이벤트가 십수회 발생한다. 사실
  스크롤 이벤트라는게 그렇게 정교하지 않아도 유저 경험에는 크게 지장이 없다.
  스크롤을 통해 측량 작업을 하는 것이 아니기에, 일반적인 목적이라면 1초 혹은
  0.5초씩 처리를 해도 특별히 불편한 점이 없는 것이다.
  <cite>BitYoungjae의 블로그</cite>
</blockquote>

Preformatted Text Element

<pre> 요소는 미리 서식이 지정된 텍스트를 나타낼 때 사용됩니다.

일반적으로 HTML 요소 내의 텍스트는 다수의 공백을 공백 하나로 치환하는 등, 공백을 활용한 텍스트의 모양새를 설정하는데 제약이 있습니다.

<pre> 요소 안의 텍스트는 원문의 형태를 그대로 유지한 체 웹 페이지에 렌더링됩니다.

예를 들어 프로그램 코드를 표시할 때 사용할 수 있습니다.

일반적으로 고정폭 글꼴을 사용해 표시됩니다.

<pre>
function sum(a, b) {
  const result = +a + +b;

  if (isNaN(result)) {
    throw new TypeError('인자로 올바른 숫자만을 사용해주세요');
  }

  return result;
}
</pre>

BitYoungjae

가르침을 주십시오..!

다음 포스트