Skills/Web 썸네일형 리스트형 hover (mouseover, mouseout) hover() 란?마우스 포인터가 mouseover, mouseout 시 두개의 핸들러를 bind한다. $(document).ready(function() { $("tag").mouseover(Mouseover);$("tag").mouseout(Mouseout); function Mouseover(){Action} function Mouseout(){Action} 더보기 HTML5 & CSS3 & jQuery - 하부고정 슬라이드 HTML5 & CSS3 & jQuery - 하부고정 슬라이드 [HTML5] 결과. [CSS3] 결과. [jQuery] 결과. Floract Quiver 클릭 시 아래 하단에 슬라이드가 표시됩니다. 그리고 다시 Floract Quiver 과 Down This Panel 를 클릭하면, 하단슬라이드가 사라집니다. 최종소스 RintIanTta jQueryLesson Floract Quiver [32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam remaperiam eaque ipsa, quae ab illo inventore veritatis et quasi archit.. 더보기 jQuery & CSS3 & HTML5 - 슬라이드(Slider) jQuery & CSS3 & HTML5 - 슬라이드(Slider) [HTML + CSS]소스 Slider 태그에 id 를 부여하였습니다. 그리고 CSS 부분 태그는 가운데 정렬 해주고 이미지의 크기를 한정해주었습니다.그리고 태그의 src="" 경로는 아래 처럼 넣어주셔서 사용해주시면 됩니다. 결과 을 더 주어보겠습니다. 결과. 모든 그림들이 한 곳으로 겹쳐있는 것 입니다. article 를 왼쪽으로 분여줌으로 써 수평으로 정렬하였습니다. 이제 간단한 버튼을 만들어줌으로써 구현을 해보겠습니다. LeftArrow 와 rightArrow 를 Click 할 경우 toLeftButtonClick() 와 toRightButtonClick() 함수를 호출합니다. numberOfArticle 이라는 변수를 만들어 ar.. 더보기 jQuery + CSS3 + HTML5 - 레이어 팝업(Layr popup) jQuery + CSS3 + HTML5 - 팝업(Popup) [HTML5] 간단하게 설명하기 위해서 클래스나 아이디, 이름을 사용하지 않았습니다.실제로 작업하실 때 에는 다 사용하시기 바랍니다. 결과. [CSS3] 웹 표준성을 맞춰주기 위해서 항상 display 를 주시기 바랍니다. 결과. [jQuery] document 를 실행한다., 태그를 클릭 시 (headerClick)를 실행. 태그를 클릭 시 (sectionClick)를 실행 headerClick 함수documentWidth 에 화면의 Width 값을 넣는다.documentHeight 에 화면의 height 값을 넣는다.willLeft 에 documentWidth 값의 / 2 - 150 값을 넣는다.willTop 에 documentHeight .. 더보기 jQuery + CSS3 + HTML5 - 아코디언 지금부터 jQuery 아코디언을 만들어보겠습니다. 순서는 HTML -> CSS -> jQuery 입니다. [HTML] 결과. [CSS] 결과. [jQuery] 결과. 전체소스 RintIanTta jQuery Lesson Accordion jQuery + CSS + HTML - 아코디언 jQuery 지금부터 jQuery 아코디언을 만들어보겠습니다. 순서는 HTML -> CSS -> jQuery 입니다. 더보기 jQuery Basic 17강 - hasClass() 오늘은 hasClass()를 사용하겠습니다. └ 접기.hasClass( className )는 참, 거짓으로 판단하게 됩니다. 검색할려는 className이 존재하였을 때 True을 return하고 존재하지 않을 때 false를 return 하게 된다. 소스를 보겠습니다. RintIanTta RantIanTta IanKelRaucTta HaraRect VhenSiliate 소스를 짜보겠습니다. document 의 접근 시 실행하라. 태그를 클릭할 시 whenClick를 실행하라. .toggleClass 메소드의 ClassName이 forToggle 이다..hasClass 메소드가 forToggle 이라는 ClassName이 있을 경우, true 값을 리턴 시킨다. if가 true일 경우, animate .. 더보기 jQuery Basic 16강 - Append & PrePend & After & Before AppendTo() 와 prependTo() 를 먼저 사용해보겠습니다. 소스. RintIanTta RantIanTta IanKelRaucTta HaraRect VhenSiliate 결과. 태그를 클릭하시면 TC 가 위, 아래로 추가되는것을 확인하실 수 있습니다.그리고 분명 태그를 넣었는데 로 나옵니다. 그 이유는 바로 this 안에 TC가 들어갔다는 겁니다. 이번에는 insertAfter() & insertBefore 를 사용해보겠습니다. 소스. 결과. 이번에는 태그 그대로 뜹니다. 그 이유는 바로 태그 밖에 TC가 붙기 때문입니다. 이번에는 append()와 prepend()를 사용하도록하겠습니다. 소스. 결과. 클릭 시 앞 뒤에 TC이 붙는것을 확인 하실 수 있습니다. 이번에는 before() 와 a.. 더보기 JQuery Basic 15강 - append() & prepend() 이번에는 append() 와 prepend() 메소드입니다.append()는 마지막에 값을 추가해주고 prepend()은 맨 처음에 값을 추가해줍니다. 소스. RintIanTta RantIanTta IanKelRaucTta HaraRect VhenSiliate 태그 클릭시 whenClick 함수를 실행합니다. 그리고 whenClick에서 this에 append 속성을 부여하고 + 값을 추가합니다. 결과. 클릭할 때 마다 글자끝에 + 가 증가하는거 보실수 있습니다. 이번에는 prepend()를 사용해보겠습니다. 결과. 더보기 JQuery Basic 14강 - before() & after() 이번에는 before() 와 after()를 사용해보도록 하겠습니다.전에 작업한 insertBefore() & insertAfter() 와 기능은 똑같습니다. 바로 소스를 보시죠. 사용하는 방식만 보시면 될것 같습니다. 그리고 이번에는 을 추가해보도록하겠습니다. 결과. 전체소스. RintIanTta RantIanTta IanKelRaucTta HaraRect VhenSiliate 더보기 JQuery Basic 13강 - insertBefore() & insertAfter() 오늘은 insertBefore(), insertAfter() 를 사용해보겠습니다. 이번 강의는 Ajax의 시작입니다.버튼을 누르면 동적으로 웹에서 내용을 받아와 웹화면에 뿌리는것을 만들 수 있것을 만들기 위한 연습입니다. 초기 소스입니다. RintIanTta RantIanTta IanKelRaucTta HaraRect VhenSiliate 이제 insertBefore()와 insertAfter를 써보겠습니다. Aut 내용을 insertBefore()메소드를 사용하여 태그에 적용하라.Cre 내용을 insertAfter()메소드를 사용하여 태그에 적용하라. 결과입니다. 전체소스. RintIanTta RantIanTta IanKelRaucTta HaraRect VhenSiliate 더보기 이전 1 2 3 4 다음
