텍스트요소

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> 태그