[HTML 강좌] 11. HTML 인용구, 출처의 표현 : 타이틀 입력부분<blockquote>, <q>,<abbr>,<address>, <cite>
이번 포스팅에서는 HTML 문서에서 인용구와 인용구에 대한 출처를 표현하는 방식, 그리고 많이 사용하는 일정 형식을 가지는 address 태그와 글자의 출력 방향을 표현하는 bdo 태그에 대해서 알아봅니다.
인용구의 표현 : <blockquote>, <q>, cite 속성, <cite> 태그
"quote" 는 "인용구"라는 영단어입니다.
<blockquote>는 긴 문장으로 구성된 인용구를 표현할때 사용하고, <q>는 인라인, 즉 한 줄로 표현되는 짧은 인용구를 표현할때 사용하는 태그입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11 강 blockquote, q, address, bdo</title>
</head>
<body>
<p>프로젝트 이야기:</p>
<blockquote cite="https://nolja119.tistory.com/64">
요즘 들어, 스타트업이나, 제조업 기반에서 새로운 비지니스 모델을
위한 솔루션을 만들고자 하는 기업들에서 조언을 구하는 요청들이
지인들을 통하여 제법 들어온다.
예전에는 ERP나 기간계 시스템을 새로 도입하고자 하는 기업들이 대부분이었으나,
요즘은 새로운 비지니스 모델을 확장하기 위하여 시스템을 갖추고자 하는 기업들이 대부분을 이룬다.
<br>
<cite>막새바람의 프로젝트 이야기</cite>
</blockquote>
<p>
여기 표현하는 이 문구는 <q>인라인 인용구</q>를 표현한다.
</p>
</body>
</html>
<blockquote>
<blockquote> 태그는 들여쓰기의 형태로 표현된다. 만약 표현되는 양식을 변경하고자 할때는 CSS에서 margin-left, margin-right을 사용하거나 margin 속성을 사용하여 변경할 수 있습니다.
cite 속성은 출처를 의미합니다.
cite 속성, <cite> 태그
<cite> 태그는 출처에 대한 title을 의미합니다.
cite 는 출처를 표현하는 단어로 두 가지의 형태로 표현됩니다. 속성으로 표현될때는 "<blockquote cite = "URL"> 는 URL로 구성된 출처를 의미하고, 출처를 웹브라우져상에 표현할때는 <cite> 태그로 표현합니다.<cite> 태그는 이탤릭체로 표현됩니다.
<q> 태그
<q> 태그는 짧은 인용구를 표현하며 인용구를 "" 로 표현합니다. "인라인 인용구"라고도 불리웁니다.
약어(abbreviation)의 표현 : <abbr> 태그
<abbr> 태그는 "WTO", "BIO"와 같은 약어를 의미합니다. title 속성과 함께 사용하여 전체 설명을 기록합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11 강 blockquote, q, address, bdo</title>
</head>
<body>
<p>약어의 표현 <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<p>프로젝트 이야기:</p>
<blockquote cite="https://nolja119.tistory.com/64">
요즘 들어, 스타트업이나, 제조업 기반에서 새로운 비지니스 모델을
위한 솔루션을 만들고자 하는 기업들에서 조언을 구하는 요청들이
지인들을 통하여 제법 들어온다.
예전에는 ERP나 기간계 시스템을 새로 도입하고자 하는 기업들이 대부분이었으나,
요즘은 새로운 비지니스 모델을 확장하기 위하여 시스템을 갖추고자 하는 기업들이 대부분을 이룬다.
<br>
<cite>막새바람의 프로젝트 이야기</cite>
</blockquote>
<p>
여기 표현하는 이 문구는 <q>인라인 인용구</q>를 표현한다.
</p>
</body>
</html>
<abbr> 태그는 점선으로된 밑줄로 표현되며, 마우스를 올려두면 title에 정의된 설명이 표현됩니다.
주소의 표현 : <address> 태그
<address> 태그는 문서의 저자의 정보 또는 소유자의 접촉 가능한 정보를 표현합니다.
<address> 태그에는 일반적으로 이메일 주소, 물리적주소(사는곳, 사무실등), 휴대폰, 소셜미디어 정보등을 표현합니다.
<address> 태그는 이태릭체로 표현되며, <address> 태그 표현 이후 자동으로 줄바꿈이 발생합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>11 강 blockquote, q, address, bdo</title>
</head>
<body>
<address>
저자 : 막새바람.<br>
사이트:<br>
Example.com<br>
주소<br>
국적
</address>
<p>약어의 표현 <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>
<p>프로젝트 이야기:</p>
<blockquote cite="https://nolja119.tistory.com/64">
요즘 들어, 스타트업이나, 제조업 기반에서 새로운 비지니스 모델을
위한 솔루션을 만들고자 하는 기업들에서 조언을 구하는 요청들이
지인들을 통하여 제법 들어온다.
예전에는 ERP나 기간계 시스템을 새로 도입하고자 하는 기업들이 대부분이었으나,
요즘은 새로운 비지니스 모델을 확장하기 위하여 시스템을 갖추고자 하는 기업들이 대부분을 이룬다.
<br>
<cite>막새바람의 프로젝트 이야기</cite>
</blockquote>
<p>
여기 표현하는 이 문구는 <q>인라인 인용구</q>를 표현한다.
</p>
</body>
</html>
마무리
이번 포스팅에서 언급한 태그는 인용구와 출처를 표기하는 문장입니다. 특히 출처의 경우 속성으로 사용될때와 태그로 사용할때의 사용되는 용도가 틀리므로 잘 알아두시기 바랍니다.
약자의 경우 <abbr>태그에서 title로 표현되는 설명이 표현되는 부분은 반드시 기억하시고, 이러한 내용이 HTML 문서를 만들게 되면, 검색엔진 최적화(SEO)와 웹접근성의 기본이 된다는 점을 반드시 유의하시기 바랍니다.
내용이 도움이 되셨거나 글쓴이를 응원하고 싶으신 분은 하트♥공감 버튼을 꾹 눌러주세요.
내용이 수정이 필요하거나, 도움이 필요하시면 댓글을 남겨주세요!!!
댓글