백.전.백.승.

배경에 나오는 유튜브는 [파묘] 입니다. 그리고 이전은 [윙카] 이었습니다. 참고로 유튜브 배경 멈춤, 소리, 재생 등은 오른쪽 상단 플레이바를 사용하면 됩니다.

Made with Bootstrap 3 And Powered by Tistory

여기에서 알아볼 것은 아래와 보듯이 썸네일에 동영상 재생 아이콘이 나오게 하므로써 썸네일이 동영상이라는 것을 나타내는 것입니다. 아래와 같은 형태가 PC,스마트폰,태블릿을 만족하는 것 같습니다. hover는 PC에서...이제는 PC만을 위한 것에서 벗어나야 할 것 같습니다.


예전에 썸네일 동영상에 아이콘을 나오게 한 것을 보고 어떻게 한 것인지 묻는 사람이 있었습니다. 그때 어떻게 했냐면 동영상이 두 개 정도여서 김프(GIMP)라는 그래픽 프로그램을 이용해서 썸네일과 아이콘을 만들었다고 말했습니다. 여담으로 아래 송곳이라는 드라마 종영했으니 재방송으로 보거나 네이버 웹툰으로 보면 됩니다.



그러나 소스를 보면 알겠지만 그래픽을 사용하지 않았습니다. 전에도 말했듯이 이것은 부트스트랩을 사용하므로 그것을 사용하지 않으면서 안 된다고 하면.... 부트스트랩 기초적인 것만 알면 틀에 박힌 단순한 반응형 페이지만 만들 수 있지만 소스를 많이 알면 독특하고 다양한 페이지를 만들 수 있습니다. 제가 처음에 부트스트랩으로 기초만 알고 블로그 스킨을 만들었더니 너무 단순하더라고요.





참고로 2015/08/25 - 유튜브 동영상, 썸네일 가져오기에서 유튜브에서 썸네일 가져오는 것을 다루었습니다. 아래에 볼 수 있는 썸네일 모두는 유튜브 동영상의 썸네일입니다. 그래픽 프로그램을 이용한 것이 아닙니다.  그리고 위 동영상을 재생하면 새 창에 나오나 아래는 부트스트랩의 모달(modal)에 동영상이 재생되는데 그 소스도 찾아 적겠습니다. 모달을 한글로 설명을 못 하겠고 알고 싶으면 클릭해보세요. 저의 익스플로러 8에서 보니 둘 다 새 창에 재생됐습니다. 하여튼 익스플로러....


아래와 같이 썸네일 이미지만 나오면 동영상인지 이미지인지 알 수 없지만 위에서 보았듯이 썸네일 위에 재생 아이콘이 나오니 동영상인지 바로 알 수 있었을 것입니다.


저는 HTML, CSS, 스크립트 등을 제대로 모릅니다. 단지 소스를 활용할 줄 아는 정도입니다. 이런 것 때문에 잘 알 것이라 생각하는 경향이 있어 가끔 어려운 질문을 합니다. 


'IT.인터넷.생활 관련/부트스트랩' 관련된 글 MORE



Close 방명록
×

카테고리




×
×