iframe : 정해진 크기에 외부에 콘텐츠나 사이트 그내부에 일부인 것처럼 뜬다. 고유 네임과 ID가 있어서 A태그의 타겟대상되는 경우로도 활용가능. ex)주가정보,날씨,배너,구글검색
https://www.w3schools.com/tags/tag_iframe.asp
비디오는 미디어서버 공간활용 및 스트리밍 등의 비용과 장애요소가 있어서 Youtube를 활용한 영상표현에서 아이프레임이 공유에서 태그형태로 사용된다.
유튜브 영상의 반응형 표현
비디오 태그의 근본, 유튜브를 추천함
아래는 비디오 태그를 미리보기 이미지와 영상으로 연결하는 소스이다. 대부분 미디어 서버를 통해서 연결된 부분이라, 요즈음은 직접적으로 사용을 기피한다.
<video width="720" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
/html/main/theme/kfood_v03/skin/latest
위 경로에 아래 첨부한 basicOne 이라는 최신글스킨을 업로드하고...
index.php에 아래 내용을 삽입 혹은 수정 해주세요.
<h2>Today Q&A </h2>
<? echo latest("theme/basicOne","qa", 2, 18); ?>
오디오 태그를 이용한 브금을 사이트에 적용하기
오디오 태그를 미리보기 이미지와 영상으로 연결하는 소스이다. 저작권등 문제가 있는 부분도 고려를 해야하며, 서버를 통해서 연결된 부분이라, 직접적인 사용보다는 픽사베이의 음악의 주소를 통한 mp3파일연결을 추천한다.
https://www.w3schools.com/tags/att_audio_autoplay.asp
<audio autoplay>
<source src="https://cdn.pixabay.com/download/audio/2021/11/11/audio_9ca9840f3d.mp3">
</audio>
'UI UX(Web)' 카테고리의 다른 글
그누보드 부트스트랩과 탭형식의 최신글 반응형구현 (0) | 2022.04.28 |
---|---|
스마트문화앱 UX설계(04.21) (0) | 2022.04.27 |
아이템의 그래픽과 코딩표현 (0) | 2022.04.25 |
UI, UX관련 개발소스(html, css) (1) | 2022.04.25 |
HTML 아이덴티티의 표현 - 파비콘과 오픈그래프 (0) | 2022.04.22 |