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..
JavaScript
세 번째로 알아볼 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", 혹은 숫자가 들..
두 번째로 알아볼 jQuery Effect는 Fade이다.이전에 포스팅했던 hide/show effect는 함수호출 시 element를 한번에 없어지게 하거나 나타나게 했다면,Fade는 투명도를 서서히 조절하며 element를 화면에 나타내거나 없앤다. Fade Effect 관련 함수는 다음과 같다. $(selector).fadeIn([duration][,callback]);$(selector).fadeOut([duration][,callback]);$(selector).fadeTo(duration,opactiy[,callback]);$(selector).fadeToggle(duration[,callback]); fadeIn, fadeOut은 element의 이름 그대로의 효과를 적용하고, fadeTo는..
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..
javascript에서 특정 태그, id, class를 가진 element에 접근하고 싶다면 어떻게 해야할까?querySelector(), querySelectorAll() 메소드를 통해서 특정한 element에 접근이 가능하다. See the Pen querySelectorAll() Example by EBEL21 (@ebel21) on CodePen. 위의 예제는 querySelectorAll() 함수를 이용해 특정 element의 색을 빨강색으로 바꾸는 예제이다. 첫 번째 input text에는 바꾸고 싶은 element의 tag, class, id의 이름을, 두 번째 input text에는 tag, class, id등 어떤 속성인지를 구분해 써준다. ex) A / tag, B / class que..
