css만을 사용해서 갤러리 이미지에 대한 마우스 반응을 설정할 수 있다. ':hover' 선택자를 이용하여 선택된 요소의 하위 자식요소들을 제어 하는 예제이다. ':hover' 선택자는 자기 자신요소 또는 하위요소까지 제어 가능하다. 만약 자기 자신요소 이외의 요소들을 제어 하기 위해서는 javascript 또는 jQuery로 제어 해야 한다.
css만을 사용해서 갤러리 이미지에 대한 마우스 반응을 설정할 수 있다. ':hover' 선택자를 이용하여 선택된 요소의 하위 자식요소들을 제어 하는 예제이다. ':hover' 선택자는 자기 자신요소 또는 하위요소까지 제어 가능하다. 만약 자기 자신요소 이외의 요소들을 제어 하기 위해서는 javascript 또는 jQuery로 제어 해야 한다.
가감승제의 간단한 계산기를 만들어 봄으로 해서 Javascript의 함수와 매개변수를 이해 하는데 도움이 되는 예제이다. 더불어서 지역변수와 전역변수의 개념을 이해 하는데도 도움이 된다.
간단한 스탑워치 기능을 구현한 예제이다. 시간과 관련된 객체를 이용하여 어떻게 활용할 수 있는지 볼 수 있다. 특히 'Date()' 객체는 활용도가 높기 때문에 알아 두면 좋다. 'setInterval()'메서드를 시작하는 방법과 종료하는 방법등도 알아 두어야 한다.
'select'요소를 이용한 점프메뉴 예제이다. 이벤트를 어떻게 활용하는지 보여주는 예제이다. 'change' 이벤트와 'click'이벤트 2개를 사용했지만, 'change' 이벤트 만으로도 점프메뉴를 만들 수 있다.
네비케이션 영역의 서로다른 배경색 이동.
동일 요소의 겹침과 동시 transition사용(부모요소&자식요소)을 주의해서 봐야한다.
jQuery는 요소의 순서값을 추출해서 배경요소의 이동거리를 결정하는 방식으로 구현되어 있다.
세로 스크롤량에 따른 가로 막대 그래프 표현
화면의 아래방향으로 스크롤 했을때, 막대 그래픽가 화면의 중앙부근에 위치할때 그래프 상자에 배경색이 채워지는 형식이다.
크게 두가지 영역으로 코드로 분리해서 생각할 수 있다.
하나는 스크롤의 량을 체크하는 코드이고 다른 하나는 시간에 따른 배경색이 채워지는 코드이다.
'click' 이벤트 객체를 활용한 요소(Ball) 생성 및 삭제
두가지 영역으로 코드를 분리해서 생각할 수 있다.
하나는 클릭한 지점의 좌표값을 추출하여 해당 위치에 요소를 생성하는 것이고,
다른 하나는 생성된 요소를 다시 클릭했을 때 사라지게 하는 코드이다.
따라서 빈 공간에서 클릭하면 요소를 생성만 되고, 요소 위에서 클릭하면 클릭된 요소가 사라지면서 새로운 요소가 그 자리에 생성된다.
이미지 겔러리 slider UI
가장 일반적으로 볼 수 있는 UI형태이다.
플러그인을 사용해서 구현해도 무관하지만, 직접 제작해 봄으로써 slider에 표현을 좀 더 풍부하게 만들어 낼 수 있다.
코드는 함수와 제어문 그리고 이벤트 연결등 복합적으로 사용하고 있으므로 실력향상에 도움이 될것이다.
콘텐츠 swiper UI (데스크탑용 테스트)
마우스 드래그 이벤트 모형을 테스트한 예제이다. 마우스 이벤트를 사용했으므로 모바일에서는 작동이 되지 않는다.
만약 모바일에서 작동을 원한다면, jQuery Mobile 라이브러리를 활용해서 제작이 가능하다.
