jQuery의 animate 기능은 이전에 살펴봤던 hide/show, fade, slide와 같이이미 정해진 움직임을 element에 부여하는 함수와는 다르게 우리가 원하는대로 customize한 움직임을 element에 부여할 수 있다. $(selector).animate({params}[,duration][,callback]); animate의 기본적인 syntax는 위와 같다. 우선 필수적인 인자로 params라는 객체가 들어온다.이 params는 animate될 수 있는 CSS 속성 객체가 들어오는데, CSS 속성은 반드시 single numeric value여야 한다.예를들어 width, height, left와 같은 값은 animate될 수 있으나, background-color와 같은 no..
web
세 번째로 알아볼 jQuery Effect는 Slide이다.element가 사라지거나 나타날 때 slide 효과를 준다. $(selector).slideDown([duration][,callback]);$(selector).slideUp([duration][,callback]);$(selector).slideToggle([duration][,callback]); slideDown은 element가 나타날 때, slideUp은 element를 사라지게 할때, slideToggle은 slideDown, slideUp 함수를 토글하는 함수이다.이전에 포스팅했던 effect들과 마찬가지로 함수의 인자로 duration과 callback 함수가 있다. duration은 "slow", "fast", 혹은 숫자가 들..
Javasciript의 복잡한 코드를 단순하게 만들어주는 jQuery의 Effects에 대해서 알아보자.jQuery Effect는 HTML element들의 animation을 제어할 수 있으므로, 이 기능을 사용하면 우리가 좀더 동적인 웹페이지를 구성할 수 있을것이다. 앞으로 살펴볼 jQuery Effect들 중에서 가장 처음으로 다룰 주제는 Hide/Show 기능이다.이 기능은 단순히 element를 웹페이지에서 숨기거나 다시 보여지게 하는 기능이다.hide/show effect를 구현하는 함수 syntax는 다음과 같다. $(selector).hide([duration][,callback]);$(selector).show([duration][,callback]);$(selector).toggle([..
우리가 만든 웹페이지에 동적인 역할을 부여하기 위해서는 여러가지 Event에 대한 이해와 사용능력이 필요하다.수많은 Event들 중에서 가장 기본적인 Mouse events를 알아보자. Mouse event의 종류는 위와 같다. (출처: https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events) auxclick: 이 이벤트는 마우스 왼쪽버튼을 제외한 다른 버튼을 클릭했을 때 작동한다. 오른쪽 버튼, 휠버튼, 다른 매크로 버튼 등이 이 이벤트를 작동시킨다. click: 마우스 좌클릭에 의해 작동된다. contextmenu: 마우스 우클릭 시 나오는 context menu가 사용자의 화면에 보여지기 전에 작동된다. dblclick: 더블 클릭시 작동..
이 글에서 다룰 내용은 Express를 이용해 웹페이지를 구현하기 위해 가장 기본적인 Routing 방법이다.먼저 전체 코드를 본 뒤 하나씩 알아가보도록 하자.var express = require('express');var app = express(); var getHtml = function(title,style,subtitle,description) { return `doctype html> ${title} ${style} ${subtitle} ${description} `;} app.get('/',function(request,response) { var title = 'Example'; var subtitle = 'This is Subtitle'; var description = 'This is..
