웹솔루션개발 25년 노하우! 해피CGI의 모든것

dTree는 부드러운 CSS3 전환으로 고전적인 접기/디렉토리/파일 트리 보기 구조를 만들기 위한 간단한 경량 jQuery 플러그인입니다. Cookie는 웹 페이지를 새로 고칠 때 오픈 상태를 기억할 수 있도록 지원합니다. 다운로드 받은 파일의 압축을 해제한 뒤, index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 폴더 아이콘 좌측에 있는 + 를 눌러서 펼쳤다가, 접었다가 할수 있습니다. 펼치고, 접어지고 하는 사이에 애니메이션이 있습니다. 사용방법은 아래와 같습니다. 쿠키를 이용해서, 새창을 열었을때 펼쳐놓은 폴더를 유지시켜줍니다.

스크롤시 원하는 문구에 하이라이트가 텍스트 앞에서 뒤로 자동으로 적용됩니다. 원하는 문구에 mark 태그를 삽입합니다. 관련 css 소스입니다. mark 태그에 적용이 됩니다. animation-timeline을 이용하여 시작시점을 정할수 있습니다. 해당 사이트 또는 첨부파일에서 관련소스를 다운로드 받아 소스 확인이 가능합니다.

웹페이지를 제작하다보면 유튜브 영상을 삽입할때가 있습니다. 경우에 따라 썸네일을 보여주고 영상을 링크하는 경우도 있습니다. 이때 해당 유튜브 영상의 썸네일을 가져오는 방법에 대해 안내해 드립니다. 아래 영상의 썸네일을 가져온다고 할때 https://www.youtube.com/watch?v=ARTkK9h5nsI ARTkK9h5nsI 부분이 영상의 고유ID 값입니다. 해당값을 아래 처럼 이미지 주소에 삽입합니다. ARTkK9h5nsI/0.jpg"> 위와 같이 할경우 이미지의 상하에 검은색 여백이 생기고 이미지의 비율도 맞지않습니다. 이미지 경로에 파일명을 변경하여 다른 썸네일을 불러올 수 있습니다. 0.jpg"> 기본 이미지의 상하에 검은색 여백이 생깁니다. mqdefault.jpg"> 검은색 여백이 삭제..

MediaElement.js 는 HTML5 mediaelement API를 기반으로 하는 유연하고 강력한 jQuery/JavaScript 오디오 및 비디오 플레이어 플러그인입니다. MP4, MP3, WebM은 물론 Dailymotion, Facebook, SoundCloud, Twitch, Vimeo 및 Youtube와 같은 거의 모든 오디오 및 비디오 형식을 지원합니다. 데모페이지에 접속해보면, 위 그림 처럼 동영상을 재생하기 위한 샘플 소스를 확인할 수 있습니다. 사용 방법은 아래와 같습니다. mediaelement/docs/usage.md at master · mediaelement/mediaelement · GitHub 위 페이지를 통해서 사용법에 대한 다양한 매뉴얼을 확인해볼 수 있습니다.

세그먼트를 사용한 SVG 메뉴 아이콘 애니메이션 JavaScript 라이브러리 작동원리, 기본 구성 등 튜토리얼을 따라하면 다양한 효과를 줄 수 있습니다. 탄력적인 SBF 애니메이션을 구현하여 창의적인 효과를 볼 수 있습니다. s s s

디자이너가 없는 개발자 위해 실용적인 UI 디자인 작업을 위한 7가지 팁을 알려드립니다. 간단해 보이지만 어려운 가독성 좋은 UI 디자인에 대한 7가지 팁 정보입니다. 전문 디자이너 없이도 충분히 구성할 수 있는 팁이라서 아주 유용하네요. 또한 신입 디자이너들에게도 아주 좋은 자료가 될꺼 같습니다. 감사하게도 번역해주신 자료도 있네요. https://medium.com/@dan_kim/%EB%B2%88%EC%97%AD-%EB%94%94%EC%9E%90%EC%9D%B8%ED%95%A0%EB%95%8C-%EC%8B%A4%EC%9A%A9%EC%A0%81%EC%9D%B8-%EC%9D%BC%EA%B3%B1%EA%B0%80%EC%A7%80-%ED%8C%81-d60c61329e8b

출처 : https://css-tricks.com/fluid-width-video/ CSS만으로 아이프레임 높이를 가로값에 맞춰 자동으로 늘어날 수 있는 코드입니다. 자바스크립트를 사용하지 않고 아이프레임 높이를 조절할 수 있습니다. padding-bottom 부분을 수정하시면 높이를 조절할 수 있습니다. HTML CSS 소스다운로드를 통해 확인해 보실 수 있습니다.

css로 텍스트가 위아래로 이동하는 애니메이션 입니다. HTML Hello world ! bob ! users ! everybody ! CSS body { width: 100%; height: 100%; position: fixed; background-color: #34495e; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 160px; overflow: hidden; font-family: "Lato", sans-serif; font-size: 35px; line-height: 40px; color: #ecf0f1; } .content__container { font-weigh..

개인 및 상업적으로 사용이 가능한 무료 목업 사이트입니다. 포스터, 상자, 스마트폰 등 다양한 목업으로 자신이 디자인했던 이미지를 넣어 어떻게 나오는지 볼 수 있습니다.

스타트업 테마가 적용된 상업적으로 사용이 가능한 무료 이미지 사이트입니다. 검색창에서 필요한 이미지의 직업을 검색하시면 검색한 직업의 이미지를 불러와 더 효율적으로 사용할 수 있습니다.