[HTML] 강조, 인용, 출처 태그 ( <em>, <strong>, <blockquote>, <q>, <cite> )

---

 

강조 태그 : <em>, <strong>

 

제목 혹은 문단 내에 특별히 강조하고 싶은 내용을 표시할 때 강조(Emphasis) 태그를 사용한다. 강조 태그는 <em>과 <strong> 두 가지 태그가 있다. 두 태그 모두 브라우저에 강조하고자 하는 내용을 알려주기 위해 사용하는 것으로 둘 중 끌리는 태그를 사용하면 된다. 두 태그를 사용했을 때 브라우저 자체에서 강조를 표시하는 방법에 차이가 있긴 하지만, 이는 CSS 처리가 가능하기 때문에 상관없다.

<p>
    책상을 가을 동경과 이름자를 쉬이 별 많은 이네들은 듯합니다. 지나고 벌써 위에 불러 하나에 마리아 불러 이름과 때 버리었습니다. 아직 나는 어머니, 무덤 있습니다. 다 멀듯이, 하늘에는 이네들은 버리었습니다. 헤는 둘 하나에 멀리 별빛이 불러 가을 나의 봅니다. 별에도 다 토끼, 다하지 밤을 하나에 별이 하나에 있습니다. 무덤 이름과, 하나에 하늘에는 라이너 나의 하나에 봅니다. <em>마리아 동경과 내 별빛이 버리었습니다.</em> 불러 아직 둘 걱정도 다하지 하나 소학교 거외다.
</p>
<p>
    책상을 가을 동경과 이름자를 쉬이 별 많은 이네들은 듯합니다. 지나고 벌써 위에 불러 하나에 마리아 불러 이름과 때 버리었습니다. 아직 나는 어머니, 무덤 있습니다. 다 멀듯이, 하늘에는 이네들은 버리었습니다. 헤는 둘 하나에 멀리 별빛이 불러 가을 나의 봅니다. 별에도 다 토끼, 다하지 밤을 하나에 별이 하나에 있습니다. 무덤 이름과, 하나에 하늘에는 라이너 나의 하나에 봅니다. <strong>마리아 동경과 내 별빛이 버리었습니다.</strong> 불러 아직 둘 걱정도 다하지 하나 소학교 거외다.
</p>

위 코드의 결과물로 <em>과 <strong>의 차이를 알 수 있다. <em> 태그는 주로 italic type (기울임체)이 적용되고, <strong> 태그는 주로 bold type (굵은 글씨)이 적용되어 표시한다. 

 

---

 

인용 태그 : <blockquote>, <q>

 

다른 사람의 말이나 문헌의 내용 등을 인용했음을 표시하기 위해 인용(Quotation) 태그를 사용한다. <blockquote> 요소는 한 문단이나 내용 전체가 인용문일 경우에, <q> 문장 내에 들어가는 인용문일 경우 사용한다. 

CNN 기사 중 일부를 발췌해 왔다. 이를 인용해 마크업한다고 할 경우, 모든 텍스트는 기사의 내용이므로 <blockquote> 요소에 포함시킬 수 있다. 또한 마지막 문단의 쌍따옴표(" ")로 묶인 문장은 Racine이라는 사람이 한 말을 인용하고 있으므로 <q> 요소에 해당한다. 따라서 아래와 같이 코드를 작성할 수 있다.

<blockquote>
    <p>
        In dismissing the lawsuits Monday, no justice noted a dissent suggesting they all believed that there was no case or controversy remaining because Trump is no longer in office.
    </p>
    <p>
        Although the case at hand died and appeals court opinions that went against the President were vacated, DC Attorney General Karl Racine, who was behind one of the challenges, said all was not lost for his side.
    </p>
    <p>
        <q>Our lawsuit demonstrated for the first time that the Emoluments Clauses, centuries-old anti-corruption protections embedded in the Constitution, can be enforced and that those clauses mean federal officials cannot accept anything of value from foreign or domestic governments,</q> Racine said.
    </p>
</blockquote>

코드의 결과물로 알 수 있는 것은 <blockquote>는 인용문 전체가 들여쓰기 되고, <q>는 앞 뒤에 쌍따옴표(" ")가 붙어 표시된다. 정리하자면,

• <blockquote> : 긴 텍스트의 인용을 별도의 블록으로 처리하는 인용문, 전체가 블록처럼 들여쓰기 된다.

• <q> : 줄 바꿈 필요없는 짧은 인용에 사용하는 인라인 인용문, 자동으로 " "(quotation marks)가 붙는다.

 

---

 

출처 태그 : <cite>

 

<cite> 요소는 저작물의 출처를 표기할 때 사용한다. <cite> 태그로 표시할 수 있는 저작물로는 책, 논문, 에세이, 시, 악보, 음악, 대본, 영화, TV 쇼, 게임, 조각, 그림, 연극, 공연, 오페라, 뮤지컬, 전시회, 판례, 컴퓨터 프로그램, 웹사이트, 웹페이지, 블로그 글과 댓글, 게시판 글과 댓글, SNS 글, 성명서, 기타 등등! 위에서 본 CNN 기사의 출처를 표기하고 싶다면,

<blockquote>
    <p>
        In dismissing the lawsuits Monday, no justice noted a dissent suggesting they all believed that there was no case or controversy remaining because Trump is no longer in office.
    </p>
    <p>
        Although the case at hand died and appeals court opinions that went against the President were vacated, DC Attorney General Karl Racine, who was behind one of the challenges, said all was not lost for his side.
    </p>
    <p>
        <q>Our lawsuit demonstrated for the first time that the Emoluments Clauses, centuries-old anti-corruption protections embedded in the Constitution, can be enforced and that those clauses mean federal officials cannot accept anything of value from foreign or domestic governments,</q> Racine said.
    </p>
    <p>
        <cite>"Why the Supreme Court didn't want to hear the Trump emoluments cases and what it means going forward"</cite> By Ariane de Vogue, CNN Supreme Court Reporter, January 26, 2021, https://edition.cnn.com/2021/01/25/politics/emoluments-trump-supreme-court-explainer
    </p>
</blockquote>

기사의 제목을 <cite> 태그로 감싸준다. 브라우저에서 자동으로 기울임꼴로 표시된다. 이 <cite> 요소와 헷갈리는 녀석이 하나 있는데, 바로 <blockquote>과 <q> 요소에 사용할 수 있는 cite 속성(attribute)이다. cite 속성은 인용문의 출처 문서를 가리키는 URL을 적어 인용문의 맥락 혹은 출처의 정보를 가리키는 용도이다.

<blockquote cite="https://edition.cnn.com/2021/01/25/politics/emoluments-trump-supreme-court-explainer">
    <p>
        In dismissing the lawsuits Monday, no justice noted a dissent suggesting they all believed that there was no case or controversy remaining because Trump is no longer in office.
    </p>
    <p>
        Although the case at hand died and appeals court opinions that went against the President were vacated, DC Attorney General Karl Racine, who was behind one of the challenges, said all was not lost for his side.
    </p>
    <p>
        <q>Our lawsuit demonstrated for the first time that the Emoluments Clauses, centuries-old anti-corruption protections embedded in the Constitution, can be enforced and that those clauses mean federal officials cannot accept anything of value from foreign or domestic governments,</q> Racine said.
    </p>
    <p>
        <cite>"Why the Supreme Court didn't want to hear the Trump emoluments cases and what it means going forward"</cite> By Ariane de Vogue, CNN Supreme Court Reporter, January 26, 2021
    </p>
</blockquote>

cite 속성에 출처 사이트를 적어도 시각적으로 보여지는 결과물은 없지만, 브라우저에게 '지금부터 작성되는 인용문의 출처 사이트는 여기야~!'라고 알려주고 있다고 생각하면 될 것 같다. 

• <cite> 태그 : 출처를 나타내는 텍스트 요소일 경우 사용 <cite>출처</cite>  

• cite 속성 : 인용문의 출처 URL을 제공할 경우 사용 <blockquote cite="URL">