🔍h태그
<h> : 글씨 크기를 조절하며, 1~6까지 존재한다. 다음줄로 자동으로 넘어간다.
✍️예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>문서의 주제목</h1>
<h2>문서의 주제목 또는 부제목</h2>
<h3>문서의 부제목 또는 내용</h3>
<h4>문서의 내용</h4>
<h5>문서의 내용</h5>
<h6>문서의 내용</h6>
</body>
</html>즉, 한 줄을 차지하는 블록 방식이다.
🔍font태그
<font> : 속성은 size가 있고, 크기가 1~7까지 존재한다.
✍️예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<font size = "7"> 글자크기 7</font>
<font size = "6">글자크기 6</font>
<font size = "5"> 글자크기 5</font>
<font size = "4"> 글자크기 4</font>
<font size = "3"> 글자크기 3</font>
<font size = "2"> 글자크기 2</font>
<font size = "1"> 글자크기 1</font>
</body>
</html>다음줄로 넘어가지 않고, 한줄로 이어서 출력된다.
즉, 글자가 들어간 크기만큼만 사이즈를 지정하는 인라인 방식이다.
font 속성값
<font face = "글씨체">
<font color = "색상">
✍️예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<font size = "7"> 글자크기 7</font>
<font size = "6" face ="궁서체" color = 'blue'>글자크기 6</font>
<font size = "5"> 글자크기 5</font>
<font size = "4"> 글자크기 4</font>
<font size = "3"> 글자크기 3</font>
<font size = "2"> 글자크기 2</font>
<font size = "1"> 글자크기 1</font>
</body>
</html>
👉정리
h 태그 vs font 태그
글씨 크기를 조정하지만, 동작 방식(인라인, 블록방식)이 다르다
<h> : 바로 다음 줄로 이동한다. 블록 방식으로 한줄을 해당하는 태그에대한 자리를 모두 차지한다.
<font> : 옆으로 이어써진다. 인라인 방식으로 글자가 들어간 만큼만 사이즈를 갖는다.
꾸준히 성장하는 개발자