Html 태그정리01
posted on 03 Jan 2024 under category html
| 종류 | 설명 | 기본형 |
|---|---|---|
| <hn> | 제목. <h1> ~ <h6>까지 사용가능. 숫자가 커질수록 글자 크기는 작아짐 | <hn>제목</hn> |
| <p> | 텍스트 단락. 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄 바꿈. | <p>내용</p> |
| <br> | 줄 바꿈. 텍스트 단락 중 원하는 위치에서 줄 바꿈. | <br>(단독사용) |
| <blockquote> | 내용 인용. 다른 내용보다 들여 쓰고 단락으로 표시 | <blockquote>인용문</blockquote> |
| <strong> | 중요한 텍스트를 굵게 표시, 화면 낭독기에서 강조해서 읽음. | <strong>굵게 강조할 텍스트</strong> |
| <b> | 중요하지는 않지만 굵게 표시함. | <b>굵게 표시할 텍스트</b> |
| <em> | 중요한 텍스트를 기울게 표시(문장), 화면 낭독기에서 강조해서 읽음. | <em>이탤릭체로 강조할 텍스트</em> |
| <i> | 중요하지는 않지만 기울게 표시(마음속의 생각이나 용어) | <i>이탤릭체로 표시할 텍스트</i> |
| <ins> | 내용을 편집할 때 추가한 내용을 표시 | <ins>새로운 내용 삽입</ins> |
| <del> | 내용을 편집할 때 삭제한 내용을 표시 | <del>삭제할 기존 내용</del> |
| <sup> | 위 첨자 | <sup>사용할 위 첨자</sup> |
| <sub> | 아래 첨자 | <sub>사용할 아래 첨자</sub> |
| 종류 | 설명 |
|---|---|
| <ol> | 순서 있는 목록의 시작과 끝을 나타냄 |
| <ul> | 순서 없는 목록의 시작과 끝을 나타냄 |
| <li> | 순서 있는 목록이나 순서 없는 목록의 각 항목을 나타냄 |
| <dl> | 설명 목록의 시작과 끝을 나타냄 |
| <dt> | 설명 목록의 이름(제목)을 나타냄 |
| <dd> | 설명 목록의 값(설명)을 나타냄 |
순서 있는 목록을 만드는 <ol>, <li> 태그
<ol>
<li>항목1</li>
<li>항목2</li>
</ol>
순서 없는 목록을 만드는 <ul>, <li> 태그
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
설명 목록을 만드는 <dl>, <dt>, <dd> 태그
<dl>
<dt>이름</dt>
<dd>값</dd>
</dl>
| 종류 | 설명 |
|---|---|
| <table> | 표를 나타냄 |
| <caption> | 표의 제목 |
| <tr> | 표의 행 |
| <td> | 표의 셀 |
| <th> | 제목 셀 |
| <thead> | 표 구조에서 제목 부분을 나타냄 |
| <tbody> | 표 구조에서 본문 부분을 나타냄 |
| <tfoot> | 표 구조에서 요약이나 정리 부분을 나타냄 |
| <col> | 표에서 열의 스타일을 지정 |
| <colgroup> | 표 구조에서 요약이나 정리 부분을 나타냄 |
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px">
</colgroup>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>갯수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>52,000원</td>
</tr>
<tr>
<td rowspan="2">가정용</td>
<td>3kg</td>
<td>11~16과</td>
<td>30,000원</td>
</tr>
<tr>
<td>5kg</td>
<td>18~26과</td>
<td>47,000원</td>
</tr>
</tbody>
</table>
| 종류 | 설명 | 기본형 |
|---|---|---|
| <object> | 멀티미디어, PDF 파일 등 다양한 형식의 파일 삽입 | <object width=”너비” height=”높이” data=”파일”></object> |
| <embed> | <audio>, <video>, 태그와 <object> 태그도 지원하지 않을 경우 멀티미디어 파일 삽입 | <embed src=”파일 경로” width=”너비” height=”높이”> |
| <img> | 이미지 파일 삽입 | <img src=”이미지 파일 경로” alt =”대체 텍스트”> |
| <audio> | 오디오 파일 삽입 | <audio src=”오디오 파일 경로”></audio> |
| <video> | 비디오 파일 삽입 | <video src=”비디오 파일 경로”></video> |
이미지 크기는 width와 height으로 조절 가능(1개 or 2개 모두)
오디오 파일 삽입 / 비디오 파일 삽입 (컨트롤 바 표시)
오디오 파일 BGM처럼 사용하기/ 비디오 파일 자동 재생하기 (컨트롤바 표시X)
링크 삽입