- 웹 페이지에 다양한 내용을 담을수 있는
자주 사용되는 태그들에 대해 알아본다.
기본이 되는 제목과 본문, 단락과 줄바꿈 등의 태그 알아보기
<hn>
제목 </hn>
heading을 줄임말, n의 자리에는 1(가장 큰 제목)~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다.
<p>
텍스트 단락 </p>
텍스트 앞,뒤로 빈줄이 생기면서 텍스트 단락이 만들어진다.
<br>
줄바꿈
줄바꿈, 단독으로 사용하므로 닫는 태그가 필요없다.
<blockquote>
내용 인용 </blockquote>
다른 사람의 말이나 책의 내용을 인용할 때 흔히 큰 따옴표("")를 대신하여 사용
<strong>
굵게 강조할 텍스트 </strong>
경고나 주의 사항처럼 중요한 내용을 강조할 때 사용
<b>
굵게 표시할 텍스트 </b>
단순히 글자만 굵게 표시할 때 사용
<em>
이탤릭체로 강조할 텍스트</em>
emphasis의 줄임말, 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용한다.
<i>
이탤릭체로 표시할 텍스트</i>
생각이나 용어, 관용구 등에 사용한다.
<ins>
내용을 편집할 때 추가한 내용을 표시 </ins>
<del>
내용을 편집할 때 삭제한 내용을 표시 </del>
<ol>
순서 있는 목록을 만들때 </ol>
<li>
순서 있는 목록의 각 항목을 만들때 </li>
<ol>
ordered list의 줄임말, 어떤 과정을 순서대로 설명할 때 사용한다.
기본적으로 숫자가 자동으로 넘버링됨.
<ol>
태그의 속성값 (ex.<ol type="a">
</ol>
) <ul>
순서 없는 목록을 만들때 </ul>
<li>
순서 없는 목록의 각 항목을 만들때 </li>
<ul>
unordered list의 줄임말, 항목의 순서가 중요하지 않을 때 사용한다.
항목 앞에 작은 원인 블릿(∙)표기됨.
<dl>
설명 목록 </dl>
<dt>
설명 목록의 이름(제목)부분을 지정 </dt>
<dd>
설명 목록의 값(설명)부분을 지정 </dd>
<dl>
<dt>이름(제목)</dt>
<dd>값(설명)</dd>
</dl>
표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어진다.
셀(cell)은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미한다.
<table>
표의 시작과 끝을 알려주는 </table>
<caption>
표의 제목(표 위쪽 중앙에 표시됨) </caption>
<table>
<caption>표 제목</caption>
</table>
<tr>
표의 행을 만드는 </tr>
<td>
행 안에 있는 셀을 만드는 </td>
<table>
<tr>
<td>1행 2열</td>
<td>1행 2열</td>
</tr>
</table>
<th>
태그 사용 <thead>
표의 구조(제목)를 지정하는 </thead>
<tbody>
표의 구조(본문)를 지정하는 </tbody>
<tfoot>
표의 구조(요약)를 지정하는 </tfoot>
<rowspan>
표의 행을 합치는 </rowspan>
<colspan>
표의 열을 합치는 </colspan>
<td>
태그나 <th>
태그에서 이루어진다. <col>
표의 열(1개만)을 묶어주는 </col>
<colgroup>
표의 열(2개 이상)을 묶어주는 </colgroup>
<colgroup>
<col>
</colgroup>
<colgroup>
, <col>
태그는 반드시 <caption>
태그 다음에 사용해야 한다.<col>
태그를 사용할 때는 <colgroup>
태그 안에 <col>
태그를 포함해 표 전체 열의 개수만큼 <col>
태그를 넣어야 한다. <img>
이미지 표시 </img>
<img src="강아지 이미지.jpg" alt="강아지">
<object>
오디오, 비디오, 자바애플릿, PDF 등 멀티미디어 표시 </object>
<object width="너비" height="높이" data="파일"></object>
<embed>
오디오, 비디오, 이미지 등 다양한 멀티미디어 표시
<embed src="파일 경로" width="너비" height="높이">
닫는 태그가 없다.
HTML초기 버전부터 사용해 <audio>,<video>,<object>
태그를 지원하지 않는 웹브라우저를 고려해야 한다면 <embed>
태그를 사용한다.
멀티미디어 파일 종류
비디오(확장자: mp4, webm)
오디어(확장자: mp3, mp4, m4a)
<audio>
오디오 표시</audio>
<video>
오디오 표시</video>
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
<audio><video>
태그의 속성<video>
태그에서 사용되는 속성으로 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정한다.<audio src="오디오 파일 경로" controls></audio>
<video src="비디오 파일 경로" controls width=100%></video>
<video src="비디오 파일 경로" width=100% muted autoplay loop></video>
<a>
링크를 삽입한다 </a>
웹 사이트에서 링크의 기능은 가장 많이 사용되며, 텍스트를 사용하면 텍스트 링크가 되고, 이미지를 사용하면 이미지 링크가 된다.
<a href="링크할 주소"> 텍스트 또는 이미지 </a>
<p><a href="링크할 주소" target="_blank"> 텍스트 또는 이미지 </a></p>
<p><a href="링크할 주소" target="_blank" title="naver.com"> 텍스트 또는 이미지 </a></p>
header
section
footer
article
nav
div
aside
span
main
form
...a
video
button
audio
input
map
label
canvas
img
table
...[참조 링크 1]
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
[참조 링크 2]
https://validator.w3.org/#validate_by_input
🙂 태그 정리를 해놓으니 머릿속이 정리가 조금은 되는것 같다. 오..좋은것 !