https://youtu.be/8O6htF4tEho

예제 다운로드: https://goo.gl/Ft5uwB

[ 탭(tab)구현 방법 3 ]
- jqueryUI
- show, hide Option


에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#jquery, #tab, #index, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

 

 

반응형

https://youtu.be/r4JHvKFYzOc

예제 다운로드: https://goo.gl/jLR28m

[ 탭(tab)구현 방법 2 ]
- index() 활용
- hide, show
- eq


에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#jquery, #tab, #index, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

 

 

반응형

https://youtu.be/94K5cot4GVs

Sample Download: https://goo.gl/m6Un7W

[ 탭(tab)구현 방법 1 ]
- attr 활용
- hide, show

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #tab, #탭, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

 

반응형

https://youtu.be/EoTnanurO-I

예제 다운로드: https://goo.gl/iWtb6c

[ 헤더고정하기 Shrink ]
- 로고 변경하기
- 높이 변경하기
- 함수 작성
- fadeIn, fadeOut


에디터: notepad++
트위터: #eztoweb

#jquery, #Shink, #고정헤더, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

 

반응형

https://youtu.be/9Rtx8pDNaJ8

예제 다운로드: https://goo.gl/fW5PM5

[ 고정헤더 고급  ]
- 내용 복사, 추가, 이동
- 스크롤 부담 줄이기
- 내용의 높이

 

반응형

https://youtu.be/6XGofYERoC8

예제 다운로드: https://goo.gl/Q85HQ8

[ 헤더 고정하기 ]
 - 스크롤양 파악하기
 - 상단에서부터 요소까지의 거리 확인하기

 

반응형

https://youtu.be/xSOW5LnulFU

jQuery 13 [ Slideshow 고급 4/4] 인디케이터 활성화 표시하기, 자동으로 움직이는 슬라이드 구현하기

Sample Download: https://goo.gl/QMGPgR
(please check jquery 10th footage)

1/5 번째 예제: https://goo.gl/QMGPgR 에서 이어서 시청해주세요.

[ 고급 슬라이드구현하기 파트 4/4 ]
- 인디케이터 활성화 표시하기, 
 - 자동으로 움직이는 슬라이드 구현하기
- setinterval


Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #slideshow, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

 

반응형

https://youtu.be/4TZOCYBJ4Dw

1/4 번째 예제: https://goo.gl/QMGPgR 에서 이어서 시청해주세요.

Sample Download: https://goo.gl/QMGPgR
(please check jquery 10th footage)


[ 고급 슬라이드구현하기 파트 3/4 ]
- 인디케이터로 슬라이드 이동하기
- 좌우 버튼으로 슬라이드 이동하기
- hasClass, index()

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #slideshow, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

 

반응형

https://youtu.be/gyTogVzkOFA

1/4 번째 예제: https://goo.gl/QMGPgR 에서 이어서 시청해야 합니다.

Sample Download: https://goo.gl/QMGPgR
(please check jquery 10th footage)

[ 고급 슬라이드구현하기 파트 2/4]
- 변수 지정하기
- 슬라이드 배치하기
- pager 생성하기

Code Editor: Notepad++
http://alikerock.tistory.com/
Twitter: #eztoweb
https://github.com/alikerock/ezweb

#jquery, #slideshow, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

 

반응형

https://youtu.be/ykIkTMVBwWg

기본예제: https://goo.gl/QMGPgR

[ 고급 슬라이드구현하기 파트 1/4 ]
- HTML,CSS 작성하기
- 슬라이드 구조작성하기
- CSS 스타일 설정하기
- FLEX, POSITION


노트패드에 젠코딩 설치하기 링크 추가
https://youtu.be/JAWDbgoL-MY

스프라이트 이미지 위치 잡기 링크 추가
https://youtu.be/n98axuhWWrU

플렉스로 위치 잡기 영사 링크 추가
https://youtu.be/_PSy66fkQ7U



에디터: notepad++
티스토리 : http://alikerock.tistory.com/
트위터: #eztoweb

#jquery, #slideshow, #디자인, #웹퍼블리셔, #프론트엔드, #웹디자인기능사

반응형

+ Recent posts