학습 내용
img, audio, video, a 태그를 이용하여 다양한 콘텐츠 제공 가능
alt
img 태그 사용 시, alt를 사용하여 이미지 로드 실패 시에 나타낼 문구를 표시
source
audio, video 태그의 내부에 source 태그를 사용하여 한 개 이상의 소스 지정 가능.
여러 개를 지정하면 브라우저가 자동으로 소스 선택
a
a태그를 사용하여 웹페이지 이동, 해당 웹의 특정 element로 이동, 이메일 보내기 등 여러 가지 기능을 포함한다.
코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.bigbr {
line-height: 100;
}
</style>
</head>
<body>
<!-- img태그 -->
<img width="300" height="300" src="./digda.png" alt="디그다" />
<br />
<audio controls>
<source src="./digda.ogg" type="audio/ogg" />
<source src="./digda.mp3" type="audio/mpeg" />
</audio>
<br />
<!-- a태그로 웹페이지 이동 -->
<a
href="https://pokemon.fandom.com/ko/wiki/%EB%94%94%EA%B7%B8%EB%8B%A4_(%ED%8F%AC%EC%BC%93%EB%AA%AC)"
target="_blank"
>디그다의 모든 것</a
>
<br />
<!-- a태그로 특정 element 이동하기 (with id) -->
<a href="#cutething">디그다보다 귀여운 영상보기</a>
<div class="bigbr">
<br />
</div>
<!-- video태그 -->
<video
id="cutething"
controls
muted
height="500"
src="doomfist.mp4"
></video>
<br />
<!-- a태그로 메일 보내기 -->
<a href="mailto:kangwlgns@o.cnu.ac.kr">후원문의</a>
</body>
</html>
Reference
'프론트엔드 > HTML' 카테고리의 다른 글
| [HTML] head 태그 (2) | 2024.02.04 |
|---|---|
| [HTML] Form 태그 (0) | 2024.02.01 |
| [HTML] 영역 태그 (0) | 2024.01.31 |
| [HTML] 태그 (0) | 2024.01.30 |
| [HTML] VSCode Emmet (0) | 2024.01.30 |
