<blockquote>이 장에서는 <p> <q>, <div> <abbr>, <address><div>, <cite>, <bdo>. <div> 및 HTML 요소 에 대해 다룬다
다음은 WWF 웹사이트에서 발췌한 내용입니다 :
세계자연보호기금(WWF)은 60년 동안 사람과 자연이 함께 번영할 수 있도록 노력해 왔습니다. 세계 최고의 환경보호 단체인 WWF는 거의 100개국에서 활동하고 있습니다. 모든 대륙에서 우리는 전 세계 사람들과 협력하여 지역 사회, 야생 동물, 그리고 그들이 살아가는 터전을 보호하는 혁신적인 해결책을 개발하고 실행합니다.
<!DOCTYPE html>
<html>
<body>
<p>다음은 WWF 웹사이트에서 발췌한 내용입니다 </p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
세계자연보호기금(WWF)은 60년 동안 사람과 자연이 함께 번영할 수 있도록 노력해 왔습니다. 세계 최고의 환경보호 단체인 WWF는 거의 100개국에서 활동하고 있습니다. 모든 대륙에서 우리는 전 세계 사람들과 협력하여 지역 사회, 야생 동물, 그리고 그들이 살아가는 터전을 보호하는 혁신적인 해결책을 개발하고 실행합니다.</blockquote>
</body>
</html>
인용문용 HTML <blockquote>
HTML <blockquote> 요소는 다른 소스에서 인용한 부분을 정의한다
브라우저는 일반적으로 <blockquote> 요소를 들여쓰기한다.
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
세계자연보호기금(WWF)은 60년 동안 사람과 자연이 함께 번영할 수 있도록 노력해 왔습니다. 세계 최고의 환경보호 단체인 WWF는 거의 100개국에서 활동하고 있습니다. 모든 대륙에서 우리는 전 세계 사람들과 협력하여 지역 사회, 야생 동물, 그리고 그들이 살아가는 터전을 보호하는 혁신적인 해결책을 개발하고 실행합니다.</blockquote>HTML <q>를 사용하여 간략한 인용문 작성하기
HTML <q>태그는 짧은 인용구를 정의한다.
브라우저는 일반적으로 인용문 주위에 따옴표를 삽입한다.
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
HTML <abbr> 약어
HTML <abbr>태그는 "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM"과 같은 약어 또는 두문자어를 정의한다
약어를 표시하면 브라우저, 번역 시스템 및 검색 엔진에 유용한 정보를 제공할 수 있다.
팁: 요소에 마우스를 올렸을 때 약어/두문자어에 대한 설명을 표시하려면 전역 title 속성을 사용하기.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
연락처 정보는 HTML <주소> 형식으로 입력하기
HTML <address>태그는 문서 또는 기사의 작성자/소유자의 연락처 정보를 정의한다.
연락처 정보에는 이메일 주소, URL, 실제 주소, 전화번호, 소셜 미디어 계정 등이 포함될 수 있다.
해당 요소 안의 텍스트는 일반적으로 이탤릭체<address> 로 표시되며 , 브라우저는 항상 해당 요소 앞뒤에 줄 바꿈을 추가한다.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
작품 제목에 대한 HTML <cite>
HTML <cite>태그는 창작물(예: 책, 시, 노래, 영화, 그림, 조각 등)의 제목을 정의한다. 해당 요소의 텍스트는 일반적으로 이탤릭체<cite> 로 표시된다. <i> 는 그냥 단순 기울임. 시각적으로는 같게 보여도, 역할이 다르다.
참고: 사람 이름은 작품의 제목이 아니므로 사람에 대해서는 cite 를 쓰지 말 것.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
<!-- ✅ 맞는 사용 -->
<cite>The Scream</cite> by Edvard Munch.
<!-- "절규"라는 그림 제목 → cite 대상 O -->
<!-- ❌ 틀린 사용 -->
<cite>Edvard Munch</cite>
<!-- 뭉크는 사람 이름이지 작품 제목이 아님 → cite 대상 X -->양방향 재정의를 위한 HTML <bdo>
BDO는 양방향 재정의(Bi-Directional Override)를 의미한다.
HTML <bdo> 태그는 현재 텍스트 방향을 재정의하는 데 사용된다.
<bdo dir="rtl">This text will be written from right to left</bdo>
bdo 가 뭐야?
아랍어, 히브리어 같은 언어는 오른쪽 → 왼쪽으로 읽거든 (RTL).
근데 영어/한국어는 왼쪽 → 오른쪽 (LTR).
문제 상황
"Hello" 를 아랍어 텍스트 중간에 넣으면
브라우저가 자동으로 방향을 판단하려다가 꼬여버림
이걸 강제로 방향 지정할 때 쓰는 게 <bdo> 태그야.
<bdo dir="rtl">Hello</bdo>
결과 →
olleH
"Hello"를 오른쪽→왼쪽으로 강제로 뒤집어서 렌더링함.
Override가 붙은 이유
브라우저가 텍스트 방향을 자동 감지하는 기본 동작을 무시(override)하고 내가 지정한 방향으로 강제한다는 뜻.
실무에서 한국어/영어만 다루면 거의 쓸 일 없고, 다국어 서비스 (아랍어, 히브리어 지원) 할 때 등장하는 태그야.
HTML 인용 및 참조 요소
Tag Description
| <abbr> | Defines an abbreviation or acronym |
| <address> | Defines contact information for the author/owner of a document |
| <bdo> | Defines the text direction |
| <blockquote> | Defines a section that is quoted from another source |
| <cite> | Defines the title of a work |
| <q> | Defines a short inline quotation |
'HTML' 카테고리의 다른 글
| html 11. 주석 (0) | 2026.05.25 |
|---|---|
| html 9. 서식 (0) | 2026.05.25 |
| html 8. 스타일 (0) | 2026.05.25 |
| html 7. 단락, 줄바꿈 차이 <p></p> or <br> (0) | 2026.05.25 |
| html 6. 제목 (0) | 2026.05.25 |
