ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [HTML] 인용문 달기 - blockquote와 abbr
    카테고리 없음 2022. 12. 14. 17:39

    인용문 관련 태그

    인용문이란 남의 글이나 말을 직접 또는 간접으로 인용한 문장을 말한다.

    이러한 인용문을 나타낼 땐 특별한 태그를 사용해 준다.

    태그 설명 비고
    <blockquote> 비교적 긴 인용문에 사용 cite 속성으로 출처 표시
    <cite> 저작물의 출처 표기 제목을 반드시 포함
    <q> 비교적 짧은 인용문에 사용 cite 속성으로 출처 표시
    <mark> 인용문 중 하이라이트 또는 사용자 행동과 연관된 곳 표시  
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body>
        <!-- 속성/특성 Attribute -->
        <!-- 태그마다 설정할 수 있는 속성이 있습니다. -->
        <h1>인용문 관련 태그</h1>
        <!-- blockquote 태그: (긴)인용문 사용 -->
        <blockquote
          cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"
        >
          <!-- &lt;는 < &gt;는 > -->
          <p>
            HTML &lt;blockquote&gt; 요소는 안쪽의 텍스트가 긴
            <mark>인용문</mark>임을 나타냅니다.<br />
            주로 들여쓰기를 한 것으로 그려집니다.(외형을 바꾸는 법은 사용 일람을
            참고하세요)<br />
            인용문의 출처 URL은 cite 특성으로, 출처 텍스트는 &lt;cite&gt; 요소로
            제공할 수 있습니다.
          </p>
        </blockquote>
        <!-- cite 태그: 저작물 출처 표시(제목을 반드시 포함) -->
        <cite> &lt;blockquote&gt;: 인용 블록 요소 from MDN </cite>
    
        <h2>짧은 인용문을 위한 q 태그</h2>
        <!-- q 태그: cite 속성에 사용됨. 문장안에 따옴표같은 걸로 들어 갈 수 있는 문장은 q태그 안에 넣어서 표현(짧은 인용문)-->
        <!-- mark 태그: 형광펜으로 칠한 것처럼 하이라이트된 텍스트 정의할 때 사용 -->
        <p>
          <strong>q</strong> 태그에 대해 MDN 문서는
          <q cite="https://developer.mozilla.org/ko/docs/Web/HTML/Element/q"
            >HTML &lt;q&gt;요소는 둘러싼 텍스트가 짧은 <br />
            인라인 <mark>인용문</mark>이라는것을 나타냅니다.</q
          >
          라고 설명하고 있습니다.
        </p>
    
        <!-- abbr 태그: 머리글자 표현할 때 사용 -->
        <h1>abbr 태그로 머리글자 표현하기</h1>
        <p>
          <strong>abbr</strong> 태그를 사용하여
          <abbr title="HyperText Markup Language">HTML</abbr>
          을 표기한 문단입니다. 소스 보기로 코드를 확인해보세요!
        </p>
        <!-- "HTML 을"을 "HTML을"로 바꾸는 방법 abbr태그 다음에 '을'을 줄바꿈하지 말고 붙인다! -->
        <p>
          <strong>abbr</strong> 태그를 사용하여
          <abbr title="HyperText Markup Language">HTML</abbr>을 표기한 문단입니다.
          소스 보기로 코드를 확인해보세요!
        </p>
      </body>
    </html>

Designed by Tistory.