태그 보관물: <addr>

HTML 인용문(Quotation) 요소 종류

인용문(Quotation)
인용문이란 남의 글이나 말을 자신의 말이나 글 속에 이용하려고 따온 것을 말한다. 보통 따옴표를 사용해서 구분해 주는데, 자신의 글이 아니라는 것을 밝혀 주는 것이다.

HTML 인용문은 크게 2가지로 나뉘게 된다.

  • 짧은 인용문
  • 블록 인용문

기본 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본 인용문 개념익히기</title>
</head>
<body>

<p>아래 인용문은 네이버 지식백과사전에서 참조:</p>
<blockquote cite="https://terms.naver.coml">
HTML(Hyper Text Markup Language)은 가장 단순한 형태의 웹 언어이다. 웹 서버에 HTML 문서를 저장하고 있다가 클라이언트가 특정 HTML 페이지를 요청하면 해당 HTML 문서를 클라이언트로 전송한다. 그러면 클라이언트는 이 웹 페이지를 해석하여 웹 브라우저에 표현해 주는데 이런 웹 페이지를 정적인(Static) 웹 페이지라고 한다.
</blockquote>

</body>
</html>

짧은 인용문(Short Quotations)

짧은 인용구는 <q> 요소를 사용하여 표현할 수 있으며, 일반적으로 웹브라우저에서는 자동으로 앞뒤에 큰따옴표를 붙이게 된다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>짧은 인용문</title>
</head>
<body>

<p>HTML 공부하는것은 정말 재밌습니다.<q>이것은 그 무엇보다 흥미있으며, 삶의 질을 높입니다.</q>여러분들도 한번 해보세요.</p>

</body>
</html>

블록 인용문(Block Quotations)

길이가 긴 인용문은 <blockquote> 요소를 사용하여 정의된다. <blockquote> 요소는 이러한 인용 부분을 별도의 단락으로 구분하여 나타내게 된다. 웹브라우저에서는 <blockquote> 요소를 들여쓰기로 인식한다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블록 인용문</title>
</head>
<body>

<p>블록 인용문 예제:</p>
<blockquote cite="https://www.itopening.com">
IT Opening 사이트는 HTML, PHP 등 웹 프로그래밍 언어를 학습하기 위해서 만들어지는 블로그이다. 앞으로도 효율적이고, 배움이 가득한 블로그로 더욱 발전시킬것을 맹세한다.
</blockquote>

</body>
</html>

HTML 축약형 <addr> 요소

HTML에서 용어의 축약형으로 사용되는 요소는 <abbr>(abbreviation)로 정의된다. <abbr> 요소를 사용한 문자 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타나게 된다.

축약형 요소를 사용하게 되면 웹브라우저상에서 번역 시스템 및 검색 엔진에 유용한 정보를 제공할 수 있다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>축약형 <addr> 태그</title>
</head>
<body>

<p>IT Opening 블로그를 줄여서 <abbr title="IT Opening">IT</abbr> 라고 표현할 수도 있다.</p>

<p>아직 생긴지 얼마 되지 않은 블로그이지만 더욱더 노력하는 블로그가 되도록 열심히 하겠다.</p>

</body>
</html>

HTML 주소 표현 <address> 요소

HTML <address> 요소를 사용하면 HTML에서 주소를 표현할 수 있다. 이것은 문서의 연락처 정보(작성자/소유자)를 정의하고 있으며, 이러한 주소는 이탤릭체로 표현하고 위아래로 약간의 공백, 즉 줄 바꿈을 추가하여 삽입되게 된다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>주소표현 <address> 요소</title>
</head>
<body>

<p>IT Opening 사이트 주인장 정보</p>
<address>
한국에 살고 있음.<br>
블로그 하는걸 좋아함.<br>
기타 여러가지 삽질을 즐겨함.
</address>

</body>
</html>

HTML <cite> 요소

HTML 주요 작품 제목을 표현하기 위해서 사용되는 요소는 <cite> 태그이다. 웹브라우저는 일반적으로 <cite> 태그를 이탤릭체로 요소를 표시한다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML <cite> 요소</title>
</head>
<body>

<img src="https://www.itopening.com/wp-content/uploads/2019/07/HTML-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%84%9C%EC%8B%9D-1.png" alt="문자열 강조효과 텍스트">
<p>작성자:<cite>IT Opening</cite>. 문자열 강조효과 텍스트를 작성함.</p>

</body>
</html>

HTML <bdo> 요소

HTML <bdo> 요소 (or HTML bidirectional override element) 는 현재 텍스트의 방향을 재정의하기 위해 사용된다. 이는 지정된 방향성을 위해 문자의 방향성을 무시하게 된다.

<bdo> 태그는 dir 속성을 반드시 사용하게 되는데, 아래 dir 속성에 사용되는 속성값을 참조하길 바란다.

ltr : 텍스트가 왼쪽에서 오른쪽 방향으로 이동해야 함을 나타낸다.
rtl : 텍스트가 오른쪽에서 왼쪽 방향으로 이동해야 함을 나타낸다.
auto : 요소의 내용에 기초하여 브라우저가 방향을 결정한다.

예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>HTML <bdo> 요소</title>
</head>
<body>

<p>HTML < bdo> 요소 (or HTML bidirectional override element) 는 현재 텍스트의 방향을 재정의하기 위해 사용된다. <bdo dir="rtl">이는 지정된 방향성을 위해 문자의 방향성을 무시하게 된다.</bdo></p>

</body>
</html>

HTML 인용문 요소

HTML 인용문에 사용되는 요소의 종류를 간략하게 정리한 표이다.

태그내용
<abbr>용어의 축약형을 정의한다.
<address>문서 작성자 / 소유자의 연락처 정보를 정의한다.
<bdo>텍스트 방향을 정의한다.
<blockquote>길이가 긴 인용문을 정의한다.
<cite>주요 작품 제목을 정의한다.
<q>외부 소스를 인용할때 사용된다.