오늘은 HTML에서 많이 사용하는 제목 태그인
<h1> ~ <h6>에 대해서 알아보겠습니다.
제목 태그
| 태그 | 비고 |
| <h1> ~ <h6> | 기본모양은 굵은 모양에 숫자가 높을 수록 작은 숫자 -- [제목] |
| <img> | 이미지를 삽입하는 태그 |
| <p> | 문단 만드는 태그 |
| <br> | 줄바꿈을 하는 태그 |
위에서 나와있는 간단한 태그들을 이용해서
코드를 작성해보겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>1. One 이것은 h1 의 크기</h1>
<h2>2. Two 이것은 h2 의 크기</h2>
<h3>3. Three 이것은 h3 의 크기</h3>
<h4>4. Four 이것은 h4 의 크기</h4></p>
<h5>5. Five 이것은 h5 의 크기</h5>
<h6>6. Six 이것은 h6 의 크기</h6>
<img src = "html.jpg" width = "40%" >
<h3><p>HTML or hypertext markup language (HyperText Markup Language,<br>
Culture Language : Language that marks the beginning of a sentence,<br>
language that marks the body of a hyperText) is the dominant markup language for web pages.</p></h3>
<p>HTML not only represents the architectural meaning of text such as title, paragraph, list,<br>
and so on, but also provides a way to create structural documents with links, citations, and other items.<br>
It can then be used to embed images and objects and create interactive forms.</p>
</body>
</html>
|
cs |
위의 코드를 보시면 다른 거는 다 실행이 가능할 텐데,
<img src = "html.jpg" width = "40%" >의 경우
해당 이미지 파일이 있어야 실행이 가능합니다.
만약 이미지 파일이 없을 경우 X박스가 나오게 됩니다.
위의 코드를 실행하면!?
위에서부터 제목 태그인 <h1>을 사용해서
각 크기를 비교했고,
중간에 이미지 태그를 삽입하고 크기를 조절했습니다.
참고로 이미지 태그는 높이와 너비 둘 다 조절이 가능합니다.
그리고 중간에 문단을 나누는 태그인 <p> 태그를
사용해서 문단을 두 개로 나누었고, 문단에도 <h3> 태그를
사용했습니다.
줄 바꿈의 경우는 <br> 태그를 사용하면
간단하게 줄 바꿈이 가능합니다.
그럼 여기까지 html <HTML>
제목 태그 h1, h2, h3, h4, h5, h6 사용법이었습니다.
--- 끝 ---
'New Programming > HTML' 카테고리의 다른 글
| <HTML> 색상(Color) 태그 사용법 (0) | 2020.07.25 |
|---|---|
| <HTML> 이미지(img) 태그 사용법 및 속성 정리 (0) | 2020.07.24 |
| <HTML> 테이블(table) 사용법 정리 (table,th,tr,td,thead,caption) (0) | 2020.07.22 |
