소개
이 랩에서는 일반 텍스트와 다른 형식으로 인용문을 표시하는 데 사용되는 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 스타일을 적용하는 방법에 대해 논의했습니다.
