email validation

요즘 SNS 등의 국제적인 사이트 뿐만 아니라 국내 수많은 사이트들이 가입하는 회원의 ID 대신 email을 수집하는 경우가 주류를 이루고 있다. 또한 email은 회원들에게 정보를 제공하거나 수집할 때 SNS와 함께 가장 유용한 방법 중 하나로 활용되고 있다. 따라서 회원가입 또는 로그인 단계에서 올바른 이메일 주소를 입력 받는 것은 그만큼 중요한 일이 되었다. email이 형식에 맞는지 체크하는 […]

Share the joy
  •  
  •  
  •  
  •  

CSS3 회전 속성과 javascript를 활용한 아날로그 시계

이 예제는 css3의 변환(transform)효과 속성을 활용하여 이미지의 회전 값에 변화를 줌으로써 아날로그 형태의 시계를 표현하는 것이다. 이 예제를 통해서 자바스크립트에서 시간을 다루고 css 속성을 변경하는 방법에 대해 익혀보자. IE의 경우 이 예제는 버전 9부터 작동한다. 아날로그 시계 코드

clock Share the joy    

Share the joy
  •  
  •  
  •  
  •  

JavaScript Fade In/Out 전환효과

이 글은 JavaScript와 CSS opacity 속성을 활용하여 Fade In/Out 효과와 함께 이미지를 전환하는 예제이다. 이 예제를 보기 전에 먼저 이 사이트의 아래 다른 글을 보면 도움이 될 것이다. css opacity(불투명도) DIV 슬라이더(javascript) 이 글에서는 먼저 순수 JavaScript를 활용해서 Fade In/Out 예제를 만들어보고 마지막에 jQuery를 활용하는 방법을 알아보기로 하자. jQuery와 같은 휼륭한 코드 절감 방법이 있음에도 […]

Share the joy
  •  
  •  
  •  
  •  

JavaScript란 무엇인가?

1. 웹 사이트를 멋지게 동작하게 하는 방법 오늘날의 웹 사이트는 사용자가 마우스 포인터를 움직이거나 휠을 돌려 스크롤에 변화를 주기만 해도 다양한 동작과 내용을 보여준다.  슬라이드 애니메이션이 그렇고, 마우스를 올리면 툭 튀오나오는 도움말이나 페이지를 이동하지 않고도 다른 내용을 화면에 불러다 보는 기능들은 이제 웹 페이지의 기본적인 기능으로 여겨진다. 이렇게 당연시 하게된 기능들은 어떻게 해서 가능한 것일까? 2000년 […]

Share the joy
  •  
  •  
  •  
  •  

DIV 슬라이더(javascript)

이 예제는 Javascript를 활용하여 div 또는 li와 같은 컨테이터(container) 객체에 슬라이드를 적용하는 예제이다. 이 예제에서 슬라이드를 적용하는 원리는 자바스크립트를 활용하여 컨테이터 객체의 왼쪽 좌표값을 정해진 시간 동안 정해진 값만큼 변경하는 방식으로 컨테이너가 슬라이드 되도록 하는 것이다. 슬라이드가 진행될 때는 현재 보이고 있는 장면이 한쪽으로 조금씩 좌표를 이동하고, 동시에 다음 장면이 이어서 좌표를 이동하여 마치 나중에 […]

Share the joy
  •  
  •  
  •  
  •