본문 바로가기

Site25

Countimator.js 사이트 로딩 시 숫자가 카운트 되는 라이브러리 github.com/benignware/jquery-countimator benignware/jquery-countimator Animated counter. Contribute to benignware/jquery-countimator development by creating an account on GitHub. github.com 2020. 11. 27.
반응형 유튜브 플레이어 (responsive youtube player) 기본 개념 기본 개념은 width 비율 만큼 padding-bottom 값을 동일하게 주면 된다. 100%를 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다. See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen. 응용 사례 See the Pen responsive youtube player by zinee (@zineeworld) on CodePen. 응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다. 유튜브 플레이어 비율은 16:9 이기 때문에 padding-bottom: 56.25% 을 주면 된다. 비율을 빠르게 계산하기 위.. 2020. 11. 26.
jquery.scrollUp.min.js (스크롤 탑) 스크롤 탑 버튼 만들어주는 라이브러리 입니다. markgoodyear.com/2013/01/scrollup-jquery-plugin/ scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer ScrollUp is a lightweight jQuery plugin to create a customisable "Scroll to top" feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy fo.. 2020. 11. 24.
stickyjs (오브젝트를 고정) 1. sticky 예제 webflow.com/website/Sticky-On-Scroll Responsive web design tool, CMS, and hosting platform | Webflow Build responsive websites in your browser, then launch with our world-class hosting or export your code. Discover the professional website platform built for your business. webflow.com 2. 오브젝트를 고정시켜주는 라이브러리입니다. stickyjs.com/ 2020. 11. 24.
slick kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 2020. 11. 20.
10+ Best Javascript Scrolling Animation Plugins bashooka.com/coding/10-best-javascript-scrolling-animation-plugins/ 10+ Best Javascript Scrolling Animation Plugins – Bashooka Scrolling animation helps better control the user flow and make sure important content is appropriately shown to a given user. The idea is that, as a user scrolls through the site, different bashooka.com alexfox.dev/lax.js/ https://alexfox.dev/lax.js/ alexfox.dev github... 2020. 11. 19.
How TO - Resize Header on Scroll See the Pen How TO - Resize Header on Scroll by miae (@flato) on CodePen. 2020. 11. 19.
Apple 제품 페이지 스크롤 애니메이션 Apple은 제품 페이지의 세련된 애니메이션으로 유명합니다. 예를 들어, 페이지를 아래로 스크롤하면 제품이보기에 들어가고, MacBook은 접 히고 iPhone은 회전하면서 하드웨어를 과시하고 소프트웨어를 시연하며 제품 사용 방식에 대한 대화식 이야기를 들려줍니다. iPad Pro의 모바일 웹 경험 비디오를 확인하십시오. 출처 : Twitter 당신이 보는 많은 효과는 HTML과 CSS에서만 만들어지지 않습니다. 그러면 무엇을 물어? 글쎄, 이해하기가 조금 어려울 수 있습니다. 브라우저의 DevTools를 사용하더라도 요소를 지나칠 수없는 경우가 많기 때문에 항상 답을 알 수있는 것은 아닙니다 . 이러한 효과 중 하나를 자세히 살펴보고 어떻게 만들어 졌는지 확인하여 자체 프로젝트에서 이러한 마법 효과 중.. 2020. 11. 18.
GaugeMeter GaugeMeter.js jQuery 플러그인 jQuery로 제작 된 그래픽 게이지 미터 github.com/Mictronics/GaugeMeter Mictronics/GaugeMeter An elegant and dynamic animated graphical gauge meter built with jQuery. GaugeMeter.js is highly customizable and includes full-radial, semi-radial & arch dials. - Mictronics/GaugeMeter github.com 사용방법 1. jQuery & JavaScript Code 추가 태그 내에 아래 코드 추가 2020. 10. 13.
무료 템플릿 사이트 html5up.net/ HTML5 UP Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license. html5up.net kalanidhithemes.com/ Kalanidhi Themes kalanidhithemes.com 부트스트랩 템플릿 themehunt.com/ Free Bootstrap Templates & WordPress Themes A great collection of multipurpose free templates and WordPress Themes. Browse and download theme for your personal, business or.. 2020. 10. 13.
게임프로그래밍전문가 www.cb.or.kr/creditbank/eduIntro/nEduIntro2_4_1.do 자격 학점인정이란? | 자격 | 학점인정 대상 | 학점은행제 소개 | 학점은행 홈으로 이동 학점은행제 소개 학점인정 대상 이전학점인정 대상 자격 학점인정이란? --> 자격 전공별 자격연계 자격별 학점인정의 세부기준은 교육부장관의 승인을 받아 국가평생교육진흥원의 www.cb.or.kr 영문명 Certificate of Game Programmer 분야 정보/통신 관리처 한국콘텐츠진흥원 시험과목 프로그래밍일반 게임제작개론 게임알고리즘 게임프로그램작성 자격명칭 게임프로그래밍전문가(2002-12-31) 실기기관 홈페이지 : www.kgq.or.kr/service/pub/IntroServlet 한국콘텐츠진흥원 게임국가기술자.. 2020. 10. 7.
레이어팝업-위치조정-초점처리for웹접근성 $('.layer_open').click(function(){ var el = $(this); $('.layer_popup').show(); $('.dim').show(); el.attr('data-focus','on'); // 레이어 팝업이 닫힐 때를 위한 표시 - 웹접근성 /* modalPopup팝업 위치조정 */ window.setTimeout(function(){ var target = $("#layerPopup"); var win_height = $(window).height(); var pop_height = target.height(); var top_value = $(window).scrollTop() + (win_height - pop_height) /2; target.attr("tabi.. 2020. 9. 24.
css Animate wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms after This animation will start 500m.. 2020. 9. 22.
04- [웹디자인기능사] 설치, 폴더만들기 작업 준비하기 1. 코딩 EDIT 프로그램 설치 컴퓨터에 설치되어 있는 메모장으로도 코딩이 가능하지만 작업하기가 어렵다. 해서 EDIT 프로그램을 사용하여 코딩한다 VS Code, Atom, Brackets 등 많은 프로그램이 있지만... 시험장에 설치되어 있는 프로그램을 설치해서 연습하는게 좋기 때문에 Brackets을 설치해 연습해보겠다. 아래 페이지로 가서 Brackets과 emmet을 설치하고 오세요~ https://oddcode.tistory.com/69?category=836326 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A mo.. 2020. 9. 18.
06- [웹디자인기능사] CSS 제작하기 작업 전 프로그램 설치가 필요합니다. 설치를 위해 아래 페이지를 참고하세요. https://oddcode.tistory.com/69?category=836326 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A modern, open source code editor that understands.. oddcode.tistory.com HTML로 사이트의 뼈대를 완성했으면 CSS로 디자인을 입히겠습니다. 1. CSS 파일 External로 추가하기 css 확장자를 가진 파일을 만들고 html 파일에 방금 만든 css를 연결해 사용합.. 2020. 9. 18.
원페이지 애니메이션 스크롤링 (onepage animation scroll) 애니메이션 스크롤링 공용 CDN 사용 script 추가 // scrollTo $('nav a').on('click', function (event) { $.scrollTo(this.hash || 0, 500); event.preventDefault(); }) https://github.com/flesler/jquery.scrollTo flesler/jquery.scrollTo Lightweight, cross-browser and highly customizable animated scrolling with jQuery - flesler/jquery.scrollTo github.com 2020. 8. 25.
scrollUp jQuery plugin https://markgoodyear.com/2013/01/scrollup-jquery-plugin/ scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer ScrollUp is a lightweight jQuery plugin to create a customisable "Scroll to top" feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy for t markgoodyear.c.. 2020. 8. 25.
원페이지 스크롤 Fullpage.js https://alvarotrigo.com/fullPage/ko/ fullPage scroll snapping. Create full screen pages fast and simple Mouse wheel snap to sections. Fast and simple to use. alvarotrigo.com 2020. 7. 28.
유용한 라이브러리 모음 이미지 갤러리 fancyapps.com/fancybox/3/ fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script Combination of jQuery, CSS transitions to spice up the way modal window opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh eu nibh scelerisque malesuada. Morbi mollis eleifend turpis. Mauris consequat convallis volutpa fancyapps.com http://fan.. 2020. 4. 9.
Bootstrap 시작하기 부트 스트랩 세계에서 가장 인기있는 프론트 엔드 컴포넌트 라이브러리를 사용하여 웹에서 반응 형 모바일 우선 프로젝트를 빌드하십시오. 부트 스트랩은 HTML, CSS 및 JS로 개발하기위한 오픈 소스 툴킷입니다. Sass 변수 및 믹스 인, 반응 형 그리드 시스템, 광범위한 사전 빌드 된 구성 요소 및 jQuery를 기반으로하는 강력한 플러그인으로 아이디어를 신속하게 프로토 타입하거나 전체 앱을 빌드하십시오. 다운로드 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com https://www.w3schools.com/bootstrap/bootstrap_ver.asp.. 2020. 3. 31.
03- 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A modern, open source code editor that understands web design Brackets is a lightweight, yet powerful, modern text editor. We blend visual tools into the editor so you get the right amount of help when you want it. With new features and extensions released every 3-4 weeks, it's like gettin.. 2020. 3. 18.
05- [웹디자인기능사] HTML 제작하기 작업 전 프로그램 설치가 필요합니다. 설치를 위해 아래 페이지를 참고하세요. https://oddcode.tistory.com/69?category=836326 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A modern, open source code editor that understands.. oddcode.tistory.com HTML 코딩 시 중요(★★★★★) 체크포인트 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야.. 2020. 3. 10.
02- [웹디자인기능사] 실기 자료 https://space.malangmalang.com/open?fileId=m:0:696672933&lang=ko 웹디자인기능사 실기 한컴스페이스로 공유함 space.malangmalang.com 웹디자인기능사 실기자료입니다. JUST 쇼핑몰 메인을 HTML5, CSS, jQuery를 이용해 4시간 안에 제작하여 제출하면 됩니다. HTML 1시간 / CSS 1시간30분 / JS 1시간으로 시간 분배해서 연습하시면 좋을 듯합니다. 아래 기획서를 보고 중요한 부분을 체크하고 시작하세요. 중요(★★★★★) 체크 포인트 시험시간 내에 웹페이지를 제작 후 5MB 용량이 초과되지 않게 저장 후 제출한다. images(폴더) / script(폴더) / css(폴더)를 만들어 index.html, css, js 파일.. 2020. 3. 6.
01- [웹디자인기능사] 필기, 실기 기출문제 웹디자인 기능사 필기 2014년 ~ 2016년도까지의 기출문제 입니다. 기출문제 위주로 문제를 외워가시면 됩니다. 아래 링크를 열어보세요~ 필기자료 https://space.malangmalang.com/open?fileId=m:0:696670187&lang=ko 웹디자인기능사 한컴스페이스로 공유함 space.malangmalang.com 실기자료 https://space.malangmalang.com/open?fileId=m:0:696672933&lang=ko 웹디자인기능사 실기 한컴스페이스로 공유함 space.malangmalang.com 2020. 3. 6.
2020년 웹디자인 기능사(큐넷), GTQ(KPC자격) 일정 웹디자인기능사(큐넷) http://www.q-net.or.kr/crf005.do?id=crf00503&gSite=Q&gId=&jmCd=7798&jmInfoDivCcd=B0&gbnn=gbnSubtab2 국가자격 종목별 상세정보 | Q-net www.q-net.or.kr GTQ (KPC자격) https://license.kpc.or.kr/nasec/qlfint/qlfint/selectGtqinfomg.do GTQ 그래픽기술자격 소개 잠시만 기다려 주세요 Loading... GTQ 그래픽기술자격 license.kpc.or.kr 2020. 2. 6.