JunO3O
글자 태그
글자 태그
2023. 3. 21. 02:59ㆍHTML
글자 태그
# 제목과 본문 글자 태그
ㅁ 제목 글자 태그에서 h는 heading(제목)을 의미합니다.
ㅁ 본물 글자를 입력할 때는 p, br, hr 태그를 사용합니다.
ㅁ p 태그에서 p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평 줄)을 의미합니다.
| 태그 | 설명 | |
| 제목 글자 | h1 | 첫 번째로 큰 제목 글자 생성 |
| h2 | 두 번째로 큰 제목 글자 생성 | |
| h3 | 세 번째로 큰 제목 글자 생성 | |
| h4 | 네 번째로 큰 제목 글자 생성 | |
| h5 | 다섯 번쨰로 큰 제목 글자 생성 | |
| h6 | 여섯 번째로 큰 제목 글자 생성 | |
| 본문 글자 | p | 본문 문단 생성 |
| br | 줄 바꿈 | |
| hr | 수평 줄 삽입 | |
# 제목 글자 태그
ㅁ 제목 글자 태그에서는 h1이 가장 큰 제목 태그이고, h6이 가장 작은 제목 태그입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 제목 글자 태그 h </title>
</head>
<body>
<h1> 제목 글자 태그 h1 사용 </h1>
<h2> 제목 글자 태그 h2 사용 </h2>
<h3> 제목 글자 태그 h3 사용 </h3>
<h4> 제목 글자 태그 h4 사용 </h4>
<h5> 제목 글자 태그 h5 사용 </h5>
<h6> 제목 글자 태그 h6 사용 </h6>
</body>
</html>
# 본문 단락 구분
ㅁ p 태그를 사용하여 문단을 하나씩 만들어 구분할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 본문 단락 만들기 </title>
</head>
<body>
<h1> 제목은 h 태그를 이용합니다. </h1>
<p> 본문 단락을 구별할 때는 p 태그를 이용합니다. </p>
<p> p 태그를 사용하여 여러 개의 단락을 만들 수 있습니다. </p>
</body>
</html>
# 제목과 본문 태그의 활용
ㅁ 제목 태그와 본문 태그를 사용하면 간단한 문서를 만들 수 있습니다. 이때, br 태그는 다른 글자 태그 내부에 삽입할 수 있지만 hr 태그는 삽입할 수 없습니다. 물론 hr 태그가 다른 글자 태그 내부에 있어도 웹 브라우저가 유연하게 대처를 해주기 때문에 정상적으로 출력은 되지만 웹 표준에 어긋나는 행동입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 제목과 본문 태그의 활용 </title>
</head>
<body>
<h1> 동물 </h1>
<hr>
<h2> 정의 </h2>
<p> </p>
<br>
<h2> 생물계의 두 갈래 중, 식물에 대응하는 생물군이다.
유기물을 영양분으로 섭취하며, 소화나 배설 및 호흡기관이 분화되어 있다. </h2>
<h2> 분류 </h2>
<p> 동물계는 다음과 같은 특징들을 기준으로 하여 여러 문(門)으로 분류된다. ①몸이 단세포인가 아니면 다세포인가,
②발생상 이배엽성인가 아니면 삼배엽성인가, ③몸의 모양이 비대칭성인가, 방사대칭성인가 또는 좌우대칭성인가,
④몸 속에 체강이 있는가 없는가, 있는 경우에 그 성질은 어떤 것인가, ⑤참다운 소화관이 있는가 없는가,
⑥몸이 체절성을 나타내는가 아니면 비체절성인가, ⑦부속지가 있는가 없는가, 있는 경우에 부속지에 관절의 유무,
⑧골격이 있는가 없는가, 있는 경우에 화학적 성질은 어떠하며, 외골격인가 내골격인가, ⑨척색이 있는가 없는가,
⑩여러 기관계의 위치와 구조상의 특징은 어떠한가, ⑪유생의 모양과 구조는 어떠한가. </p>
<p> - 고양이 </p>
<p> - 강아지 </p>
<p> - 사슴 </p>
</body>
</html>
# 띄어씌기
ㅁ 공백을 사용하기 위해서는 를 입력합니다.
ㅁ 그 외에도 특수 문자를 사용하기 위해서는 아래의 코드를 입력합니다.
| 특수 문자 | 출력문자 |
| | 공백 |
| < | < |
| > | > |
| & | & |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 특수문자 사용</title>
</head>
<body>
<h1> 공백이 있는 글자 </h1>
<h1> 공백이 있는 글자 </h1>
</body>
</html>
