[2021.07.26] 인턴 +147 HTML5 Quotation and Elements(인용 및 요소들) - 4
해당 게시글은 HTML 인용에 대해서 알아 보도록 하자.
들여쓰기 인용문
<blockquote></blockquote>
-> 해당 <blockquote> 은 아래의 결과 값을 보면 알듯이 들여쓰기 효과이다.
<!DOCTYPE html>
<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote>
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
</html>
<실행 결과>
-----------------------------------------------------------------------------------------------------------------------------------
짧은 인용문("")
<q></q>
-> 해당 <q>은 문장에 ""를 추가하는 것과 같다
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
<실행 결과>
-----------------------------------------------------------------------------------------------------------------------------------
약어(축약)
<abbr title = "???"> </abbr>
-> 해당 <abbr>은 마우스 커서에 가져다 대면, 축약되기전의 텍스트(text)가 보여진다.
* <abbr title ="text">문장에 ""를 추가하는 것과 같다
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
</body>
</html>
<실행 결과>
-----------------------------------------------------------------------------------------------------------------------------------
연락처 정보를 담는 요소
<address></address>
* 연락처 정보는 이메일 주소, URL, 실제 주소, 전화번호, SNS
* 텍스트는 일반적으로 기울임꼴 이며, 또한 <address>요소 앞뒤에 줄 바꿈을 추가
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
* 줄 바꿈 문자 <br>
<실행 결과>
-----------------------------------------------------------------------------------------------------------------------------------
작품 제목을 정의
<cite></cite>
* 창작물(예: 노래, 영화, 그림, 조각 등)의 제목을 정의
* 텍스트는 일반적으로 기울임꼴
<!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body>
</html>
<실행 결과>
-----------------------------------------------------------------------------------------------------------------------------------
해당 text를 거꾸로 뒤집어서 출력 (양방향)
<bdo dir="???"></bbo>
<!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
</body>
</html>-> <bbo dir="rtl">
-> 이것에 대한 의미를 몰라서 검색해보니 아래와 같이 사용된다
<실행 결과>
'Web' 카테고리의 다른 글
| [2021.07.27] 인턴 +148 HTML Styles(CSS) - 6 (0) | 2021.07.27 |
|---|---|
| [2021.07.26] 인턴 +147 HTML Comment Tags & HTML Colors(Colors, RGB, HEX, HSL) - 5 (0) | 2021.07.26 |
| [2021.07.26] 인턴 +147 HTML5 HTML Text Formatting -3 (0) | 2021.07.26 |
| [2021.07.26] 인턴 +147 HTML5 스타일 문법 (HTML5 Style Grammar) - 2 (0) | 2021.07.26 |
| [2021.07.26] 인턴 +147 HTML5 문법 및 기초 코드 작성 -1 (0) | 2021.07.26 |
댓글