HTML 텍스트 서식
<b>- 굵은 텍스트 / 시각적 요소만 갖춤 / 잘 안씀
<strong>- 중요 텍스트 / 굵은 텍스트로 의미적인 강조를 나타냄
<i>- 기울임꼴 텍스트 / 시각적 요소만 갖춤 / 잘 안씀
<em>- 강조된 텍스트 / 의미적인 강조를 나타내어 중요성, 감정, 강조 등을 나타냄
<mark>- 표시된 텍스트
<small>- 더 작은 텍스트
<del>- 삭제된 텍스트
<ins>- 삽입된 텍스트
<sub>- 아래 첨자 텍스트
<sup>- 위첨자 텍스트
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is important!</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><small>This is some smaller text.</small></p>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>This text is bold
This text is important!
This text is italic
This text is emphasized
This is some smaller text.
Do not forget to buy milk today.
My favorite color is blue red.
My favorite color is blue red.
This is subscripted text.
This is superscripted text.
HTML 인용문 / 인용 요소
<abbr>
<abbr> 태그는 약어나 머리글자를 정의하는 데 사용됩니다.
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM"과 같은 약어 또는 약어를 정의,
전역 제목 속성을 사용하여 요소 위로 마우스를 가져갈 때 약어/두문자어에 대한 설명을 표시
약어의 확장 형태나 의미를 제공하는 데 도움이 될 수 있습니다.
<!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>The WHO was founded in 1948.
Marking up abbreviations can give useful information to browsers, translation systems and search-engines.
<address>
<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>The HTML address element defines contact information (author/owner) of a document or article.
Written by John Doe.Visit us at:
Example.com
Box 564, Disneyland
USA
<bdo>
<bdo> 태그는 텍스트의 방향성을 무시하고 재정의하는 데 사용됩니다.
주로 오른쪽에서 왼쪽 또는 왼쪽에서 오른쪽으로 텍스트를 표시하는 데 사용됩니다.
<!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>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):
This line will be written from right to left
<blockquote>
<blockquote> 태그는 다른 소스에서 인용된 내용을 정의하는 데 사용됩니다.
일반적으로 인용문이라는 것을 시각적으로 구분하기 위해 들여쓰기 등의 방식으로 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>
</body>
</html>Here is a quote from WWF's website:
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
<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>The HTML cite element defines the title of a work.
Browsers usually display cite elements in italic.
The Scream by Edvard Munch. Painted in 1893.
<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>Browsers usually insert quotation marks around the q element.
WWF's goal is to: Build a future where people live in harmony with nature.
출처 : https://www.w3schools.com/html/html_quotation_elements.asp
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - CSS (0) | 2023.07.12 |
|---|---|
| HTML 튜토리얼 - HTML Colors (0) | 2023.07.11 |
| HTML 튜토리얼 - HTML Styles (0) | 2023.06.23 |
| HTML 튜토리얼 - HTML Basic Examples (0) | 2023.06.22 |
| HTML 튜토리얼 - HTML 소개 (0) | 2023.06.22 |