<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 외부에 있는 콘텐츠를 가져올 때 사용하는 콘텐츠 -->
<!-- 이미지 비디오, 오디오 -->
<!-- 다른 HTML 문서 -->
<!-- picture, source, img -->
<img src="image.webp" alt="" />
<picture>
<!-- webp, Google에서 제작한 이미지 포맷 -->
<!-- jpeg에 비해 용량이 적고 투명도를 표현 -->
<source src="image.webp" type="image/webp" />
<source src="image.jpg" type="image/jpeg" />
<img src="image.jpg" alt="" />
</picture>
<!-- video, source, track -->
<!-- 비디오를 가져와서 보여준다 -->
<!-- playsinline, 비디오를 모바일에서 인라인으로 재생하는 속성 -->
<!-- muted, autoplay, 접근성 지침에 의하여 autoplay는 반드시 muted가 있는 상태에만 가능 -->
<!-- poster, 썸네일이미지 -->
<!-- controls, video player로 활용도 가능 -->
<video preload>
<!-- <video src="video.mp4"> -->
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mpeg4" />
<!-- track, 자막 -->
<track
kind="subtitles"
src="video.en.vtt"
srclang="en"
lang="en"
label="English"
/>
</video>
<!-- audio, source -->
<!-- 오디오를 가져와서 재생시키는 것이 주된 목적 -->
<!-- video와 마찬가지로 접근성 지침에 의하여 autoplay는 반드시 muted가 있는 상태에만 가능 -->
<!-- preload, autoplay, muted, controls-->
<audio>
<!-- <audio src="music.mp3"> -->
<source src="music.mp3" type="audio/mpeg" />
</audio>
<!-- iframe -->
<!-- 이 HTML 문서 내에서 외부 HTML 문서를 가져올 때 사용하는 요소 -->
<!-- 유튜브의 동영상을 내 문서내에서 보여주고 싶을 때 -->
<!-- iframe 요소와 부모 요소 사이는 격리되어있음 -->
<!-- 따라서 iframe 내부는 제어가 조금 어려움 -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/bjJ4PgApkYI"
frameborder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<!-- alt 속성 -->
<!-- alternative text의 약자, 대체 텍스트 -->
<picture>
<img src="img.src" alt="대체 텍스트" />
</picture>
</body>
</html>
Backend Engineer