PSE's blog

[jQuery] PRACTICE 23 - JO MALONE 홈페이지 레이아웃

연습문제 - 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라. PhotoViewer : 2초마다 이미지가 자동으로 슬라이드, 마우스 포인터가 이미지 영역에 있으면 슬라이드 정지, 포토뷰어 오른쪽 아이콘을 클릭할 때마다 이미지 한 개씩 넘어가는기능 중간 배너 이미지와 푸터 영역은 스크롤을 내려도 고정되게끔 구현 풀이 (PhotoViewer) 1. #slide 요소의 이미지 슬라이드 기능 1.1. 일정한 시간마다 1.2. #slide 요소를 li 요소의 너비만큼 왼쪽으로 이동시킨다. 1.3. #slide 요소의 움직임이 끝나면 1.4. #slide 요소에 설정했던 스타일 속성을 제거하고 1.5. #slide 요소의 첫 번째 자식 요소를 #slide 요소의 마지막으로 옮긴다. 2. #goo..

[jQuery] PRACTICE 22 - 글자 효과 프로그램(typing, animation)

연습문제 - 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라. 글자가 차례대로 타이핑되는 것 처럼 보이는 JavaScript 프로그램 작성 타이핑이 다 되면 글자 밑에 있는 커서가 깜박이는 기능 추가 풀이 1. #effect 요소의 내부 문자를 한 글자씩 잘라낸다. 1.A. String 객체의 charAt 메서드를 이용 1.B. String 객체의 split 메서드를 이용 2. #effect 요소의 내부 문자를 제거한다. 3. 한 글자씩 자라놓은 문자들을 #effect 요소에 추가한다. 3.A. 모든 문자들을 보이지 않게 추가해놓고 한 글자씩 보이게 한다. 3.B. 순차적으로 글자를 하나씩 #effect 요소에 추가한다. → A가 더 편한 방법이므로 A로 JavaScript 프로그램을..

[jQuery] PRACTICE 21 - 아코디언 목차 프로그램

연습문제 - 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라. 제목(h2)와 본분(p)을 포함하는 여러 섹션(section)이 있는 HTML 문서 작성 본문은 숨겨져 있고 제목을 클릭하면 본문이 슬라이드가 내려오며 나타나거나 올라가며 사라지도록 하는 JavaScript 프로그램 작성 본문은 항상 하나씩만 열리도록 하는 기능 작성 (아코디언 효과) 풀이 1. #accordion 요소의 h2 요소를 클릭하면 1.1. #accordion 요소의 section 요소들 중에서 on 클래스가 설정되어 있는 요소를 찾아 1.2. 그 요소의 설정했던 on 클래스를 제거하고 1.3. 그 요소의 자식 요소 중 p 요소를 접어서 사라지게 한다. 1.4. 클릭한 요소의 다음에 나오는 p 요소를 찾아서 1...

[jQuery] PRACTICE 20 - scroll event를 이용한 slide image 프로그램

연습문제 - 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라. 특정 위치까지 화면이 스크롤되면 지정한 컨텐츠를 화면에 표시 풀이 1. 브라우저가 스크롤되면 2. 스크롤된 위치를 기반으로 "지정한 위치"를 구한다. 3. .section 요소의 img 요소들 중에서 4. 위에서 계산한 "지정한 위치"보다 위로 올라간 이미지 요소는 화면에 나타나도록 하고 5. 위에서 계산한 "지정한 위치"보다 아래에 있는 이미지 요소는 화면에 나타나도록 한다. ● HTML READY! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae metus ligula. In eget tristique tortor, et laoreet ipsum..

[jQuery] PRACTICE 19 - Box drawing animation

연습문제 - 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라. 화면이 특정 위치까지 스크롤 되면 직사각형의 각 변을 그리는 기능 풀이 1. 브라우저가 스크롤 되면 1.1. #box 요소의 테두리가 그려져 있지 않고 지정한 위치보다 아래로 스크롤 되면 1.2. #box 요소의 테두리를 그린다. 1.3. #box 요소의 테두리가 그려져 있고 지정한 위치보다 위로 스크롤 되면 1.4. #box 요소의 테두리를 제거한다. ● HTML READY! DONE! ● CSS ● script

[jQuery] STUDY 17 - jQuery 플러그인

1. jQuery 플러그인(★★★) 1) jQuery를 기반으로 특정 기능 기능을 제공하기 위한 라이브러리 2) 자주 사용되는 플러그인 jQuery UI 플러그인 (http://jqueryui.com) jQuery Mobile 플러그인 (http://jquerymobile.com) LightBox 플러그인 (http://lokeshdhakar.com/projects/lightbox2) FancyBox 플러그인 (http://fancybox.net) jQuery Validation 플러그인 (https://jqueryvalidation.org) jqGrid 플러그인 (http://www.trirand.com) 3) 참고자료 jQuery Plugin (https://learn.jquery.com/plugin..

[jQuery] PRACTICE 18 - 목차 이동 프로그램

연습문제 18 - 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라. 각각 제목(h2)와 본문(p)을 포함하는 여러 섹션(section)이 있는 HTML 문서 작성 문서의 우측에 각 섹션으로 이동할 수 있는 고정된 목차 작성 목차의 항목을 클릭했을 때 해당 섹션으로 부드럽게 이동하는 JavaScript 프로그램 작성 풀이 1. 목차를 표현할 요소를 생성한다. 1.1. 새로운 ol 요소를 생성해서 body 요소에 추가한다. 1.2. 각 .section 요소를 대상으로 1.3. id 속성 값을 만들어서, .section 요소에 id 속성을 대입한다. 1.4. 새로운 a 요소를 생성하고, 이 요소의 내부 문자를 .section 요소의 자식 요소 중 h2 요소의 내부 문자를 읽어와 a 요소의 ..

[jQuery] STUDY 16 & PRACTICE 17 - HTML 문서에서 요소의 위치 + 연습문제

1. HTML 문서에서 요소의 위치 구하기 메서드 이름 설명 offset() HTML 문서를 기준으로 요소의 상대적인 위치를 포함하는 객체 반환 offsetParent() 요소의 첫 번째 부모(offset parent)에 대한 jQuery 객체 반환 position() 요소의 offsetParent를 기준으로 요소의 상대적인 위치를 포함하는 객체 반환 SBS Academy Computer Art Web Publishing Course 2. 연습문제 17 - 다음과 같은 HTML 문서와 JavaScript 프로그램을 작성하라. 헤더와 내비게이션, 본문 영역을 갖는 HTML 문서 문서가 스크롤 되면 내비게이션 영역이 화면 상단에 고정되도록 하는 JavaScript 프로그램 풀이 1. #nav 요소의 위치를 ..

[jQuery] STUDY 15 & PRACTICE 16 - 마우스 휠 이벤트 + 연습문제

1. 마우스 휠 이벤트 이벤트 설명 wheel Chrome 56+, Firefox 51+, IE9+ 등의 브라우저에서 지원 $(window).on("wheel", function (event) { // deltaY obviously records vertical scroll console.log(event.originalEvent.deltaY); //up: -100, down: 100 if(event.originalEvent.deltaY < 0) { // wheeled up } else { // wheeled down } }); TOP Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at bibendum risu..

[jQuery] PRACTICE 15 - 블릿을 추가한 이미지 슬라이드

연습문제 15 다음과 같은 동작을 하는 HTML 문서와 jQuery를 이용한 JavaScript 프로그램을 작성하라. 여러 사진을 나열하고 그 중에서 사진 한 장만 보이도록 HTML 문서를 작성(이미지 슬라이드) 여러 사진이 순차적으로 돌아가면서 나오도록 하는 JavaScript 프로그램을 작성(문서 객체 이동과 animate 메서드 사용) 사진이 나타나는 영역의 아래쪽에 몇 번째 사진이 보이는 지 나타내는 블릿 추가 사진 영역에 마우스 커서가 올라가면 사진이 넘어가는 동작이 중지하고 마우스 커서가 벗어나면 다시 사진이 넘어가는 동작을 시작하는 기능 작성 풀이 1. 일정한 시간마다 1.1. #slide 요소를 사진의 너비만큼 왼쪽으로 이동시킨다. 1.2. #slide 요소의 움직임이 끝나면 1.3. #s..

[jQuery] STUDY 14 - 애니메이션 큐(Animation Queue)

1. 애니메이션 큐(★★★)란? - jQuery 효과 메서드는 애니메이션 큐(Queue)에 계속 누적 - FIFO(First In First Out) 예시 1) $("#box) .animate({ left: "+=100" }, 2000) .animate({ width: "+=100" }, 2000) .animate({ height: "+=100" }, 2000); 예시 2) 2. 애니메이션 큐 내용 제거 메서드 설명 clearQueue() 애니메이션 큐의 내용 제거 $(selector).clearQueue(); 예제) 3. 애니메이션 정지 메서드 설명 stop() 효과와 애니메이션을 정지 $(selector).stop(); $(selector).stop(Boolean clearQueue); $(selec..

[jQuery] STUDY 13 & PRACTICE 14 - 사용자 지정 시각적 효과 / 영화 포스터 슬라이드

사용자 지정 시각적 효과(★★★) 메서드 설명 animate() 사용자 지정 효과 생성 $(selector).animate(object); $(selector).animate(object, speed); $(selector).animate(object, speed, easing); $(selector).animate(object, speed, easing, callback); $(selector).animate(object, object); CSS 속성 - animate 메서드가 실행된 후 최종적으로 변할 스타일 속성 옵션 - duration, easing, complete, queue 등 연습문제 14 다음과 같은 동작을 HTML 문서와 JavaScript 프로그램을 작성하라. 여러 사진을 나열하고 그..