html 기본 문서 만들기 2 - h 태그로 문단의 제목(장, 절, 소제목, etc...) 달기
네 안녕하세요, 이번 포스팅에서는 페이지 내에 뜨는 화면에 제목을 붙이는 방법을 알아보도록 하겠습니다.
전체 페이지의 기본 폰트를 조절해서 구분감을 주는 요소입니다.
그럼 시작하도록 하겠습니다.
1. 문단의 제목(장, 절, 소제목 등) 달기 : h1 ~ h6 태그 이용
이번에는 문단의 제목을 다는 방법에 대하여 볼 겁니다.
우리가 일반적으로 문서 등을 작성하게 되면 장이나 절마다 소제목을 붙여서 표시를 하죠?
html 태그에서는 이 소제목을 사이즈에 따라서 체계회 할 수 있게 하는 태그를 지원을 해줍니다.
바로 <h> 태그를 이용을 하는데, 그냥 <h>만 쓰는 게 아니라 <h1>과 같이 숫자를 써서 나타냅니다.
이렇게 <h6>까지 만들 수 있는데요, 이 숫자가 커질수록 글자의 크기는 작아집니다.
그래서 대단원 같은 걸 쓸 때는 <h1>과 같은 태그를 이용을 하고,
장별 소제목을 쓸 때는 <h5> 같이 작은 글씨를 활용하곤 합니다.
그럼 간단한 예제 코드와 함께 같이 볼까요?
<!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>1장 홈페이지 만들기</h1>
<h2>1절 HTML 언어</h2>
<h3>1. 웹</h3>
<h4>1.1 인터넷</h4>
<h5>1.1.1 네트워크</h5>
<h6>1.1.1.1. 통신</h6>
</body>
</html>
코드를 보시면 <h1> 태그부터 <h6> 태그까지 적혀 있는 것을 볼 수 있습니다.
이 숫자가 커질수록 출력되는 문구의 사이즈는 계속 줄어듭니다.
그럼 결과 화면을 통해서 같이 보실까요?
이런 식으로 h1 태그에 대응이 되는 글이 가장 크고, 숫자가 늘어날수록 그 크기가 점점 작아지고,
h6 태그에 대응이 되는 글의 크기가 가장 작은 걸 볼 수 있습니다.
그래서 이걸 알고 있으면 문서를 작성을 할 때 좀 더 체계적으로 글을 쓸 수 있게됩니다.
여기까지 문단의 제목을 넣는 방법에 대하여 알아보았습니다.
다음 포스팅에서는 툴팁을 다는 방법에 대하여 알아보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사드립니다~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 기본 문서 만들기 5 - hr 태그로 수평선 긋기 (0) | 2023.03.01 |
|---|---|
| html 기본 문서 만들기 4 - p 태그로 문단 나누기 (0) | 2023.02.28 |
| html 기본 문서 만들기 3 - title 속성으로 툴팁 달기 (0) | 2023.02.28 |
| html 기본 문서 만들기 1 - title 태그로 페이지 타이틀 만들기 (0) | 2023.02.28 |
| html의 기본 개념 알아보기 (0) | 2023.02.28 |
댓글