Front-End-Web/html+css
제4강_HTML텍스트 요소
jsBae
2022. 10. 8. 00:09
이번 장에서는 HTML5에서 텍스트를 위한 태그들을 알아보도록 하자.
Text Formatting Tag
서식 요소는 다음과 같은 특수 유형의 텍스트를 표시하도록 설계되었습니다.
| tag | 설명 |
| <b> | 굵은 텍스트 |
| <strong> | 스트를 굵게 + 중요함 의미 |
| <i> | 텍스트를 이탤릭체로 출력 |
| <em> | 텍스트를 이탤릭체 + 중요함 의미 |
| <small> | 텍스트 폰트 크기를 작게 |
| <sub> |
아래첨자 텍스트 |
| <sup> |
위첨자 텍스트 |
| <ins> |
삽입된 텍스트에 밑줄을 긋는다. |
| <del> |
텍스트에 취소선을 긋는다. |
| <mark> |
텍스트에 형광펜처럼 강조표시 |
HTML <b> 및 <strong> 요소
<b>This text is bold</b>HTML <strong>요소는 매우 중요한 텍스트를 정의합니다. 내부 콘텐츠는 일반적으로 굵게 표시됩니다.
<strong>This text is important!</strong>HTML <i> 및 <em> 요소
- HTML <i>요소는 대체 음성 또는 분위기에서 텍스트의 일부를 정의합니다. 내부 콘텐츠는 일반적으로 기울임꼴로 표시됩니다.
- 팁: 태그 <i>는 종종 기술 용어, 다른 언어의 문구, 생각, 선박 이름 등을 나타내는 데 사용됩니다.
<i>This text is italic</i>- HTML <em>요소는 강조된 텍스트를 정의합니다. 내부 콘텐츠는 일반적으로 기울임꼴로 표시됩니다.
- 팁: 스크린 리더는 <em> 강세를 사용하여 in을 강조하여 단어를 발음합니다.
<em>This text is emphasized</em>HTML <small> 요소
- HTML <small>요소는 더 작은 텍스트를 정의합니다.
<small>This is some smaller text.</small>HTML <mark> 요소
- HTML <mark>요소는 표시하거나 강조 표시해야 하는 텍스트를 정의합니다.
<p>Do not forget to buy <mark>milk</mark> today.</p>HTML <del> 요소
HTML <del>요소는 문서에서 삭제된 텍스트를 정의합니다. 브라우저는 일반적으로 삭제된 텍스트에 줄을 긋습니다.
<p>My favorite color is <del>blue</del> red.</p>HTML <ins> 요소
HTML <ins>요소는 문서에 삽입된 텍스트를 정의합니다. 브라우저는 일반적으로 삽입된 텍스트에 밑줄을 긋습니다.
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>HTML <sub> 요소 / <sup>
HTML <sub>요소는 아래 첨자 텍스트를 정의합니다. 아래 첨자 텍스트는 일반 줄 아래 반 문자로 나타나며 때로는 더 작은 글꼴로 렌더링됩니다. 아래 첨자 텍스트는 H 2 O 와 같은 화학식에 사용할 수 있습니다 .
<p>This is <sub>subscripted</sub> text.</p>HTML <sup>요소는 위 첨자 텍스트를 정의합니다. 위 첨자 텍스트는 일반 줄 위의 문자 반으로 나타나며 때로는 더 작은 글꼴로 렌더링됩니다. 위 첨자 텍스트는 WWW [1] 와 같은 각주에 사용할 수 있습니다 .
<p>This is <sup>superscripted</sup> text.</p>HTML <abbr> Tag
<abbr></abbr> Tag는 abbreviation의 약자이며, 밑줄이 그어진 축약 텍스트에 마우스를 올리면 축약텍스트의 뜻이 말풍선처럼 표시한다.
<abbr title="Hyper Text Markup Language">HTML</abbr> &<abbr title="Cascading Style Sheets"> CSS</abbr>
HTML Comment Tag - 주석처리
Comment(주석)은 브라우저에 보여지는 것이 아니라 작성자가 어떠한 기능을 하는 코드라고 표시하거나 사람에게 알리는 기능을 한다.
<!-- 여기부터 제목부분 입니다 -->
<h1>HTML5 & CSS3</h1>HTML 연습
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>ch04_1</title>
</head>
<body>
<h1>웹 접근성</h1>
<h2>제주 이색 여행지 - 이중섭 거리</h2>
<p><strong>주말</strong>마다 <b>'서귀포문화예술디자인시장'</b>이 열립니다.</p>
<p><small>텍스트의 크기가 작아지게 하는 tag</small></p>
<p><em>'아트마켓'</em>이라고도 부르는데, <i>문화예술체험</i>이나 <i>공연관람</i>을 할 수도 있고 <br>
작가들이 직접 만든 창작예술품 등을 판매하기도 합니다.</p>
<p><b>웹의 창시자인</b> <strong>팀 버너스 리</strong> (Tim Berners-Lee)의
<q cite="http://www.w3.org/standards/webdesign/accessibility"> 웹의 힘은 보편성에 있다. <br>
장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.</q>라는 말로 <mark>웹 접근성</mark>을 설명한다. </p>
<p>
매년 12월 25일은 <del>어린이날</del> <ins>크리스마스</ins> 입니다.</p>
<p>
sup: super subscript<sup>1)<sup>
sub: subscript<sub>서브스크립트</sub>
</P>
</body>
</html>
728x90
반응형