프론트엔드 입문 가이드/HTML 기초
[HTML 기초] 4. HTML 태그 - 멀티미디어, 표 관련 태그 (img, video, audio, table, thead, tbody, tr, th, td, caption)
반응형
1. 멀티미디어 관련 태그
이미지와 비디오 태그를 보면, 열린 태그와 닫힌 태그 두 개로 이루어지지 않고 하나의 태그로 이루어진 것을 볼 수 있습니다. 이렇게 하나의 태그만 가지고도 사용할 수 있는 것들이 있습니다. 주로 열린 태그와 닫힌 태그 사이에 아무런 내용이 없을 경우 하나의 태그로 해결합니다.
이미지 - image
<img>- 속성 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/img#%ED%8A%B9%EC%84%B1
src: 이미지의 경로 지정 (필수)alt: 이미지에 대한 설명, 이미지를 표시할 수 없는 경우 보여지는 값 (선택)
<body>
<img src="./media/icon.png" alt="my icon" />
<img
src="https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdXB3azYxODk3OTY4LXdpa2ltZWRpYS1pbWFnZS1qb2I1NzItMS5qcGc.jpg?s=S0jPQdDYDwYtN5IWmySMlUTKJr1Yyb1tEUubjwhTnVg"
alt="galaxy"
/>
</body>
비디오 - video
<video>- 속성 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video#attributes
src: 비디오의 경로 지정 (필수)type:video/mp4,video/webm,video/ogg중 선택 (선택)
<body>
<video src="./media/coding.mp4" autoplay controls />
</body>
오디오 - audio
<audio>- 속성 참고: https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio#%ED%8A%B9%EC%84%B1
src: 오디오의 경로 지정 (필수)
<body>
<audio controls src="./media/rain.mp3" />
</body>
2. 표 관련 태그
표 만들기
<table>: 테이블 만들기<thead>,<tbody>: 테이블 헤더와 바디 만들기 (thead는 선택)<tr>: 테이블 행 만들기<th>,<td>: 테이블 열 만들기 (th는 열의 헤더, td는 열의 데이터)
<body>
<table>
<thead>
<tr>
<th>헤더 th1</th>
<th>헤더 th2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1행 td1</td>
<td>1행 td2</td>
</tr>
<tr>
<td>2행 td1</td>
<td>2행 td2</td>
</tr>
<tr>
<td>3행 td1</td>
<td>3행 td2</td>
</tr>
</tbody>
</table>
</body>
표의 제목 - caption
<caption>- 표의 설명 또는 제목 표시
<body>
<table>
<caption>
테이블 태그들
</caption>
<thead>
<tr>
<th>헤더 th1</th>
<th>헤더 th2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1행 td1</td>
<td>1행 td2</td>
</tr>
<tr>
<td>2행 td1</td>
<td>2행 td2</td>
</tr>
</tbody>
</table>
</body>반응형
'프론트엔드 입문 가이드 > HTML 기초' 카테고리의 다른 글
| [HTML 기초] 6. HTML 태그 - div와 span & 구획 관련 시멘틱 태그 (0) | 2022.03.16 |
|---|---|
| [HTML 기초] 5. HTML 태그 - 폼 관련 태그(button, input, textarea, select, option, label, form) (0) | 2022.03.15 |
| [HTML 기초] 3. HTML 태그 - 텍스트 관련 태그(h1~h6, p, b, br, ol, ul, li, a) (0) | 2022.03.13 |
| [HTML 기초] 2. 환경 세팅 & HTML 구조 (feat. vscode 사용 꿀팁) (0) | 2022.03.12 |
| [HTML 기초] 1. HTML이란? (0) | 2022.03.09 |
