본문 바로가기

전체보기

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 더보기
JQuery Basic 12강 - each() 이번에는 each() 메소드를 사용해보도록 하겠습니다. └ 접기자바에는 for, while 반복문이 있습니다. 자바스크립 또 한 for 문이있습니다. 그러나 jQuery에는 새로운것이있습니다. 바로 each() 입니다. each() 메소드의 parmeter 즉 인자 값으로 callback 메소드를 줄일 수 있습니다. 시작하겠습니다. 준비된 소스를 보시죠. 에 사용할 내용을 입력하겠습니다. 태그에 4개의 내용을 입력하였습니다. 그리고 each를 사용해보겠습니다. i 라는 변수에 초기값을 0으로 설정합니다.document에 ready로 태그에 each(forEach)로 작동시킵니다.함수 forEach를 tis의 attr로 속성값 class 를 fromjQuery + i 로 부여합니다.i 변수에 +1 을 더합.. 더보기
jQuery Basic 11강 - slideUp() & slideDown() 이번에는 slideUp(), slideDown()을 사용해보겠습니다.바로 슬라이드 기능을 가진 메소드입니다. 소스를 보시죠. Click It Lorem ipsum dolor sit amet, consectetur adipiscing elit. 위와 같은 상태에서 시작하겠습니다.그리고 스크립트를 짜넣어보겠습니다. document(화면)를 클릭하면 태그에 toggle(first, second)을 실행시킨다.first 함수의 slideDown()메소드를 slow하게 실행시킨다. second함수의 slideUp()메소드를 slow하게 실행시킨다. 결과. 더보기
jQuery Basic 10강 - fadeIn() & fadeOut() & fadeTo() 이번에는 toggle()과 fadeIn() & fadeOut()와 fadeTo()를 사용해 보도록 하겠습니다. 먼저 준비된 소스를 보시죠. Click It Welcome to small95 blog ~ 현재 태그안에 위와 같이 입력하였습니다.그리고 이제 스크립트 소스를 짜보겠습니다. 맨 위 부터 태그를 .ready 실행할 때 태그에 toggle(first, second)를 적용해라.함수 first()는 태그에 fadeOut를 slow하게 적용해라.위와 같습니다. 자 확인 해보겠습니다. 위와 같이 Welcome small95 blog ~ 라는 문구가 자동으로 사라졌다 보일것 입니다. 이제 fadeTo()를 사용해보겠습니다. 결과. 더보기

티스토리툴바