Advanced text features

김동현·2026년 2월 24일

mdn 학습 번역 - HTML

목록 보기

7/31

고급 텍스트 기능 (Advanced text features)

인용구 (Quotations)

HTML에는 인용구를 마크업할 수 있는 전용 기능들이 포함되어 있어요. 어떤 요소를 사용할지는 여러분이 블록(Block) 단위의 인용구를 사용할지, 아니면 인라인(Inline) 단위의 인용구를 사용할지에 따라 달라진답니다.

블록 인용구 (Blockquotes)

만약 문단, 여러 개의 문단, 또는 목록 등 블록 레벨 콘텐츠의 특정 섹션 전체를 다른 곳에서 인용해 왔다면, 이를 나타내기 위해 해당 부분을 <blockquote> 요소로 감싸주어야 해요. 그리고 인용해 온 원본 출처의 URL을 cite 속성(attribute) 안에 포함시키는 것이 좋습니다.

예를 들어, 다음 마크업은 MDN의 <blockquote> 요소 페이지에서 가져온 거예요.

<p>
  The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
  <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
  extended quotation.
</p>

이것을 블록 인용구로 바꾸려면, 그저 아래처럼 마크업하면 된답니다.

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

브라우저의 기본 스타일은 이것이 인용구라는 것을 시각적으로 나타내기 위해 '들여쓰기(Indented)된 문단'으로 렌더링(화면에 그려줌)을 해줍니다. 인용구 바로 위에 있는 문단은 이를 비교해서 보여주기 위해 넣은 거예요.

👨‍🏫 강사의 팁: 브라우저 기본 스타일로 들여쓰기가 들어간다고 해서 "아! 들여쓰기가 필요할 때 <blockquote>를 써야겠다!"라고 생각하시면 절대 안 됩니다! 모양(스타일)은 CSS의 몫이고, HTML 태그는 오직 '의미(이 문장은 외부에서 인용해 온 글이다)'를 부여하는 데에만 사용하셔야 해요.

인라인 인용구 (Inline quotations)

인라인 인용구도 정확히 똑같은 방식으로 작동하지만, <blockquote> 대신 <q> 요소를 사용한다는 점만 달라요. 예를 들어, 아래 마크업에는 MDN의 <q> 페이지에서 가져온 짧은 인용구가 포함되어 있습니다.

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q
    cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
</p>

브라우저의 기본 스타일은 이것이 인용구임을 나타내기 위해 일반 텍스트 앞뒤에 따옴표를 자동으로 붙여서 렌더링한답니다. 다음과 같이 말이죠!

👨‍🏫 강사의 팁: <q> 태그를 쓰면 개발자가 직접 키보드로 따옴표(" ")를 치지 않아도 브라우저가 알아서 따옴표를 넣어줍니다. 게다가 웹페이지의 언어 설정(<html lang="ko"> 등)에 따라 해당 국가에 맞는 모양의 따옴표(예: 한국어나 영어의 " ", 프랑스어의 « » 등)로 똑똑하게 바꿔준다는 사실! 정말 유용하죠?

출처 인용 (Citations)

cite 속성(attribute)에 들어가는 내용은 꽤 유용할 것 같지만, 안타깝게도 웹 브라우저나 스크린 리더(시각장애인을 위해 화면을 읽어주는 프로그램)는 이 속성을 가지고 딱히 뭔가 특별한 동작을 하지는 않아요. 자바스크립트나 CSS를 이용해 여러분만의 해결책을 직접 만들지 않는 이상, 브라우저 화면 상에 cite 속성의 내용을 보이게 할 방법은 기본적으로 없습니다. 만약 인용의 출처를 페이지 상에서 사용자가 볼 수 있게 만들고 싶다면, 텍스트 안에 직접 링크를 걸거나 다른 적절한 방법으로 제공해주셔야 해요.

HTML 태그 중에 <cite>라는 요소도 있는데요! (속성 cite와 헷갈리지 마세요!) 이것은 인용되는 원본 리소스의 제목(예: 책 이름, 영화 제목 등)을 담기 위한 요소입니다. 하지만 <cite> 태그 안의 텍스트에 링크를 걸어 인용 출처로 연결하지 못할 이유는 전혀 없겠죠? 아래처럼 활용해 볼 수 있습니다.

<p>
  According to the
  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
    <cite>MDN blockquote page</cite></a>:
</p>

<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
  — <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q"><cite>MDN q page</cite></a>.
</p>

참고로 출처 인용인 <cite> 요소는 브라우저에서 기본적으로 이탤릭체(기울임꼴) 폰트로 스타일링된답니다.

누가 한 말이죠? 블록 인용구 연습해보기 (Who said that? Blockquote practice)

자, 또 다른 과제를 해볼 시간이에요! 이 예제에서 여러분이 직접 해보셨으면 하는 것은 다음과 같습니다.

아래 코드 블록에 있는 "Play" 버튼을 클릭하여 MDN Playground에서 예제를 수정해 보세요. (로컬 환경에서 직접 코딩해보셔도 좋습니다!)
가운데에 있는 문단을 blockquote로 바꾸고, cite 속성을 추가해 보세요.
세 번째 문단에 있는 "The Need To Eliminate Negative Self Talk" 부분을 인라인 인용구로 바꾸고, cite 속성을 포함시켜 보세요.
각 출처의 제목을 <cite> 태그로 감싸고, 각각을 해당 출처로 이동하는 링크(a 태그)로 만들어 보세요.

여러분에게 필요한 인용 출처 URL은 다음과 같습니다:

공자(Confucius) 명언 출처: http://www.brainyquote.com/quotes/authors/c/confucius.html
"The Need To Eliminate Negative Self Talk" 출처: http://example.com/affirmationsforpositivethinking

만약 실수를 했다면 MDN Playground의 Reset 버튼을 사용해 지울 수 있습니다. 너무 막막하시다면 코드 블록 아래에 있는 정답을 확인해 보세요.

<p>Hello and welcome to my motivation page. As Confucius' quotes site says:</p>
<p>It does not matter how slowly you go as long as you do not stop.</p>
<p>
  I also love the concept of positive thinking, and The Need To Eliminate
  Negative Self Talk (as mentioned in Affirmations for Positive Thinking.)
</p>

여러분이 완성한 HTML 코드는 다음과 같은 모습이어야 합니다!

<p>
  Hello and welcome to my motivation page. As
  <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"
    ><cite>Confucius' quotes site</cite></a
  >
  says:
</p>

<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">
  <p>It does not matter how slowly you go as long as you do not stop.</p>
</blockquote>

<p>
  I also love the concept of positive thinking, and
  <q cite="http://example.com/affirmationsforpositivethinking"
    >The Need To Eliminate Negative Self Talk</q
  >
  (as mentioned in
  <a href="http://example.com/affirmationsforpositivethinking"
    ><cite>Affirmations for Positive Thinking</cite></a
  >.)
</p>

약어 (Abbreviations)

웹 서핑을 하다 보면 꽤 자주 만나게 되는 또 다른 요소는 바로 <abbr> 입니다. 이것은 약어(abbreviation)나 두문자어(acronym, 여러 단어의 앞 글자만 딴 말)를 감쌀 때 사용해요. 둘 중 어떤 것을 포함하든, 처음 사용할 때는 약어를 마크업하기 위한 <abbr>과 함께 일반 텍스트로 해당 용어의 전체 풀이(full expansion)를 제공해 주는 것이 좋습니다. 이는 사용자 에이전트(브라우저, 스크린 리더 등)에게 콘텐츠를 어떻게 읽어주거나 표시할지에 대한 힌트를 제공하는 동시에, 모든 사용자에게 그 약어가 무슨 뜻인지 알려주는 친절한 역할을 하죠.

만약 약어 외에 전체 풀이를 본문에 텍스트로 적어두는 것이 문맥상 어색하고, 해당 약어나 두문자어가 꽤 짧게 줄여진 단어라면, <abbr> 요소의 title 속성(attribute) 값으로 전체 풀이를 제공해 주는 방법이 있습니다.

약어 예제 (Abbreviation example)

예제를 통해 살펴볼까요?

<p>
  We use <abbr>HTML</abbr>, Hypertext Markup Language, to structure our web
  documents.
</p>

<p>
  I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with
  the chainsaw.
</p>

이 코드는 다음과 같이 렌더링 됩니다. (마우스를 Rev. 글자 위에 올려보세요!)

👨‍🏫 강사의 팁: <abbr title="Reverend"> 처럼 title 속성을 적어주면, 브라우저에서 마우스를 가져다 댔을 때 말풍선(Tooltip)으로 원래 의미가 뜨게 됩니다. 사용자 경험(UX) 측면에서 아주 훌륭한 디테일이죠!

참고 (Note):
HTML의 이전 버전에서는 <acronym> 이라는 요소도 지원했었어요. 하지만 HTML 스펙이 업데이트 되면서 약어와 두문자어 모두 <abbr> 요소를 사용하여 표현하는 것으로 통합되었고 <acronym>은 제거되었습니다. 따라서 앞으로는 절대 <acronym>을 사용하시면 안 됩니다!

약어 마크업 해보기 (Let's mark up an abbreviation)

이번 학습 과제에서는 약어를 직접 마크업해 볼 거예요.

아래 코드 블록의 "Play" 버튼을 클릭하여 MDN Playground에서 예제를 수정해 보세요.
포함된 약어들을 적절한 HTML을 사용하여 마크업해 보세요. 여러분이 좋아하는 다른 약어로 바꿔서 마크업해 보는 것도 아주 좋은 방법입니다!

막힌다면 아래 정답을 확인해 보세요.

<p>NASA sure does some exciting work.</p>

<p>The new user interface design LGTM!</p>

완성된 HTML은 다음과 비슷한 코드 조각 형태가 되어야 해요:

<p>
  <abbr>NASA</abbr> (the National Aeronautics and Space Administration) sure
  does some exciting work.
</p>

<p>The new user interface design <abbr title="Looks good to me">LGTM</abbr>!</p>

논리적으로 생각해 보면, "NASA" 같은 단어는 본문에 처음 등장할 때 전체 풀이를 텍스트로 적어주는 것이 좋습니다. 왜냐하면 이는 모든 사람이 본문 속에서 바로 확인할 수 있는 유용한 정보이기 때문이죠.
반면 "LGTM (Looks good to me, 좋아 보이네요)" 같은 두문자어는 순전히 공간과 시간을 절약하기 위해 쓰이는 인터넷 은어입니다. 본문에 구구절절 풀어서 쓰는 것은 오히려 어색할 수 있죠. 그래서 title 속성 안에 전체 풀이를 넣는 방식을 취한 것입니다. (실제 서비스에서는 개발자가 일일이 수작업하기보다는, 알려진 용어들에 대해 자동으로 스크립트가 처리하도록 만드는 경우가 많습니다.)

연락처 세부 정보 마크업 (Marking up contact details)

HTML에는 연락처 세부 정보를 마크업하기 위한 전용 요소인 <address>가 있습니다. 이 태그는 여러분의 연락처 정보를 감싸는 데 사용됩니다. 예를 들면 이렇게요!

<address>Chris Mills, Manchester, The Grim North, UK</address>

<address> 안에는 조금 더 복잡한 마크업이나 다른 형태의 연락처 정보를 포함할 수도 있습니다. 아래처럼요!

<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

또한, 연결된 링크(a 태그)의 페이지에 연락처 정보가 포함되어 있다면 아래와 같이 작성하는 것도 아주 훌륭한 방법입니다.

<address>
  Page written by <a href="https://developer.mozilla.org/en-US/docs/authors/chris-mills/">Chris Mills</a>.
</address>

참고 (Note):
<address> 요소는 자신과 가장 가까운 부모 <article> 요소나 <body> 요소에 담긴 문서에 대한 연락처 정보를 제공할 때만 사용해야 합니다. 즉, 웹사이트 전체의 연락처 정보를 나타내기 위해 사이트의 <footer> 안에서 사용하거나, 기사(article) 안에서 해당 글을 쓴 '저자(author)'의 연락처를 표시할 때 사용하는 것은 올바릅니다. 하지만 페이지의 주요 내용과 무관한 일반적인 주소 목록(예: 전국 매장 주소록 등)을 마크업할 때는 절대 <address>를 사용해서는 안 됩니다.

👨‍🏫 강사의 팁: 이 부분이 많은 입문자분들이 헷갈리는 포인트예요! 태그 이름이 address(주소)라고 해서 지도 상의 아무 물리적 주소나 냅다 감싸시면 안 됩니다. 이 태그는 "이 콘텐츠를 만든 사람(또는 소유자)과 연락할 수 있는 정보"라는 의미를 가집니다.

위첨자와 아래첨자 (Superscript and subscript)

날짜, 화학식, 그리고 수학 방정식과 같은 항목들이 올바른 의미를 가지도록 마크업해야 할 때 가끔 위첨자와 아래첨자를 사용해야 할 일이 생깁니다. 이때 <sup> (위첨자, Superscript) 요소와 <sub> (아래첨자, Subscript) 요소가 바로 이 역할을 해줍니다. 예를 들어볼게요.

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
  Caffeine's chemical formula is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

이 코드의 결과물은 화면에 다음과 같이 작게 위, 아래로 치우쳐서 나타납니다. 화학식이나 수학 공식을 적을 때 필수적이겠죠?

컴퓨터 코드 표현하기 (Representing computer code)

HTML을 사용하여 컴퓨터 코드를 마크업할 때 사용할 수 있는 몇 가지 전용 요소들이 있어요.

<code>: 일반적인 컴퓨터 코드 조각을 마크업할 때 사용합니다.
<pre>: 공백(whitespace)을 그대로 유지할 때 사용합니다 (일반적으로 코드 블록을 만들 때 씁니다). 텍스트 내에서 들여쓰기나 과도한 공백을 사용하더라도, HTML 브라우저는 기본적으로 이를 무시하고 한 칸의 공백으로만 렌더링합니다. 하지만 텍스트를 <pre></pre> 태그로 감싸면, 텍스트 에디터에서 작성한 모양 그대로 공백과 줄바꿈이 렌더링됩니다.
<var>: 특별히 변수(variable) 이름을 마크업할 때 사용합니다.
<kbd>: 키보드 (또는 기타 유형의) 입력을 컴퓨터에 입력해야 함을 마크업할 때 사용합니다 (예: 단축키 안내).
<samp>: 컴퓨터 프로그램의 출력 결과물(sample output)을 마크업할 때 사용합니다.

이 요소들을 이용해 컴퓨터 코드를 어떻게 표현하는지 예제를 통해 살펴봅시다. 원본 파일 전체를 보고 싶다면 other-semantics.html 샘플 파일을 확인해 보세요. 파일을 다운로드해서 브라우저로 직접 열어볼 수도 있지만, 여기에 주요 코드 조각을 가져와 봤어요.

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>
  You shouldn't use presentational elements like <code>&lt;font&gt;</code> and
  <code>&lt;center&gt;</code>.
</p>

<p>
  In the above JavaScript example, <var>para</var> represents a paragraph
  element.
</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

위의 코드는 기술 블로그나 프로그래밍 튜토리얼 사이트에서 아주 자주 볼 수 있는 형태의 예쁜 디자인으로 렌더링 됩니다.

👨‍🏫 강사의 팁: 개발 블로그 만드실 계획 있으시죠? <pre> 태그 안에 <code> 태그를 넣는 <pre><code>...</code></pre> 패턴은 프로그래밍 코드를 웹에 띄울 때 전 세계 표준처럼 쓰이는 방식이에요. 또, 단축키를 알려줄 때 <kbd>를 쓰면 CSS로 예쁜 키보드 버튼 모양을 만들어주기 아주 편하답니다!

시간과 날짜 마크업 (Marking up times and dates)

HTML은 기계(컴퓨터, 검색엔진 등)가 읽을 수 있는 형식으로 시간과 날짜를 마크업할 수 있는 <time> 요소도 제공합니다. 예를 들면 다음과 같아요.

<time datetime="2016-01-20">20 January 2016</time>

이게 왜 유용할까요? 사람들은 날짜를 정말 다양한 방식으로 적습니다. 방금 본 날짜만 해도 다음과 같이 여러 형태로 쓸 수 있거든요.

20 January 2016
20th January 2016
Jan 20 2016
20/01/16
01/20/16
다음 달 20일
20e Janvier 2016 (프랑스어)
2016 년 1 월 20 일 (한국어, 일본어)
기타 등등...

하지만 컴퓨터는 이렇게 중구난방인 형태들을 쉽게 인식하지 못합니다. 만약 여러분이 웹 페이지에 있는 모든 이벤트의 날짜를 자동으로 수집해서 달력에 꽂아 넣는 프로그램을 만들고 싶다면 어떨까요? <time> 요소를 사용하면 이러한 목적을 위해 오해의 여지가 없는 '기계 판독 가능한(machine-readable)' 명확한 시간/날짜 데이터를 첨부할 수 있답니다.

위에서 본 기본 예제는 간단한 기계 판독 날짜를 제공하지만, 그 외에도 가능한 엄청나게 많은 옵션이 있어요. 몇 가지 예시를 볼까요?

<time datetime="2016-01-20">20 January 2016</time>
<time datetime="2016-01">January 2016</time>
<time datetime="01-20">20 January</time>
<time datetime="19:30">19:30</time>
<time datetime="19:30:01.856">19:30:01.856</time>
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<time datetime="2016-01-20T19:30+01:00">
  7.30pm, 20 January 2016 is 8.30pm in France
</time>
<time datetime="2016-W04">The fourth week of 2016</time>

👨‍🏫 강사의 팁: <time> 요소와 datetime 속성은 여러분의 웹사이트 SEO(검색엔진 최적화)에 엄청난 도움을 줍니다! 구글 검색 결과에서 특정 포스팅이나 이벤트 날짜가 깔끔하게 노출되는 것을 본 적 있으시죠? 그게 다 이런 시맨틱 태그 덕분이에요.