메뉴 옆에 내용 배치하기, overflow, position,gif, 유튜브 영상 삽입하기

메뉴 옆에 내용을 배치하고 싶어 갖가지 방법을 사용해 봤지만 결국 결론은 메뉴 div에 position absolute을 주는 방법이었습니다.  

내용은 float로 right를 하여 오른쪽에 배치하고 width를 70%로 하였습니다. 

 

메뉴에 overflow auto를 하여 화면이 작을 때는 scroll이 보이고 화면이 커지면 자동으로 없어지도록 했습니다. 

이번에 gif를 넣고 싶어서 링크주소 복사를 했더니 그러면 안 되는 것이었습니다. 그냥 이미지는 잘 되는데 gif는 이미지 주소 복사로 인한 .gif 가 있어야 잘 실행됩니다.

gif 이미지라도 있으니 홈페이지 분위기 확 사는 느낌 ! 

 

그리고 메뉴에서 예고편이나 ost는 누르면 바로 유튜브로 넘어가도록 설정하려고 했는데 유튜브에서 해당 연결을 막아서 넘어가지 않네요. 어차피 연습용 홈페이지라 안돼도 상관없지만 알아보는 게 좋겠죠. 

유튜브 동영상을 삽입하기 위해선 단순한 주소 복사가 아닌 [퍼가기]를 누른뒤 <iframe> 코드를 복사해서 붙여 넣으면 됩니다. vedio를 사용하지 않네요. 

그러면 정상적인 유튜브 동영상이 삽입되었습니다. 

 

유튜브 영상 재생 
https://www.w3schools.com/html/html_youtube.asp
유튜브 영상 퍼가는 법
https://www.bitdegree.org/learn/how-to-embed-a-youtube-video

유튜브 영상을 적용하는 방법을 알게된 사이트입니다. 

 

*이 모든 건 다 연습용 홈페이지 이기 때문에 이미지도 동영상도 그냥 썼지만.. 저작권은 중요하죠.!