이번 글에서는 HTML 요소 <blockquote>, <q>, <abbr>, <address>, <cite> 그리고 <bdo>에 관련해서 살펴보자.
아래 그림과 같은 인용 문서를 작성해보자.
| <!DOCTYPE html> <html> <body> <p style="text-align:center">모바일 청첩장:</p> <blockquote cite="http://www.모바일청첩장.html"> 새로이 시작하는 작은 사랑이<br> 보다 크고 깊은 사랑이 되려고 합니다.<br> 함께 자리하여 축복해 주시면<br> 더 없는 기쁨이겠습니다. </blockquote> </body> </html> |
인용에 대한 HTML <blockquote>
HTML <blockquote> 요소는 다른 자료로부터 인용하는 부분을 정의한다.
브라우저는 일반적으로 <blockquote> 요소를 들여쓴다.
| <!DOCTYPE html> <html> <body> <p>산토끼 동요 가사:</p> <blockquote cite="http://www.naver.com"> 산토끼 토끼야 어디를 가느냐 깡총 깡총 뛰면서 어디를 가느냐 산 고개 고개를 나 혼자 넘어서 토실 토실 알밤을 주워서 올테야 산토끼 토끼야 어디를 가느냐 깡총 깡총 뛰면서 어디를 가느냐 산 고개 고개를 나 혼자 넘어서 토실 토실 알밤을 주워서 올테야 </blockquote> </body> </html> |
짧은 인용에 대한 HTML <q>
HTML <q> 태그는 짧은 따옴표를 정의한다.
브라우저는 일반적으로 따옴표 주위에 따옴표를 삽입한다.
| <!DOCTYPE html> <html> <body> <p>브라우저는 일반적으로 q 요소로 인용구를 삽입한다.</p> <p>필자의 생각: <q>HTML은 여러분의 삶을 세상과 연결합니다.</q></p> </body> </html> |
HTML <abbr> 요소
HTML <abbr> 태그는 "HTML", "CSS", "Mr", "Dr", "ASAP", "ATM"과 같은 약어 또는 약어를 정의한다.
약어를 표시하면 브라우저, 번역 시스템 및 검색 엔진에 유용한 정보를 제공할 수 있다.
팁: 요소 위에 마우스를 놓으면 글로벌 제목 속성을 사용하여 약어/비공식 용어에 대한 설명을 표시할 수 있다.
| <!DOCTYPE html> <html> <body> <p>The <abbr title="The Fédération internationale de football association">FIFA</abbr> was founded in 1904.</p> <p>약어를 표시하면 브라우저, 번역 시스템 및 검색 엔진에 유용한 정보를 제공할 수 있습니다.</p> </body> </html> |
HTML <address> 요소
HTML <주소> 태그는 문서 또는 문서의 작성자/소유자에 대한 연락처 정보를 정의한다.
연락처 정보는 이메일 주소, URL, 실제 주소, 전화 번호, 소셜 미디어 핸들 등이 될 수 있다.
<address> 요소의 텍스트는 일반적으로 기울임꼴로 렌더링되며 브라우저는 항상 <address> 요소 앞과 뒤에 줄 바꿈을 추가한다.
| <!DOCTYPE html> <html> <body> <p>HTML 주소 요소는 문서 또는 문서의 연락처 정보(작성자/소유자)를 정의합니다.</p> <address> 저자 : 날아라 HTML.<br> 방문 : <br> 날아라.com<br> 1234, 날아라구, 인터넷시<br> 대한민국 </address> </body> </html> |
HTML cite(Work Title)
HTML <cite> 태그는 창작물(예: 책, 시, 노래, 영화, 그림, 조각 등)의 제목을 정의한다.
참고: 사람의 이름은 작품의 제목이 아니다.
<cite> 요소의 텍스트는 일반적으로 기울임꼴로 렌더링된다.
| <!DOCTYPE html> <html> <body> <p>The HTML cite 요소.</p> <p>브라우저는 일반적으로 인용 요소를 기울임꼴로 표시합니다.</p> <img src="img_the_scream.jpg" width="220" height="277" alt="The Scream"> <p><cite>스크림</cite> by Edvard Munch. Painted in 1893.</p> </body> </html> |
HTML <bdo> (Bi-Directional Override)
BDO는 양방향 재정의 약자이다.
HTML <bdo> 태그는 현재 텍스트 방향을 재정의하는 데 사용한다.
| <!DOCTYPE html> <html> <body> <p>브라우저가 양방향 덮어쓰기(bdo)를 지원하는 경우 다음 행이 오른쪽에서 왼쪽(rtl)으로 작성됩니다:</p> <bdo dir="rtl">이 줄은 오른쪽에서 왼쪽으로 작성됩니다</bdo> </body> </html> |
마무리
| 태그 | 내용 |
| <abbr> | 약어 또는 약어를 정의한다 |
| <address> | 문서 작성자/소유자의 연락처 정보를 정의한다 |
| <bdo> | 텍스트 방향을 정의한다. |
| <blockquote> | 다른 소스에서 따옴표로 묶인 섹션을 정의한다 |
| <cite> | 작품 제목을 정의한다. |
| <q> | 짧은 인라인 따옴표를 정의한다 |
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 색상(HTML color) (0) | 2023.04.21 |
|---|---|
| HTML 주석(Comments) (0) | 2023.04.20 |
| HTML 글자 형식(HTML Text Formatting) (0) | 2023.04.17 |
| HTML 스타일(Styles) (0) | 2023.04.16 |
| HTML 단락(Paragraphs) (0) | 2023.04.15 |
댓글