Scikit Web

예제 1 @font-face { font-family: 'NanumSquare'; font-weight: 400; src: url(NanumSquareR.eot); src: local('☺'), url(NanumSquareR.eot?#iefix) format('embedded-opentype'), url(NanumSquareR.woff2) format('woff2'), url(NanumSquareR.woff) format('woff'), url(NanumSquareR.ttf) format('truetype'); } @font-face { font-family: 'NanumSquare'; font-weight: 700; src: url(NanumSquareB.eot); src: local('☺'), url..

https://mattboldt.github.io/typed.js/ Typed.js - Type your heart out mattboldt.github.io html5의 data 속성을 사용하여 설정해 놓은 문장을 자동으로 쓰고 지우는 라이브러리인 Typedjs를 사용한 예제입니다. Typedjs에서 사용가능한 애니메이션 효과는 공식 깃허브에서 확인해보실 수 있습니다. HTML 삽입 미리보기할 수 없는 소스

데이터를 받는 쪽 Parent(부모)에서는 Child(자식)쪽에서 부터 보내지는 데이터를 받기 위해 이벤트 리스너를 등록해 놓고 있어야 한다 window.addEventListener('message', function (event) { console.log(event.data); }); 데이터를 보내는 쪽 Child(자식)에서는 window.parent.postMessage('Hello pop up post message', '*'); 개발을 하다보면 팝업을 띄워놓고 다른 사이트로 이동했다가 되돌아오거나 팝업을 띄운 사이트의 다른 페이지로 이동시키는 경우가 있는데 그 경우에는 window.opener 를 사용하면 된다 window.opener.parent.postMessage("Hello post me..

html5 글자 효과 라이브러리 중 lettering js 사용 예제 이다. Text를 span 단위로 글자를 나눠주는 게 특징이다. 그래서 소스코드를 보면 html5 영역에는 span이 없지만 class에 등록해 놓은 span class의 영향을 받는 것을 확인할 수 있다. HTML 삽입 미리보기할 수 없는 소스

명언들을 자동으로 재생하는 예제 입니다. jQuery 와 animate.css를 사용하였으며 animate.css 를 재 실행 하기 위해 글자를 새로 설정하고 너비를 읽는 것으로 변화를 감지하게 하여 새로운 애니메이션 이벤트가 실행 되도록 합니다. $("#quotes").text(quotes[idx]); $("#sources").text(sources[idx]); // triger $("#quotes").width(); $("#sources").width(); 사용 예 HTML 삽입 미리보기할 수 없는 소스

프론트 엔드 영역을 개발하다보면 ajax를 많이 사용하게 됩니다. 요즘은 fetch 라는 것도 나와서 fetch도 많이 사용하는 추세 입니다. ajax를 쓰던 fetch를 쓰던 .. 1번 ajax 안에 2번 ajax, 2번 ajax 안에 3번 ajax 를 써서 문자 그대로 Callback 지옥을 만들게 됩니다. 이런 Callback 사용은 좋은 프로그래밍이 아니며 나중에 유지보수 할때도 난이도를 어렵게 만드는 요소가 됩니다. 이런 상황을 피하고자 나온 방법들이 Promise 와 Asyc await 입니다. 2개는 각각 다른 기능이지만 아래와 같은 상황에서 콜백 지옥을 피하기 위해서 두 기능을 같이 사용하여 풀어낼수 있습니다. $( document ).ready(async function() { const..

jQuery Ajax GET 비동기 통신 기본 예제 입니다. $.ajax({ type: "GET", url: [API HOST ADDRESS], success: function (respData, textStatus, jqXHR) { console.log(respData); }, error: function (xhr, status, error) { console.log(error); }, }); 단순화 되어 있는 방법도 있습니다. $.get([API HOST ADDRESS], function( data ) { console.log(data); }); 기본적으로는 위와 같이 사용할 수 있습니다. 하지만 위의 방법은 API를 한번만 사용할때는 괜찮지만.. 여러개를 사용하게 된다면 Callback 지옥이라는 ..

홈페이지에 찾아온 사람들에게 보여줄 광고 팝업 에제 입니다. 정적인 위지에 띄우는 팝업 예제 입니다. CodePen이라는 글자를 클릭하시면 동작 확인을 더 원활하게 하실 수 있습니다. HTML 삽입 미리보기할 수 없는 소스