![[HTML & CSS] HTML 기본태그](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FctIjT3%2FbtrLFzvyIXj%2Fzzd8GzHn27D23MaKnsmJCK%2Fimg.png)
1. empty tag
태그의 구조는 시작태그와 컨텐츠 그리고 종료태그가 있다고 했습니다.
하지만 시작태그만 존재하고 컨텐츠와 종료태그가 없는 태그가 있습니다.
그런 태그를 empty tag라고 부릅니다.
대표적으로 <br> 태그가 있습니다.
2. 중첩 tag
중첩이란 겹치거나 포개어짐을 의미합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title>중첩 TAG</title>
<meta charset="UTF-8">
</head>
<body>
<h1>제목입니다.</h1>
<p>문단입니다</p>
</body>
</html>
<html> 태그는 <head>와 <body>를 중첩
<head> 태그는 <title>과 <meta>를 중첩
<body> 태그는 <h1> 와 <p>를 중첩
잘못된 예시)
<!DOCTYPE HTML>
<html>
<head>
<title>중첩 TAG</title>
<meta charset="UTF-8">
</head>
<body>
<h1>제목입니다.
<p><h1>
1 문단입니다.
</p>
</body>
</html>
중첩을 할거면 시작태그와 종료태그를 확실히 해야합니다.
종료태그가 오기전 새로운 시작태그가 올 수 없습니다.
3. HTML 헤딩
<h#> ~ </h#> : heading의 약자로 하나의 제목을 만들떄 사용합니다.
<h1>부터 <h6>까지 존재합니다.
<h1>이 가장 크고 굵은 글자가 되고 <h6>는 가장 작은 글자가 됩니다.
4. Paragraphs
<p>~</p> : paragraphs 문단의 약자로, 하나의 문단을 만들때 사용합니다.
- 문단은 항상 새로운 줄에서 시작하며, 블록모양의 형태를 가집니다.
- <p>~</p>를 기준으로 앞뒤의 여분의 공백을 가집니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Paragraphs </title>
<meta charset="UTF-8">
</head>
<body>
<p> 새로운 문단 추가 1 </p>
<p> 또 새로운 문단 추가 2 </p>
<p> 마지막 새로운 문단 추가 3 </p>
</body>
</html>
결과)
5. Line Break
<br> 태그는 Break를 뜻하며, HTML은 엔터를 쳐도 줄 바꿈이 일어나지 않고 연속적인 텍스트가 나오게 됩니다. 그래서 줄바꿈을 하고 싶을때, <br> 태그를 사용합니다.
<br> 태그는 empty 태그입니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Break Line </title>
<meta charset="UTF-8">
</head>
<body>
first Line <br>
second
Line
<br>
third Line
<br>
</body>
</html>
결과)
소스코드에서는 second 이후 줄바꿈 뒤 Line을 입력했는데 브라우저에서는 바뀌지 않은 모습입니다.
6. horizontal tag
<hr> 태그는 Horizontal Rules를 의미하며 empty 태그입니다. 웹 페이지에 수평선을 그어주는 역할을 합니다. 주로 문단을 의미적으로 분리하고자 할때 사용합니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> Horizontal Tag </title>
<meta charset="UTF-8">
</head>
<body>
<h1> horizontal 태그 사용 전 </h1>
<hr>
<h1> horizontal 태그 사용 후 </h1>
</body>
</html>
결과)
7. preformatted Text
<pre>~</pre> 태그는 prefomatted Text를 의미합니다. <pre> 태그로 감싼 문장은 입력한 형태 그대로를 웹 페이지에 표현이 가능합니다.
엔터 키를 눌러도 브라우저에서는 반영이 되지 않아 <br> 태그를 사용해야 했지만 <pre> 태그를 사용하면 그럴 필요가 없어집니다.
예시)
<!DOCTYPE HTML>
<html>
<head>
<title> preformatted Text </title>
<meta charset="UTF-8">
</head>
<body>
<h1> pre 태그 </h1>
<pre>
HTML 소스코드에서 입력한 엔터(enter)키, 스페이스(space)바 모두 그대로 출력됩니다.
탭 : HTML & CSS
엔터 : HTML
&
CSS
스페이스 바 : HTML & CSS
</pre>
</body>
</html>
결과)
'[WEB] > [HTML & CSS]' 카테고리의 다른 글
| [HTML & CSS] HTML 기본태그 4 - <img>, <list>, <table> (0) | 2022.09.09 |
|---|---|
| [HTML & CSS] HTML 기본태그 3 - <q>, <abbr>, <Link> (0) | 2022.09.08 |
| [HTML & CSS] HTML 기본태그 2 (0) | 2022.09.08 |
| [HTML & CSS] HTML 기본 구조와 구성 요소 (0) | 2022.09.08 |
| [HTML & CSS] HTML 주석 태그 <!-- --> (0) | 2022.09.08 |