HTML <cite> 태그를 사용한 인용 형식 지정

소개

이 랩에서는 일반 텍스트와 다른 형식으로 인용문을 표시하는 데 사용되는 HTML <cite> 태그를 소개합니다. 이 랩에서는 HTML 문서에서 인용문의 저자를 인용하기 위해 <cite> 태그를 <blockquote> 태그와 함께 사용하는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요소 포함하기

<cite> 요소를 사용하려면 HTML 문서에 포함해야 합니다. 이에 필요한 구문은 다음과 같습니다.

<cite> ... </cite>

요소 안에 내용 추가하기

인용문을 표시하려면 인용할 내용을 <cite> 태그 안에 포함합니다.

<cite>The text to be cited</cite>

및 요소 함께 사용하기

인용문의 저자를 인용하려면 <blockquote> 태그를 <cite> 태그와 함께 사용합니다.

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

참고: 인용된 텍스트는 따옴표로 묶이고, 저자의 이름은 <cite> 태그로 묶입니다.

태그에 CSS 적용하기

기본적으로 <cite> 태그 안의 텍스트는 이탤릭체로 표시됩니다. 또한, 인용문의 모양을 변경하기 위해 <cite> 태그에 추가적인 CSS 스타일을 적용할 수 있습니다. 다음은 예시입니다.

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

요약

이 랩에서는 HTML <cite> 태그를 사용하여 일반 텍스트와 다른 형식으로 인용문을 표시하는 방법을 배웠습니다. 또한 HTML 문서에서 인용문의 저자를 인용하기 위해 <cite> 태그를 <blockquote> 태그와 함께 사용하는 방법도 배웠습니다. 마지막으로, 인용문의 모양을 변경하기 위해 <cite> 태그에 CSS 스타일을 적용하는 방법에 대해 논의했습니다.