html에서 인용태그를 사용하면 원저작자의 출처를 작성할 수 있다. 가시적으로 보이지는 않지만 검색엔진은 이를 판별하기도 한다. 인용태그는 여러가지가 있고, 쓰임새도 다르다. 특정문구를 인용구로써 표시하고 싶다면 인용문 태그를 사용하여 그 표시를 강조할 수 있다.
html 인용구 태그 종류와 사용
qutation and citation tag
컨텐츠를 위한 홈페이지를 만들다보면 인용을 할 때가 있다.
다른 홈페이지에 있는 글들을 발췌할 경우가 그 때인데 공개적으로 출처를 밝히거나 혹은 해당 문구만 인용할 때 인용태그를 사용한다.
인용이란 단어의 뜻을 먼저 알도록 하자.
인용 또는 인용구는 어떤 책 또는 문서, 웹페이지 등의 출처를 밝히고자 할 때 사용한다.
html 은 이런 인용구를 위한 태그들이 존재한다.
눈에는 보이지 않지만 검색엔진들은 이를 검색하고 인덱싱을 하기도 한다.
인용구는 이탤릭체로 변형되어 보이기도 한다.
인용 태그들
html 컨텐츠 작성시 인용구를 사용할 필요가 있다.
자주 사용하는 인용구가 몇가지 있다.
가시적으로는 자주 보이지는 않지만 외국의 사례에서 보면 자주 사용되는 것을 볼 수 있다.
이탤릭체로 되어 있다보니 잘 보이지는 않지만 소스보기 등으로 보면 출처를 인용구로써 표기하고 있다.
- blockquote
들여쓰기 형식으로 인용구를 작성한다.
cite 속성을 이용하여 출처url 을 작성해서 넣을 수 있지만, 가시적으로 보이지는 않는다. - q
쌍따움표를 이용하여 인용구를 표현한다. - abbr
축약어를 말한다.
보통 단체의 약어를 표기할 때 풀네임을 title 속성을 이용하여 작성하게 된다. - address
컨텐츠의 작성자 또는 홈페이지의 실제 주소 등을 표현한다.
주소가 길면 br 태그를 이용한다. - q
이탤릭체로 표현한다.
시집, 책제목 등의 제목을 표현하는데 사용된다. - bdo
글자를 작성하는 표현방법으로 인용한다.
dir 속성을 이용하여 글자의 방향을 정한다.
샘플코드
위에서 언급한 인용구 태그들을 이용하여 html 예제를 만들어 본다.
코드가 길어질 수 있지만 눈으로만 익혀두자.
그때그때 살펴보고 사용하는 것으로도 무리는 없다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<h1>
인용 태그
</h1>
<p>
<p>이곳은 개발전용 블로그입니다.:</p>
<blockquote cite="https://lngnat.tistory.com/">
지금까지 공부하고 현업에서 사용한 지식들을 버리기는 아깝고
블로그에 꾸준히 작성하고 있습니다.
실제로 한번쯤은 다뤄봤거나 또는 공부하고 있는 것들을 꾸준히
작성할 계획입니다.
</blockquote>
</p>
<p>
개발 블로그의 목표는 :
<q>
알고 있거나 공부한 지식을 기록으로 남겨 검색을 줄이고 개발 시간을 단축하는데 있습니다.
</q>
</p>
<p>
이곳은 <abbr title="w3schools">W3S</abbr> 의 자료를 주로 사용합니다.
추가적인 내용들은 서적이나 유튜브 등을 참고하기도 합니다.
</p>
<p>
<address>
개코 (개발과코딩)에 의해 쓰여짐<br>
방문하려면 :<br>
lngnat.tistory.com/<br>
해안가 어딘가<br>
대한민국
</address>
</p>
<p>
<cite>w3schools</cite>는 독학하거나 현업에서 사용하기에 유용합니다.
</p>
<p>
<bdo dir="ltr">이 문장은 왼쪽에서 오른쪽으로 쓰여집니다.</bdo>
<br/>
<bdo dir="rtl">이 문장은 오른쪽에서 왼쪽으로 쓰여집니다.</bdo>
</p>
</div>
</body>
<!-- // -->
</html>
<!-- // -->아래는 위의 코드에 대한 결과화면이다.
정확한 내용은 태그로써 숨겨져 있는 것을 알 수 있다.
웹페이지를 꾸밀 떄 어떤 문장을 가져와 사용했다면 인용구 태그를 이용하여 출처를 넣을 수 있다.
'programming > web' 카테고리의 다른 글
| html 배경색 지정하기 css 스타일 background-color 사용 using html style (0) | 2022.03.24 |
|---|---|
| html 주석 사용하기 using html comment (0) | 2022.03.21 |
| html 문자열 태그 종류와 의미 using html text formatting tag (0) | 2022.03.15 |
| html5 css3 스타일 자주 사용하는 배경 글자 정렬 적용하기 using html css sytle background font align (0) | 2022.03.13 |
| html5 태그에 스타일 css 지정하는 방법 using html5 style attribute (0) | 2022.03.12 |
댓글