TIL/Web(HTML, CSS, JS, jQuery)

[SIST] Web_HTML_days02_HTML 텍스트 서식

야리니 2022. 5. 12. 22:38
728x90
반응형

1. <b></b> 태그

- 중요성 강조 X

- [b]old 굵은 텍스트

 

2. <strong></strong> 태그

- 중요성 강조 O, 굵은 텍스트 = 즉, 중요해서 강조하는 의미가 숨겨져있다.

- style 태그에서 스타일을 줄 수 있음

 

3. <i></i> 태그

- 중요성 강조 X

- [i]talic 기울어진 텍스트

 

4. <em></em> 태그

- 중요성 강조하기 위해 사용하는 태그이며, 기울임꼴 텍스트로 보인다. = 즉, 중요해서 강조하는 의미가 숨겨져있다.
- style 태그에서 스타일을 줄 수 있음

 

5. <mark></mark> 태그

- <mark>가 표시된 텍스트는 노란색 배경색을 가짐

 

6. <small></small> 태그

- 더 작게 보이는 텍스트

 

7. <del></del> 태그

- 문서에서 삭제된 텍스트를 정의할 때 사용

- 가운데 취소선 한 줄

 

8. <ins></ins> 태그

- 문서에 새로 추가된(삽입된) 텍스트 정의(밑줄)

 

9. <sub></sub>와 <sup></sup> 태그

- H2O를 표시할 때 2를 아래로 작게 보이게 할 때 <sub> 태그 사용

- 2^3을 표시할 때 3을 위로 작게 보이게할 때 <sup> 태그 사용

 

[ 코딩 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	strong{
		color: red;
		border:1px dotted gray;
	}
</style>
</head>
<body>
<h3>html 텍스트 서식</h3>

<!--
	<b> Displays contained text as bold 
	중요성 강조 X, 굵은 텍스트
-->
1. 안녕하세요. <b>홍길동</b>입니다.<br>

<!--
	<strong> Displays text as strongly emphasized (generally bold)
	중요성 강조 O, 굵은 텍스트 = 즉, 중요해서 강조하는 의미가 숨겨져있다.
	style 태그에서 스타일을 줄 수 있음
-->
2. 안녕하세요. <strong>홍길동</strong>입니다.<br>

<!--
	<em> Displays text [em]phasized (generally italicized)
	중요성 강조하기 위해 사용하는 태그이며, 기울임꼴 텍스트로 보인다.
	즉, 중요해서 강조하는 의미가 숨겨져있다.
	style 태그에서 스타일을 줄 수 있음
-->
3. 안녕하세요. <em>홍길동</em>입니다.<br>

<!-- <i> [i]talic 기울어진 텍스트 -->
4. 안녕하세요. <i>홍길동</i>입니다.<br>

<!-- <mark> 표시된 텍스트는 노란색 배경색을 가짐 -->
5. 안녕하세요. <mark>홍길동</mark>입니다.<br>

<!-- <small> 더 작게 보이는 텍스트 -->
6. 안녕하세요. <small>홍길동</small>입니다.<br>

<!--
	<del> Displays text as deleted
	문서에서 삭제된 텍스트 정의(가운데 취소선 한 줄)
-->
7. 안녕하세요. <del>홍길동</del>입니다.<br>

<!--
	<ins> inserted text
	문서에 새로 추가된(삽입된) 텍스트 정의(밑줄)
-->
8. 안녕하세요. <ins>홍길동</ins>입니다.<br>

<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>

<h3>sub, sup 태그 설명</h3>
물 = H<sub>2</sub>sub>O<br>
2^<sup>3</sup> = 2<br>

</body>
</html>

 

< 결과 >

728x90
반응형