텍스트요소

1. <blockquote> vs <q> 태그

두가지 태그 모두 인용문에 사용된다는 점에서는 동일합니다만, blockquote는 블록요소이며 q는 인라인 요소라는 점에서 큰 차이가 있습니다. 따라서 비교적 긴 문장은 <blockquote>를 사용하고 문장내에 짧게 인용을 사용하는 경우에는 <q>를 사용하는 것을 권장합니다.

1-1 <blockquote> : 인용 블록 요소

<blockquote> 요소는 안쪽의 텍스트가 긴 인용문임을 나타냅니다. 주로 들여쓰기를 한 것으로 그려집니다.

p태그 내에서는 사용이 불가능합니다. p태그의 경우 내부에 있는 다른 자식 요소가 블록요소인 경우 자동으로 p태그가 닫히는 특징을 가지고 있기 때문입니다.

1-2 <q> : 인라인 인용문 요소

<q>요소는 둘러싼 텍스트가 짧은 인라인 인용문이라는것을 나타냅니다. 대부분의 브라우저에서는 앞과 뒤에 따옴표를 붙여 표현합니다. <q>는 줄 바꿈이 없는 짧은 경우에 적합합니다. 긴 인용문은 <blockquote> 요소를 사용하세요.

1-3 cite속성

blockquore와 q태그 모두 cite를 속성으로 사용할 수 있습니다. cite는 인용문의 출저 문서나 메세지를 가르키는 URL 인용문의 맥락 혹은 출처 정보를 가리킬 용도로 사용됩니다.

2. <pre>태그

<pre> 요소는 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현합니다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링하고, 요소 내 공백문자를 그대로 유지합니다. 보통 코드를 나타낼 때 사용을 합니다.

아래 코드를 브라우저 상에 출력을 해보면 모양 그대로 출력되는 것을 확인할 수 있습니다.

<pre>
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
</pre>

3. <figure> & <figcaption> 태그

<figure> 요소는 독립적인 콘텐츠를 표현합니다. (p태그나 blockquote태그처럼 독립적인 내용을 담고 있을 경우) <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

<figure>태그를 붙여 연관있는 문단을 나타낼 수 있습니다. 보통 들여쓰기를 한 상태로 설명이됩니다. <figcation>태그를 이용해 설명을 추가할 수 있습니다.

<figcaption> 요소는 부모 <figure> 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타냅니다.

  <figure>
    <figcaption>위 그림은 특수문자로 만든 소입니다.</figcaption>
    <pre>
      \   ^__^
       \  (oo)\_______
          (__)\       )\/\
              ||----w |
              ||     ||
    </pre>
  </figure>

4. <hr> 태그

<hr> 요소는 이야기 장면 전환, 구획 내 주제 변경 등, 문단 레벨 요소에서 주제의 분리를 나타냅니다. 역사적으로 가르줄을 표현했으며 빈요소입니다. HTML 4.01에서는 <hr> 요소가 단순히 가로선을 나타냈지만, HTML5에서는 주제의 흐름 변경(thematic break)을 나타내도록 변경되었습니다.

브라우저는 여전히 <hr> 요소를 수평 가로선으로 표현하지만, 시각적인 의미보다는 의미적 용어(semantic term)로 사용됩니다

5. <abbr> 태그

<abbr> 요소는 준말 또는 머리글자를 나타냅니다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있습니다. title 속성은 전체 설명만을 가져야 하며 다른건 포함할 수 없습니다.

마우스를 가져다대면 약어의 의미가 출력이 됩니다.

WWW and HTML

6. <address> 태그

<address> 요소는 가까운 HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냅니다. 출력을 해보면 기울림꼴로 출력이 됩니다.

<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

Contact the author of this page:

jim@rock.com
(311) 555-2368

7. <cite> 태그

<cite> 요소는 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 합니다. 적절한 맥락 아래에서는 출처를 축약해서 표기할 수 있습니다.

<!--<cite> 인용의 출처 -->
<figure>
  <blockquote> //인용문
    <p>It was a bright cold day in April, and the clocks were striking thirteen.</p>
  </blockquote>
  <figcaption> // 인용문에 대한 설명
    First sentence in 
    <cite>Nineteen Eighty-Four</cite> //정확한 인용구의 출처를 표시
    by George Orwell (Part 1, Chapter 1).
  </figcaption>
</figure>

cite의 경우 blockquote의 속성으로 표시를 할 수 있지만, 단순히 출처를 꺽쇄 안에 넣었을 뿐이지 이런 경우 브라우저에 출력되지는 않습니다.

8. <bdo> 태그: 양방향 텍스트 재정의 요소

<bdo> 요소는 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용합니다.

<p>이 글은 왼쪽에서 오른쪽으로 작성합니다. </p>
<p><bdo dir="rtl">이 글은 오른쪽에서 왼쪽으로 작성합니다.</bdo></p>

이 글은 왼쪽에서 오른쪽으로 작성합니다.

이 글은 오른쪽에서 왼쪽으로 작성합니다.