<iframe>
- iframe은 현재 HTML 페이지에서 다른 HTML 페이지를 보여주고 싶을 때 사용
- width, height 속성으로 크기 조절(기본값 height = 150px, width = 300px)
<iframe src="링크"></iframe>- src 속성으로 불러올 HTML 링크 설정 가능 (주로 Youtube 영상 불러옴)
Youtube 영상 불러올 때 아래와 같은 속성 가짐
<iframe width="1280" height="720" src="https://www.youtube.com/embed/-iuX3r8PSzU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>-
frameborder: 테두리 그려줄지 결정, 0 또는 1의 값, 이제 더 이상 사용하지 않는 값 -
allow : iframe에서 허용할 기능을 지정
accelerometer(빨리감기) | autoplay(자동재생) | encrypted-media(암호화된 미디어) | gyroscope | picture-inpicture 등에 대한 액세스 허용 여부
ex) allow="fullscreen" allow="payment" 식으로 작성 -
allowfullscreen : 전체화면 지원
💡 주의할점
- autoplay 속성은 브라우저 정책 상 일부 모바일 브라우저에 작동하지 않을 수 있으며, 항상 mute 속성과 함께 사용되어야 함
- 모바일 환경에서 autoplay 기능으로 인한 의도하지 않은 트래픽 유발을 방지하고 접근성 측면에서 좋지 않기 때문
- 이러한 특징은
<iframe>,<audio>,<video>요소 모두 동일하게 적용
<audio>
<audio>는 음악 컨텐츠를 재생하기 위한 태그- src 속성은 브라우저에게 오디오 파일의 위치 및 파일명을 제공
<audio src="폴더/파일명" controls autoplay loop ></audio>- controls : 음악 파일을 제어할 수 있는 컨트롤러를 가져옴
- autoplay : 로딩이 완료된 파일을 자동 재생(Chrome에서 정책상 autoplay가 안됨. 간혹 되는 경우도 있으나 정책상 안되는 것이 맞음. 주로 js로 컨트롤합니다.)
- loop : 음악 반복
<audio controls>
<source src="flow.ogg" type="audio/ogg">
<source src="flow.mp3" type="audio/mpeg">
</audio><audio> 요소 역시 <source> 요소를 자식으로 사용 가능, 다른 요소와 마찬가지로 크로스 브라우징을 위해 여러 포맷의 파일을 지원 가능 ! ogg 확장자가 없는 경우에는 mpeg으로 재생하게 됨!
source는 html계의 if 문인거 같다 ..ㅎ
<video>
<video>는 동영상 파일을 재생하기 위한 태그
<video src="batman.mp4" controls autoplay loop width="450" height="300"></video>- src : 브라우저에게 비디오 파일의 위치 및 파일명을 제공
- controls : 영상 파일을 재생하는데 필요한 컨트롤러를 불러옴
- autoplay : 로딩이 완료되면 자동으로 영상 파일 재생
- loop : 영상이 종료되면 다시 반복해서 재생
❗느낀점
디자인 전공생이자 컴퓨터공학 복수전공이기도 하고, 컴퓨터 관련 동아리를 해서 HTML 을 배울 기회가 많았는데, 이런 태그들은 정말 처음본다. 배울 수록 끝도 없는 느낌이지만, 오히려 새로운 것을 배워서 지루하지 않고 재미있다. 앞으로 페이지 내에 비디오나 영상 등을 자유롭게 넣을 수 있을 것이다. 또한, 강사님께서 영상이나 비디오를 넣을 때 시각장애인을 배려하여 자동 재생은 지양하는 것이 좋다는 것을 알려주셨는데, 이렇게 다양한 사용자들을 위해 고려해야 할 요소들이 많은 점이 프론트엔드 공부를 더욱 매력적으로 만든다. 열심히 공부해서 누구나 쉽게 사용할 수 있는 웹페이지를 만들자!! 홧팅
- 주말에 사진 추가해서 글 수정하기
