[2021/12/15]국비지원 HTML5 코딩툴 기본학습 7-(3) audio, iframe

이 날의 과정

1. form 복습 + form 예제 이미지 마크업 해서 수업 중 과제로 제출
2. video 태그
3. audio 태그
4. 기타 요소 태그
5. 한국남부발전공사 공지사항 페이지 마크업

audio : video태그와 마찬가지로 한 방에 정리할 수 있는 태그.
과거 N사 블로그의 블로그배경음 서비스 그 기능을 떠올릴 수 있음 (지금은 없어진 기능)

iframe : video태그와의 차이 = 해당 영역에 프레임을 쳐놓고 그 안에다 타 사이트의 동영상 등을 불러올 수 있음
inline frame의 약어. 자주 보지 못 한 유형의 태그.
어쨌든 하나의 블록요소로 보자면, 초과 될 경우 스크롤 기능이 지원된다는 특성이 있는데
이 안에 텍스트를 불러올 경우에는 차라리 div에 overflow scroll을 주는 게 맞을 수 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>audio, iframe<title>
</head>
<body>
    <audio controls autoplay loop>
        <source src="audio/old_melody.mp3" type="audio/mp3">
    </audio>
    <hr>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/JbT31Vmvat0" 
        title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
    </iframe>
</body>
</html>

결과물

하는 법만 배우고 의미나 사용법?에 관해서는 구체적으로 배우질 않아서
의미나 용도 쪽으론 많이 부실한 기술블로그가 될 것 같다...

한마디로 실습엔 강한데 이론으로 가면 머더라..? 할 것 같은 블로그ㅠ

일단 그룹원 한 분이 보내주신 깃헙이 있어서 링크 첨부해 둔다.

저처럼 실전에만 강하고 이론은 너덜너덜하신 뉴비들은
참고하시면 매우 좋을 것 같습니다.
정말 정리가 잘 돼 있어요.

웹접근성과 웹표준 (seulbinim.github.io)

저작자표시 비영리 변경금지 (새창열림)

티스토리툴바