[HTML] HTML 기본 태그 정리

📝 본문 소제목 태그

<h1></h1> ~ <h6></h6> 까지 6단계의 소제목을 표현한다.

📢 예시

<h1>h1 소제목</h1>
<h2>h2 소제목</h2>
<h3>h3 소제목</h3>
<h4>h4 소제목</h4>
<h5>h5 소제목</h5>
<h6>h6 소제목</h6>

🔊 결과

h1 소제목

h2 소제목

h3 소제목

h4 소제목

h5 소제목

h6 소제목

---

📝 단락 태그

<p> : paragraph의 p로 표현, 단락 태그가 끝나면 자동으로 개행된다.

📢 예시

<p>paragraph p Tag 입니다.</p>
<p>자동으로 개행이 됩니다.</p>

🔊 결과

paragraph p Tag 입니다.

자동으로 개행이 됩니다.

---

📝 텍스트 구분 태그 몇 가지

<i> : 텍스트에서 어떤 이유로 주위와 구분해야하는 부분을 나타낸다.
<em> : 텍스트 강세를 나타낸다. <em> 중첩하면 더 큰 강세를 뜻한다.

📢 예시

<p>Get out of bed <em>now</em>!</p>
<p>We <em>had</em> to do something about it.</p>
<p>This is <em>not</em> a drill!</p>

<p>I looked at it and thought <i>This can't be real!</i></p>

🔊 결과

Get out of bed now!

We had to do something about it.

This is not a drill!

I looked at it and thought This can't be real!

---

📝 구분선 태그 & 줄 바꿈 태그

<hr> : 수평선을 삽입 할 수 있는 태그, 종료태그(/)가 없어도 된다.
<br> : 줄바꿈을 삽입 할 수 있는 태그, 종료태그가 없어도 된다.

<hr>
<br>

🔊 결과

---

사이에 <br> 태그로 공백 넣은 것입니다. 

---

---

📝 목록 태그

<ul> : 순서 없는 목록 (unordered list)
<ol> : 순서 있는 목록 (ordered list)
<dl> : 정의 목록 (definition list)
<li> : 위에 큰 3가지 목록 스타일 안에 각각의 list 행

📢 예시

<ul>
  <li>ul 리스트 li 1</li>
  <li>ul 리스트 li 2</li>
</ul>
<ol>
  <li>ol 리스트 li 1</li>
  <li>ol 리스트 li 2</li>
</ol>
<ul>
  <li>dl 리스트 li 1</li>
  <li>dl 리스트 li 2</li>
</ul>

🔊 결과

• ul 리스트 li 1
• ul 리스트 li 2

1. ol 리스트 li 1
2. ol 리스트 li 2

• dl 리스트 li 1
• dl 리스트 li 2

---

📝 컨데이너 태그

<div> : 아무의미 없는 태그, 어떤 컨텐츠들끼리 목적에 따라 묶어야 할 때 사용한다. ( 줄바꿈 O = block 요소 )

<span> : 아무런의미 없는 태그, <div>와 같이, 어떤 목적에 따라 묶어야 할 때 사용한다. ( 줄바꿈 X = inline요소 )

📢 예시
<div>
... 컨텐츠1 ....
</div>

<div>
...컨텐츠2...
</div>

<p><span>Some text</span></p>

---

📝 테이블 태그

<table> : 테이블 컨테이너이며, 테이블의 시작과 끝에 삽입
<caption> : 테이블의 제목
<thead> : 테이블의 헤드 셀 그룹
<tbody> : 테이블의 데이터가 들어가는 셀 그룹
<tfoot> : 테이블의 바닥 셀 그룹

<tr> : 행 그룹, td와 th를 포함
<th> : 제목 셀
<td> : 데이터 셀

📢 예시

<table><caption>테이블 제목</caption>
  <thead>
    <tr>
      <th>thead 제목 셀</th>
      <td>thead 데이터 셀1</td>
      <td>thead 데이터 셀2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>thead 제목 셀</th>
      <td>thead 데이터 셀1</td>
      <td>thead 데이터 셀2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>thead 제목 셀</th>
      <td>thead 데이터 셀1</td>
      <td>thead 데이터 셀2</td>
    </tr>
  </tfoot>
</table>

🔊 결과

테이블 제목

thead 제목 셀	thead 데이터 셀1	thead 데이터 셀2
tbody 제목 셀	tbody 데이터 셀1	tbody 데이터 셀2
tfoot 제목 셀	tfoot 데이터 셀1	tfoot 데이터 셀2

---

📝 하이퍼링크 태그

<a href="" target=""> : href 속성을 이용해 URL 또는 HTML페이지로 이동가능하다. 

target 옵션

_blank : 새 윈도우
_self : 현재 윈도우
_parent : 부모 윈도우
_top : 브라우저 윈도우

📢 예시

<a href="www.google.com" target="_blank">구글로 이동</a>

🔊 결과

구글로 이동

---

📝 이미지 태그

<img src="주소" alt="대체 텍스트">

📢 예시

<img src="www.dog-zzang.co.kr/dog_board_f5/photo/80738700dog14.jpg" alt="허스키사진">

🔊 결과

---

📝 인용문 태그

<blockquote> : 안쪽의 텍스트가 긴 인용문임을 나타낸다. 주로 들여쓰기를 한 것으로 그려진다. (외형 변형 가능)

📢 예시

<p>Words can be like X-rays, if you use them properly—they’ll go through anything.
You read and you’re pierced.</p>
</blockquote>

🔊 결과

Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.