2023.03.22 수 (HTML 멀티미디어 자료 태그)

프론트엔드웹디자인 3주차 2차시 강의내용

 

 

Frame 태그

기능 : 웹 페이지에 영역을 만들고, 그 영역에 여러 미디어 자료들(mp3, mp4, jpg 등)을 넣을 수 있다.

사용 방법 :

<iframe src = "man.png"></iframe>  <br> <!-- 일반적인 사용 -->
<iframe src = "man.png" width="400" height="400" style="border : none"></iframe> <!--만들어준 영역의 크기를 지정해주고, 경계선을 없애줌-->

웹 페이지에는 이런 식으로 표시된다.

 

 

 

---

 

 

Audio 태그

사용 방법 : 

<!--Audio 태그-->
<audio controls>
    <source src = "mp3/album1_song3.mp3" type = "audio / mpeg">
</audio>

<audio src = "mp3/album1_song3.mp3" controls></audio> <!--위 코드를 줄여서 사용-->

첫 번째 audio태그는 왜 안되는건지 모르겠다..

 

 

 

---

 

 

Video 태그

사용 방법 : 

<!--vidoe 태그-->    
<video controls>
    <source src = "mp3/bando.mp4" type = "video / mpeg">
</video>

<br>

<video controls width="400" height="400">
    <source src = "mp3/bando.mp4" type = "video / mpeg">
</video>

 

유튜브 동영상 삽입 방법 : 

1. 원하는 동영상의 링크를 복사한다.

2. 아래와 같이 iframe 태그 안에 주소를 넣어준다.

<iframe src = "https://www.youtube.com/watch?v=cbuZfY2S2UQ&ab_channel=yanu_"></iframe>

2번까지 한 후 확인해보면 위와같이 나온다.

 

3. 

<iframe src = "https://www.youtube.com/watch?v=cbuZfY2S2UQ&ab_channel=yanu_"></iframe>
위 코드에서 watch?v= 부분을 embed/로 바꾸어주면 된다.

<iframe src = "https://www.youtube.com/embed/cbuZfY2S2UQ&ab_channel=yanu_"></iframe>

 

 

 

---

 

 

지도 삽입 

1. 구글 지도

   구글 지도에서 원하는 장소를 검색한 후, 공유 - 지도 퍼가기 - HTML 복사를 한 후 그대로 붙여넣기만 하면 된다.

 

2. 카카오맵

   역시 원하는 곳을 검색한 후, 오른쪽 상단에 위치한 '내보내기' 를 클릭하고, HTML 복사를 한 후 붙여넣기만 하면 된다ㅏ.

3. 네이버 지도

네이버 지도도 마찬가지로, 원하는 곳을 검색한 후 '공유' - URL 복사를 한 후에

<a href = " "> </a> 태그를 만들어준 다음에 붙여넣기 해주면 된다.

 

 

구글 지도는 확대 및 축소나 이동 등이 가능하지만, 카카오맵은 지도를 클릭하면 웹 사이트로 넘어가게 된다.

네이버 지도는 하이퍼 링크만 사용할 수 있으며, 교수님 피셜로는 네이버 개발자 센터(?)에 가입하면 구글 지도와 같이 기능을 사용할 수 있다고 한다.