[TIL] HTML_Embedded Content_2

12194 단어 멋쟁이사자처럼프론트엔드스쿨개발일지TILhtmlTIL

📌 <iframe>

: 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용!

<iframe src="링크"></iframe>
  • width 혹은 height 속성 : 크기를 조절
  • allow : iframe 에서 허용할 기능들을 지정
  • allowfullscreen : 전체화면을 지원 ex. 백그라운드 배경이 영상인 경우!

< html 실습 >
'frontendschool2' repository 만들기
add file > upload file > FE2 그동안 실습한거 업로드~

  • iframe으로 유튜브 삽입하기!
    유튜브 퍼가기로 복붙하기

<!DOCTYPE html>
<html lang="ko">
<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>iframe</title>
</head>
<body>
    <iframe width="894" height="503" src="https://www.youtube.com/embed/POJ5S2aUizA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe width="1000px" height="500px" src="http://paullab.co.kr/" frameborder="0"></iframe>
    <iframe width="1000px" height="500px" src="http://www.naver.com/" frameborder="0"></iframe>
</body>
</html>

하지만, 네이버는 안나오는 것을 알 수 있다. 보안 때문에!

📌 <audio>

: 음악 컨텐츠를 재생하기 위한 태그

<audio src="폴더/파일명" controls autoplay loop ></audio>
  • controls : 음악 파일을 제어할 수 있는 컨트롤러
  • autoplay : 로딩이 완료된 파일을 자동으로 재생 (크롬 정책상 안됨. 간혹 작동됨)
  • loop : 음악 반복

<!DOCTYPE html>
<html lang="ko">
<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>audio</title>
</head>
<body>
    <audio controls autoplay loop class="bgm">
      <source src="https://drive.google.com/uc?export=download&id=1xbevC0q-fNUDuoFCSLUdot0OIO81LgpE" type="audio/mp3" >
    </audio>
</body>
</html>

📌 <video>

:동영상 파일을 재생하기 위한 태그

  • src : 브라우저에게 비디오 파일의 위치 및 파일명을 알려줌.
  • controls : 영상 파일을 재생하는데 필요한 컨트롤러 불러옴.
  • autoplay : 로딩이 완료되면 자동으로 영상 파일을 재생.
  • loop : 영상이 종료되면 다시 반복해서 재생.

사용시 주의해야할 점

  • 트래픽(사용자가 많아지면 어떤 통신장치나 시스템에 걸리는 부하),,과금에 주의^^
    따라서 유튜브 iframe으로 쓰는 걸 추천!
<!DOCTYPE html>
<html lang="ko">
<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>video</title>
</head>
<body>
    <video controls width="250">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
                type="video/webm">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
                type="video/mp4">
        Sorry, your browser doesn't support embedded videos.
    </video>
</body>
</html>

이미지 태그와 마찬가지로, 스크린리더시

  • <img src="경로"> 이 경우 스크린리더에서 "파일명"과 "라벨이 없는 이미지"라고 읽어준다.
  • 따라서 <img src="경로" alt="">라고 공백으로 해주면 스크린리더에서 생략하게된다!
  • <img src="경로" alt=" ">라고 공백이 있으면 "파일명"을 읽음!

html track 태그 검색해보기!
<track> : <audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(text track)을 정의할 때 사용
자막/캡션 파일, 미디어가 재생되는 동안 화면에 보일 텍스트 파일 등을 명시하는데 사용!

========

코덱(codec)과 포맷(format) 공부하기

How to Use Docker in Windows without Docker Desktop by WSL and Docker Engine

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage