🐣입사 초반, 이사님께서 svg를 공부 해보자는 숙제 아닌 숙제(?)를 내주셨으나,일에 치여 미루고 미루다 요근래 다시금 svg 공부를 결심 (๑•̀ㅂ•́)و✧하게 됐습니닷 🤓하지만 어찌 시작해야할지 몰라 또  방황..하다가 이제서야 정리한 내용을 작성해봅니닷..! 😂   SVG ( scalable vector graphis )SVG 란 벡터 기반의 그래픽을 XML형식으로 정의한 것 입니다. 여기서 XML 이란,  데이터를 전달하는 하나의 마크업 언어 이고, 벡터 기반의 그래픽 이란, 픽셀 기반의 이미지 형태인 png, jpg 파일등과 다르게 점과 점사이가 수학적 계산에 의해 그려진 그림 입니다. 때문에 확대나 축소에도 '이미지가 깨지지 않고', '용량에 변화가 없죠'! 다만 복잡한 형태의 이미지는..

유튜브 iframe 을 이용하다가, 모바일에서는 자동재생이 안된다거나, 재생바가 보인다거나 하는 문제가 있었습니다. 그래서 방법을 찾던 도중, 결국 찾아낸 것이 YTPlayer ! YTPlayer 유튜브 영상 삽입 Jquery 플러그인 으로, 유튜브 영상을 배경으로 넣거나, 유튜브 iframe 에서 제어가 안되는 - 모바일 자동재생 / 재생바 숨기기 등 여러 기능을 지원하는 플러그인 입니다. ( * 해당 플러그인은 웹서버에서만 작동됩니다. 서버에 연결하여 확인해주세요! ) >> 원문 사이트 : https://github.com/pupunzi/jquery.mb.YTPlayer 1. Mark Up * header 삽입 * ( ↑ css 파일과 js 파일은 github에서 다운로드 후, 파일경로에 맞게 입력주..

네트워크 속도가 빨라지면서, 웹사이트에 동영상을 넣는 경우가 많아졌는데요! video 태그로 동영상을 삽입하면, 트랙픽이 많이 나가는 단점이 있습니다 😥 그래서 이에 대한 방안으로, 유튜브 iframe 을 삽입하는 방법이 있죠 그래서 오늘은 유튜브 iframe 에 대해, 반응형으로 태그를 넣는법에 대해 정리해보겠습니다! 유튜브 iframe 유튜브 영상을 html태그로 가져와, 웹페이지에 삽입하는 방법입니다. 1. Mark Up 1 ) 가져오고 싶은 유튜브 영상으로 가서 [공유] 버튼을 클릭합니다. 2) 공유버튼 누르면 나오는 창에서 [퍼가기] 클릭 3 ) 퍼가기 누르면 나오는 창 오른쪽에 태그 내용이 있습니다! 하단의 [복사] 클릭 후 그대로 html에 붙여 넣으면 됩니다 * html * 2. 속성 하지..

video 태그랑 유튜브 iframe만 고작 배워 시작한 신입, 고작 동영상 하나 넣는게 어찌나 탈이 많았는지 몰라요 😂 그런의미에서 동영상을 완.전.정.복 하기 위해 글을 써 봅니다. VIDEO 태그 웹사이트에 동영상을 적용하기 위해 사용되는 video 태그 🎬 HTML5가 생기면서 새로 나온 태그로, IE9부터 지원합니다. 1. 지원되는 비디오 형식 MP4 video/mp4 WEBM video/webm Ogg video/ogg (사파리 미지원) ogg 파일은 사파리 브라우저 에서 지원이 되지 않기 때문에, 보통 mp4나 webm을 많이 사용해요. 사실 ogg 파일은 저도 한번도 써 본 적 없는 파일형식 이네요 2. MarkUp 위의 두 방식 모두 활용 됩니다! 저는 아래 코드를 주로 사용하는 편이에요..