[HTML] HTML 기본 태그 Heading & Paragraph
2022. 8. 27. 18:18ㆍProgramming/HTML
HTML 기본 태그
HTML의 학습을 진행하면서 알게 된 기본 태그들을 정리하려고 합니다.
이번에는 Head / Paragraph의 정리입니다.
Heading
Heading 태그는 h# 태그라고도 하며 #의 자리에 1 ~ 6까지의 숫자가 들어가면서 진행이 됩니다.
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
해당 경우를 보면 heading의 경우 번호가 낮아질수록 글자의 크기가 커지고 더 굵어진다는 것을 알 수 있다.
Paragraph
Paragraph의 약자이며, 문단을 설명하는 태그입니다.문단을 표현하는 태그에는 <p></p> 태그와 <pre></pre> 태그가 존재합니다.
- <p></p>
- 문단을 표현하는 태그
- enter / space / tab의 경우를 하나의 공백으로 취급
- 자동 줄 바꿈의 기능이 없음
- 해당 태그의 경우 해당 화면에 줄 바꿈의 기능 없이 글자를 쭉 이어서 보여준다
- <pre></pre>
- 문단을 표현하는 태그
- <p> 와 다르게 본인이 작성한 내용을 그대로 보여주는 태그이다.
- <br>
- <p> 태그를 사용할 때 해당 태그에서는 줄 바꿈이 보이지 않는다.
- 해당 태그를 사용하면 태그 뒤의 문장에서부터 줄 바꿈이 되어 진행이 된다
- <hr>
- horizontal rules를 의미
- 웹페이지에 수평선을 그려준다.
결과
<!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>Document</title>
</head>
<body>
<h1>
HTML 학습 시작. h1 태그 사용
</h1>
<p>
HTML의 학습을 위해 작성하게 된 basic 문서 파일입니다<br>
해당 문서는 현재 문단 태그와 띄어쓰기 태그를 사용했습니다.
</p>
<p>
h1 태그부터 먼저 설명하겠습니다.<br>
h 태그는 1에서 6까지의 단계를 가지고 있으며 해당 단계에 따라 굵기와 강조가 틀려집니다.<br>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</p>
<p>
다음은 문단을 설명하는 p 태그 입니다.<br>
paragraph의 약자로 하나의 문단을 만드는데 사용이 됩니다.<br>
또한 br의 태그는 줄바꿈을 자동으로 지원하지 않는 HTML에서 사용시 강제적으로 줄바꿈을 할 때 사용이 됩니다.<br>
<hr>
다음은 hr 태그, horizontal rules를 의미하며 웹페이지에 수평선을 그려줍니다.<br>
이 글의 앞에서 나온 수평선이 바로 hr 태그를 사용해서 생긴 결과값입니다.
</p>
<hr>
<pre>
다음 해당 태그는 pre 태그입니다. preformatted Text를 뜻하는 이 태그는
기존 p 태그과 br 태그의 사용이 아닌 작성 된 내용을 그대로 표현을 해주는 태그입니다.
즉 enter / tab / space를 하나의 공백으로 인식하는 것이 아닌 형태 그대로 출력하는 태그입니다
</pre>
<hr>
</body>
</html>해당 문서를 표현할 때 사용한 태그 및 코드
'Programming > HTML' 카테고리의 다른 글
| [HTML] HTML 기본구조 (0) | 2022.08.27 |
|---|