본문 바로가기
웹프로그래밍/HTML

HTML 인용 및 인용요소(Quotation and Citation Elements)<blockquote>, <q>, <abbr>, <address>, <cite>, <bdo>

by 유노brain 2023. 9. 3.
반응형
정리:
<blockquote> - 다른 소스에서 인용된 섹션 정의
<q> - 짧은 인용문 정의
<cite> - 작품의 제목 정의
<abbr> - 축약 또는 줄임말
<address> - 문서 작성자 또는 소유자의 정보를 정의
<bdo> - 텍스트 방향을 알려준다.

 

<blockquote>

<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>

</body>
</html>

-> <blockquote>는 다른 소스에서 인용된 부분을 정의한다.

-> 일반적으로 <blockquote>의 경우 들여쓰기를 한다.

 

<q>

<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from WWF's website:</p>

<p>jordan say <q>there is nobility in poverty</q></p>

</body>
</html>

-> 인용문을 나타낸다.

-> 위의 문장의 경우 jordan say "there is nobility in povety" 이렇게 나온다.

 

<abbr>

<!DOCTYPE html>
<html>
<body>

<p>Here is a quote from WWF's website:</p>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

</body>
</html>

-> <abbr>의 경우 "HTML", "CSS", "Mr." 처럼 축약, 줄임말을 사용하는 것을 뜻한다.

-> 마우스를 축약/줄임말 위로 이동하면 전체 제목이 나온다.

 

<cite>

<!DOCTYPE html>
<html>
<body>

<p><cite>The Great Gatsby</cite>by F.Scott Fitzgerald</p> 

</body>
</html>

-> <cite> 태그의 경우 작품의 제목을 나타낸다.

-> 주로 italic(기울임꼴) 폰트를 사용한다.

 

<bdo>

<!DOCTYPE html>
<html>
<body>
    
    <bdo dir="rtl">This text will be written from right to left</bdo>

</body>
</html>

-> <bdo>는 텍스트의 방향을 나타내는 태그다.

-> dir(방향)을 통해 텍스트의 방향을 정한다.

-> 위의 rtl의 경우 'right to left' 로 "thfel ot thgir morf nettirw eb lliw txet sihT"가 나타난다.

 

<address>

<!DOCTYPE html>
<html>
<body>
    
    <address>
        Written by John Doe.<br>
        Visit us at:<br>
        Example.com<br>
        Box 564, Disneyland<br>
        USA
        </address>

</body>
</html>

-> <address> 태그의 경우 기사 또는 문서의 기자/소유주의 연락처를 정의한다.

-> 여기서 연락처는 e-mail, URL, 핸드폰 번호, 소셜 미디어 아이디가 될 수 있다.

-> <address> 텍스트의 경우 주로 기울임꼴로 표시가 되며, 요소 앞 또는 뒤에 줄 바꿈<br>을 표시해야한다. 

반응형

'웹프로그래밍 > HTML' 카테고리의 다른 글

HTML Links 링크 이미지, 주소 넣기  (0) 2023.09.03
HTML Styles - CSS  (0) 2023.09.03
HTML Styles 속성(텍스트, 배경색, 폰트, 폰트크기)  (0) 2023.09.03
HTML 주석  (1) 2023.09.03
HTML 기초(예제 코드)  (0) 2023.09.03

댓글