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

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

clock

Share the joy
  •  
  •  
  •  
  •  

jQuery UI를 활용한 Drag & Drop 예제

아래 예제는 jQuery UI를 활용한 Drag & Drop 예제이다. 화면에 4개의 그림이 한 줄로 표시된다. 각각의 그림은 food, city, sports, animals를 나타내는 가로/세로 100px인 임의의 이미지가 표시된다. 그림들 아래에는 4개의 빈 사각형이 표시되고 각각에는  food, city, sports, animals 라는 텍스트가 임의의 순서로(새로고침 할 때마다 위치가 바뀜) 표시된다.  이 프로그램은 위의 이미지 중 하나를 끌어다 아래의 […]

Share the joy
  •  
  •  
  •  
  •  

Javascript vs jQuery

5개의 이미지가 있다. 이 이미지들이 차례로 왼쪽에서 오른쪽 방향으로 움직인다. 화면에 보이는 하나의 이미지가 오른쪽으로 서서히 이동하고 동시에 다음 이미지가 앞의 이미지를 따라 나타난다. 이 과정이 반복되며 마지막 이미지가 슬라이드 되면 다음 이미지는 첫 번 째 이미지가 된다.  이것을 보통 슬라이드라고 한다. 웹 페이지에서 이와 같은 슬라이드 효과를 만들려면 javascript를 사용해야 한다. 여기서는 아래 제시된 […]

Share the joy
  •  
  •  
  •  
  •  

HTML 5 기본 페이지 구성 코드

다음 코드는 html 5로 구성한 초간단 페이지 코드이다.

이 문서는 상당부분 http://www.sitepoint.com/a-basic-html5-template/ 의 설명에 기초하고 http://www.w3schools.com/의 여러 문서들을 참조하여  작성하였음을 미리 밝힌다.  html 5는 이전 버전인 xhtml이나 HTML 4와는 기본적인 개념에서는 같지만 상당한 변화가 이루어졌다. 그 변화가 무엇인지 기본적으로 살펴보기로 하자.   doctype html에서 doctype은 Tag는 아니며 웹 문서가 어떤 버전의 html을 사용하고 있는지를 브라우저에게 알려주기 […]

Share the joy
  •  
  •  
  •  
  •