HTML <blockquote> 태그의 cite 속성이란?
HTML의 <blockquote> 요소에서 cite 속성은 인용문의 출처, 즉 원본 문서의 URL을 지정하는 데 사용됩니다. 이 속성에 설정된 값은 브라우저 화면에는 직접 표시되지 않지만, 검색 엔진이나 스크린 리더 등이 인용 정보를 참조할 수 있도록 도와주는 역할을 합니다.
기본 문법
cite 속성의 기본적인 사용 문법은 다음과 같습니다.
<blockquote cite="url">
여기서 url은 인용한 내용의 원래 출처 주소를 의미합니다.
실전 예제
이제 <blockquote> 요소의 cite 속성을 실제로 어떻게 활용하는지 예제 코드를 통해 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<body>
<h2>Magento</h2>
<p>Magento 공식 웹사이트에 따르면:</p>
<blockquote cite="https://magento.com/products">
Magento Commerce는 Adobe Commerce Cloud의 일부로, B2C 및 B2B 경험을 위해
엔터프라이즈급 성능, 무제한 확장성, 오픈소스 유연성을 갖춘 독특한 eCommerce 솔루션을 제공합니다.
Magento를 활용하면 더 많은 매출 창출이 입증된 고유하고 전 과정을 아우르는 고객 경험을 만들 수 있습니다.
</blockquote>
</body>
</html>실행 결과
위 코드를 실행하면 인용문이 들여쓰기 처리된 형태로 화면에 출력됩니다.
예제 코드 분석
위 예제에서는 <blockquote> 태그를 사용해 다음과 같이 인용문을 작성했습니다.
<blockquote cite="https://magento.com/products">
Magento Commerce는 Adobe Commerce Cloud의 일부로, B2C 및 B2B 경험을 위해
엔터프라이즈급 성능, 무제한 확장성, 오픈소스 유연성을 갖춘 독특한 eCommerce 솔루션을 제공합니다.
Magento를 활용하면 더 많은 매출 창출이 입증된 고유하고 전 과정을 아우르는 고객 경험을 만들 수 있습니다.
</blockquote>그리고 인용문의 출처는 cite 속성을 통해 아래와 같이 지정했습니다.
cite="https://magento.com/products"
정리
<blockquote> 태그의 cite 속성은 인용문의 신뢰성을 높이고 출처를 명확히 밝히는 데 유용한 기능입니다. 특히 콘텐츠의 출처를 구조화된 방식으로 전달해야 하는 웹 문서나 기술 블로그를 작성할 때 적극적으로 활용하면 좋습니다.