15. HTML의 본문 마크업

들어가며

이 글에서 나는 본문(body) 콘텐츠를 의미에 따라 표현하는 HTML 기본 사용법을 보여 줄 것이다.

우 리는 제목요소(heading)와 문단, 그리고 인용문과 코드 등 일반적으로 사용되는 구조적 요소들을 살펴볼 것이다. 그리고나서 우리는 짧은 인용부호와 강조 같은 inline 형식의 내용(inline content)을 살펴 보고 구식의 표현용 요소를 짧게 살펴본 후 마무리할 것이다. 이 글의 구조는 다음과 같다.

  • 빈 칸 – 최후의 개척지
  • 블럭 레벨 요소
    • 페이지를 구분하는 헤딩
    • 기본적인 문단
    • 다른 자료를 인용하기
    • 이미 정렬해 둔 텍스트
  • 인라인 요소
    • 짧은 인용구
    • 강조
    • 기울여서 표시한 텍스트
  • 표현용 요소 – 결코 사용하지 말 것
  • 요약
각 예제 코드 뒤에는 “실제 적용된 모습 보기” 링크가 있다. 클릭하면 소스코드를 실제로 렌더링한 것을 볼 수 있다.1)

빈 칸, 최후의 개척지(Space—the final frontier)

역주 : Space에는 우주라는 뜻도 있다. 이를 이용한 패러디인 듯. final frontier라는 말은 영미권에서 많이 사용되는 말인 것 같다.

텍 스트에 대해 논의하기 전에 중요한 건, [텍스트가 중요하긴] 하지만, 빈칸 ㅡ 특히 단어 사이의 빈 칸이다. HTML을 작성할 때, 소스 문서는 “공백(white space)”이라고 하는 놈을 포함하게 될 것이다. 이건 글자 사이를 구분하기 위한 문자다. 실제 공백 문자는, 대부분은 키보드의 스페이스바를 눌러서 입력할 것이다. 하지만 문서에는 탭 문자나 구분된 두 개의 줄 사이에 들어가는 (캐리지 리턴이나 뉴 라인으로 불리는) 다른 것도 있다.

HTML에서, 이 글자들이 일으키는 다양한 효과들은, 대게는 한 개의 공백 문자로 처리된다.

<h3>In   the
        beginning</h3>

실제 적용된 모습 보기

위와 같은 예를 웹브라우저는 다음과 같이 해석한다.

<h3>In the beginning</h3>

이런 식으로 해석되지 않는 유일한 경우는 <pre> 요소 안에 있을 때이다. <pre> 요소에 대해서는 이 글에서 나중에 다룬다.

이 것은 처음 HTML 문서를 작성하려고 하는 사람에게 혼란을 낳는다. 들여쓰기를 좀 더 하려고 하거나, 문장 사이에 공백을 더 넣으려고 하거나, 문장 사이에 공백을 더 넣으려고 할 때 말이다. 문서의 외양을 바꾸는 것은 HTML로 하는 게 아니다. 그건 이 시리즈에서 뒤에 다루게 될 스타일 시트를 통해서 하는 것이다.

블럭 레벨 요소 Block level elements

이 섹션에서는 형식 텍스트를 위한 일반적인 블럭 레벨 요소의 문법과 사용법을 다룰 것이다.

페이지를 구분하는 헤딩 Page section headings

일단 페이지가 논리적으로 구분되면, 각 섹션은 적당한 헤더로 설명을 해야 한다. 이것은 “좋은 웹페이지에는 무엇이 필요한가 What does a good web page need” 라는 글에서 나중에 더 다룰 것이다.

HTML은 여섯 단계의 헤더를 정의한다. h1, h2, h3, h4, h5, 그리고 h6.(숫자가 작을수록 더 중요한 걸 가리킨다.) 일반적으로, h1은 전체 페이지의 메인 제목이다. h1은 페이지의 모든 것을 담아야 한다. 그리고 h2는 페이지를 각 부분(섹션)으로 나눈다. h3은 좀더 하위 항목이고, 뭐 그런 식이다.

헤더를 매겨서 문서의 항목, 하위 항목, 하위 항목의 하위 항목을 구분하는 것은 화면 렌더링이나 문서 자동화 등(구글봇 등이 색인하는 것) 에 중요하다.

이 문서를 사용해서 만들어 본다면, 헤더 구조의 좋은 예는 다음과 같다.

<h1>HTML 안에서 본문 마크업</h1>
<h2>들어가며</h2>
<h2>빈 칸 - 최후의 개척지</h2>
<h2>블럭 요소 엘리먼트</h2>
<h3>페이지를 구분하는 헤딩</h3>
<h3>기본적인 문단(paragraph)</h3>
<h3>다른 자료(sources) 인용하기</h3>
<h3>이미 정렬해 둔 텍스트</h3>
<h2>인라인 요소</h2>

[…등등…]

실제 적용된 모습 보기

기본적인 문단

문단은 대부분의 문서에서 기본이 된다. HTML에서 문단은 특별한 속성없이 p 태그로 표현된다. 예컨대,

<p>이것은 아주 짧은 문단이다. 겨우 두 문장이다.</p>

실제 적용된 모습 보기

글과 책에서 한 문단이 겨우 한 문장으로 이루어진 경우도 많다. “문단”의 (손으로 쓰는 글에서 본다면) 의미는 꽤나 명확하다. 그런데 웹에서는 더 짧은 영역을 문단(paragraph) 요소로 둘러싸기도 한다. 만약 글쓴이가 [p가] div 요소보다 “의미(semantic)”를 좀더 분명히 전달해 준다고 생각한다면 말이다.(우리는 뒤의 글에서 이걸 “기본적인 컨테이너”라고 부를 것이다.)

문단은, 신문이나 책 등에서 볼 수 있는 것처럼, 한 개 이상의 문장이 모인 것이다. 문단 요소는 웹에서 이를 표현하기 좋은 형식이다. 아무렇게나 흩어진 글자 쪼가리를 위한 게 아니다. 몇 단어 없고 완전한 문장이 아니라면, 문단 요소로 마크업해선 안 된다.

다른 자료(source)를 인용하기

아주 많은 글, 블로그 포스트, 그리고 참고 문헌이 다른 문서의 전체 혹은 부분을 인용할 것이다. HTML에서, 길이가 좀 되는 전체 문장이나 문단, 목록 같은 것들은 blockquote 요소로 마크업한다.

blockquote 요소는 텍스트를 바로 담을 수는 없고, 다른 블럭 레벨 요소를 포함해야 한다. 이 때, 원문에서 사용된 것과 같은 블럭 레벨 요소를 사용해야 한다. 만약 문단을 인용하려면 문단 [요소를] 사용하라. 목록들을 인용할 때는 목록을 위한 요소를 사용하라. 뭐 그런 거다.

만약 다른 웹페이지에서 인용한 것이라면, cite 속성(attribute)을 사용해서 이런 식으로 표시해줄 수 있다.

<p>HTML 4.01 is the only version of HTML that you should use
when creating a new web page, as, according to the
specification:</p>
<blockquote cite="http://www.w3.org/TR/html401/">
<p>This document obsoletes previous versions of HTML 4.0,
although W3C will continue to make those specifications and
their DTDs available at the W3C Web site.</p>
</blockquote>

만약 소설이나 잡지 같은 오프라인 자료에서 인용문을 가져온 경우라면 cite 속성은 필요없다.

이미 정렬해 둔 텍스트(preformatted text)

형식(formatting)과 공백(앞부분 참고)이 중요한 텍스트라면 반드시 pre 요소로 마크업해야 한다. [그러면] 대부분의 브라우저는 이미 서식이 있는 텍스트를 원본 그대로 보여줄 것이다. 때로는 고정폭 글꼴(모노스페이스 같은)을 사용하기도 하고, 타자기에서 가져 온 것 같은 느낌으로 보여줄 수도 있다. 고정폭 글꼴을 사용하는 것은 서식 있는 텍스트에 대해 프로그래머들이 오래전부터 사용하던 기술적 습관(artifact)이다.

이 예제는 펄 언어를 사용해 프로그래밍한 코드 조작이다:

# read in the named file in its entirety
sub slurp {
  my $filename = shift;
  my $file     = new FileHandle $filename;

  if ( defined $file ) {
    local $/;
    return <$file>;
  }
  return undef;
};

실제 적용된 모습 보기

위와 같은 코드 사용은, 지금은 덜 알려져 있는 시맨틱 요소지만 점점 더 알려지게 될 것이다.

인라인 요소 Inline elements

이 섹션에서는 형식 텍스트에 사용되는 인라인 요소의 공통 문법과 용법을 다룰 것이다.

짧은 인용구

보통 문장이나 문단에서 사용되는 짧은 인용구는 q 요소 안에 포함된다. blockquote 요소처럼 이것은 cite 속성(어트리뷰트)을 포함할 수 있다. cite 속성은 이 인용구를 인터넷 상의 어디에서 찾을 수 있는지를 나타내 준다.

짧 은 인용구는 일반적으로 주변에 인용 부호가 있도록 렌더링된다. HTML 명세에 보면, 인용부호는 유저 에이전트(user-agent:브라우저?)가 넣어 줘야 한다. 그래서 부호가 올바르게 들어갈 수 있도록 해야 하고, 문서에서 사용되고 있는 [인용된] 언어가 뭔지 인지할 수 있게 해 줘야 한다. CSS는 인용 부호를 제어할 수 있다. – 이것은 나중에 다른 글에서 “텍스트에 스타일 입히기(styling text)”라는 주제로 다룰 것이다.

실제 사용 예를 보자.

<p>This did not end well for me. Oh well, <q lang="fr">c'est la vie</q> as the French say.</p>

실제 적용된 모습 보기

강조(Emphasis)

HTML에는 사용자에게 에러 메세지나 경고, 주목 처럼 텍스트를 강조해서 표현하는 두 가지 방법이 있다. 보여 주는 브라우저(visual browser)에서는 보통 다른 색깔, 글꼴로 처리하거나 굵기, 기울기로 처리하는 걸 의미한다. 스크린 리더를 사용하는 사람들에게는 다른 목소리나 효과음이 될 수 있다.

텍스트를 강조할 필요가 있다면 아래와 같이 em 요소를 사용하면 된다.

<p><em>Please note:</em> the kettle is to be unplugged at night.</p>

실제 적용된 모습 보기

만약 모든 문장이 강조돼야 하는데, 그 안에 또 일정 부분은 더 강조돼야 한다면, strong 요소를 사용해서 통상적인 것보다 더 강조해 표현할 수 있다. 다음 예를 보자.

<p><em>Please note: the kettle
<strong>must</strong> be unplugged every evening, otherwise it will explode -
<strong>killing us all</strong></em>.</p>

실제 적용된 모습 보기

기울여서 표시한(italicised) 텍스트

“이탤릭으로 표시한(italicised)” 것은 의미를 표현하지 않는다고 생각하는 게 보통이다. 따라서 i 요소는 사용하지 말자.(다음 섹션에서 다루게 될 표현만을 위한 요소들도 거의 비슷하다.)

기 울여서 표시한 내용이 거의 틀림없이 옳은 사례가 한두 경우 있다. 아주 특정한 요소나 사용되지 않는 요소를 사용해서 만드는 것보다 이탤릭으로 표시하는 게 낫다고 생각되는 경우다. 이런 것들은 배의 이름, TV 시리즈물 제목, 영화와 책, 몇몇 기술용어와 분류 항목 같은 것이다.

이택릭으로 표시한 텍스트가 특별하고, 맥락상으로도 특별함을 보여준다는 논란이 있다. 실제로 이것은 현재 HTML5 명세 초안에 반영돼 있다:

i 요소는 다른 목소리나 분위기로 표현하거나 그렇지 않으면 일반적인 문장에서 두드러지게 할 때 사용한다. (중략) i 요소는 더 사용할 수 있는 다른 요소가 없을 때 최수 수단으로 사용되어야 한다.

i 요소는 CSS를 통해 기울여지지 않게 스타일을 재지정할 수 있다. 따라서 현재 맥락에서 “이탤릭”은 근본적으로 말한다면, “뭔가 좀 다른 것”을 의미한다. 개인적으로 말해서, 이런 방식으로 사용된 충분한 전례가 없다면 이걸 받아들여야 할지 잘 모르겠다.(I don’t find this acceptable, personally speaking, but there is enough precedent out there for it to be used this way.)

표현용 요소 – 결코 사용하지 말 것

HTML 명세는 “표현용 presentatinal”이라고 광범위하게 설명되는 몇몇 요소를 포함하고 있다. 이 요소들이 어떤 의미를 띄는지가 아니라 오직 어떻게 보일지만을 정의하고 있기 때문이다.

이들 중 몇몇은 명세에 향후 없어질 것(deprecated)이라고 표시돼 있다. 이것은 같은 결과를 내는 새로운 방법으로 대체될 것이라는 걸 의미한다.

나 는 여기서 그런 요소들을 짧게 설명할 것이다. 하지만, 이것이 거의 역사에 관심을 갖는 거나 다름 없다는 사실을 기억하기 바란다 – 이 요소들은 앞으로 웹 페이지에서 결코 사용돼선 안 된다. 이 요소들이 내는 효과를 다른 방법으로 낼 수 있도록 뒤의 글들에서 설명할 것이다 : “CSS로 텍스트 스타일 적용하기 syling text with CSS”와 “덜 알려진 의미있는 엘리먼트들 lesser known semantic elements

font face=“…” size=“…”

감싼 텍스트는 브라우저에 의해 기본 글꼴과 다르게 렌더링된다 – 이걸 사용하는 대신, 글꼴은 CSS에 정의해야 한다.

b

감싼 텍스트는 굵게 표시도니다 – 이런 텍스트는 대부분 강조하는 텍스트다, 따라서 앞에서 다룬 em이나 strong을 사용하도록 한다.

s 와 strike

감싼 텍스트에 가운데 줄이 그어진다 – 만약 단지 장식 효과에 불과한 거라면, CSS로 구현할 수 있다. 대신에, 만약 텍스트가 실제로 지워지거나 원하지 않는 것이라면 뒤의 글에서 설명할 del 요소로 마크업한다.

u

감싼 텍스트에 밑줄이 그어진다 – 이것은 대부분 보이는 효과에 불과하다. 따라서 CSS로 구현한다.

tt

감싼 텍스트는 “텔레타이프”나 모노스페이스 타입 글꼴로 표현된다 – 이런 경우는 CSS로 구현하도록 하거나 위에서 설명한 pre처럼 더 알맞은 시맨틱 요소로 구현하도록 한다.

big 과 small

감싼 요소의 크기를 조절한다 – 이것은 CSS로 구현하도록 한다.

요약

이 글에서, 나는 텍스트 콘텐트를 마크업할 때 가장 일반적으로 사용되는 요소에 대해 말했다. 다음 글에서는, 목록에 대해 알아볼 것이다.
마크 노만 프랜시스

필자 소개

마크 노만 프랜시스는 웹이 만들어지기 전부터 인터넷에서 일해 왔다. 그의 마지막 일자리는 Yahoo!였다. 그는 거기서 세계 최대의 웹사이트, 최고의 경험, 표준 코딩, 퀄리티를 위한 국제 웹개발 프론트 엔드 아키텍트였다.

Yahoo! 에서 일하기 전, 그는 포뮬라 원(Formula One) 매니지먼트, 퍼플 인터랙티브(Purple Interactive)와 시립대학(? City University) 등에서 백엔드 CGI 프로그램과 시스템 아키텍쳐 같은 웹 개발과 관련된 다양한 역할로 일했다. 그는 http://marknormanfrancis.com/ 에서 블로그를 하려고 한다.

이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.