본문 바로가기

정보/부트스트랩

부트스트랩 소스,동영상 표시 아이콘 나타내기

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


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



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





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


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


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


  • BlogIcon 이카루스 2015.12.09 12:01

    요즘은 부트스트랩으로도 많이 제작이 되어서 일반 레이아웃하고 하면 어떤 부분이 깨지는 현상이 일어나는 것 같더라구요..
    아무래도 부트스트랩이 서서히 떠 오르는 것 같다는 생각이 드네요..!!

    • BlogIcon 백전백승 2015.12.09 12:28 신고

      제가 초기인지 몰라도 아직까지는 깨지는 점은 보지 못 했습니다. 현재 가장 인기 있는 프레임워크니....당분간 부트스트랩을 뛰어넘는 프레임워크는 나타나지 않을 것 같습니다. 티스토리 제공 반응형 스킨 10개 중에 3개가 부트스트랩이니...