웹 디자인 & 포토샵 : : 제이 쿼리 CSS 를 이용 해서 Div 요소 를 좌우 로 슬라이딩 애니메이션 하 기 
 작성 일자 2011 . 09 . 24 04 : 30 
 이전 글 에서 하나 의 버튼 으로 두 가지 기능 을 하 는 토글 효과 를 이용 한 슬라이딩 메뉴 를 알아보 았 는데 이것 은 html 요소 를 위 아래 로 만 감추 거나 나타나 게 하 고 좌우 로 슬라이딩 효과 를 주 려면 제이 쿼리 의 animate 기능 을 이용 합니다 . 화면 밖 에 감추 었 다가 버튼 을 클릭 하 면 화면 안 으로 나타나 게 하 는 슬라이딩 애니메이션 효과 를 알아봅니다 . 
 / / 제이 쿼리 타 겟 대상 으로 이 div 에 대해서 애니메이션 합니다 . 포지션 은 고정 위치 로 스크롤 해도 정지 되 어 있 습니다 . left 는 화면 좌측 끝 을 의미 하 고 - 200 픽셀 이 니까 화면 밖 으로 나가 있 습니다 . top 은 화면 상단 으로부터 45 % 에 위치 합니다 . 
 / / 버튼 과 좌우 로 나란히 있 게 하 기 위해 float 를 사용 합니다 . 
 버튼 이미지 는 두 개 를 사용 하 는데 하나 는 열리 고 다른 하나 는 닫 을 때 나타나 는 이미지 입니다 . 
 / / 구글 의 제이 쿼리 라이브러리 를 사용 하 면 서버 에 제이 쿼리 를 별도 로 설치 할 필요 가 없 습니다 . 
 jQuery ( "# button " ). toggle ( 
 이 글 이 도움 이 되 셨 다면 추천 ↑ 부탁 드립니다 . 
 에디터 에 코드 를 입력 하 고 웹 브라우저 에 실행 하 면 아래 데모 링크 처럼 잘 되 는데 블로그 에서 는 열리 고 닫 는 두 개 의 이미지 가 나타나 지 않 아서 하나 의 이미지 를 사용 했 습니다 . 
 slideleft 2 . html 
 오른쪽 에 배치 할 경우 의 파일 은 아래 를 사용 하 면 됩니다 . 
 slideright . html 
 CSS 제이 쿼리 를 이용 한 다이내믹 메뉴 바 - CSS Dock Menu ( 2 ) 
 간단 한 세로 형 네 비게 이 션 바 - CSS , 제이 쿼리 ( 8 ) 
 Tag it , 애니메이션 , 제이 쿼리 
 wlfltksdidvk 2011 . 09 . 24 17 : 17 신고 
 정말 감사 합니다 ! .. 다만 . . ㅠㅠ 버튼 이미지 는 어떻게 해야 하 나요 . . 
 이미지 가 안 나옵니다 ㅠㅠㅠ 
 베누시 안 2011 . 09 . 24 17 : 29 신고 
 버튼 이미지 업데이트 했 습니다 . 같 은 폴더 에 넣 고 하 면 됩니다 . 
 wlfltksdidvk 2011 . 09 . 24 18 : 21 신고 
 저 는 레이아웃 . html 파일 에 소스 ( ? ) 를 넣 고 gif 파일 은 그 html 이 있 는 파일 바로 앞 에 올려 놨는데 . . 
 그리고 위 소스 를 추가 하 면 캐시 파일 재생성 , 설정 , 페이지 수정 이게 한쪽 으로 몰리 는 현상 이 . . ㄷ ㄷ 
 wlfltksdidvk 2011 . 09 . 25 00 : 28 신고 
 한쪽 으로 쏠리 는 문제 는 페이지 에 이름 이 content 여서 한쪽 으로 쏠렸 던 거 같 습니다 . 
 베누시 안 2011 . 09 . 25 00 : 33 신고 
 xe 에 대해서 공부 할 수 있 는 곳 이 있 으니 참고 하 세요 . http : / / www . xeschool . com / xe / 
 또한 CSS 에 대해서 잘 아셔야 웹 페이지 만드 는 데 쉬워 집니다 . 
 wlfltksdidvk 2011 . 09 . 25 00 : 55 신고 
 그래두 감사 인사 는 하 고 싶 어서 글 남 깁니다 . 
 베누시 안 2011 . 09 . 25 01 : 35 신고 
 댓글 다 는데 차단 되 든가요 ? 영어 로 쓴다든가 하 면 글쓰기 가 안 된답니다 . 저 도 시험 해 봤 는데 영어 로 쓰 니까 차단 되 더군요 . 
 epqk 2011 . 09 . 25 02 : 47 신고 
 몇 가지 제 가 몰랐 다가 알 았 던 내용 두 개 추가 한 건데 여기 추가 해 주 셨 으면 좋 겠 네요 
 많 은 도움 주 셔서 감사 합니다 
 베누시 안 2011 . 09 . 25 03 : 17 신고 
 안녕 하 세요 . 어떤 내용 을 추가 하 는 건지 . . 자세히 좀 . . 
 epqk 2011 . 09 . 25 04 : 14 신고 
 저 위 댓 굴 썻던 wlfltksdidvk 구요 url ( 주소 ) 이 부분 하 고 div 아래 주석 처리 로 설명 글 달 앗 어요 혹시 저 같이 찾 는 분 이 있 을까 봐 
 베누시 안 2011 . 09 . 25 10 : 59 신고 
 아 . . 그랬 군요 . 누구 신가 했 더니 . . 제 가 쓴 글 은 어차피 대략 적 인 내용 이 구 세부 적 인 내용 수정 은 CSS 로 하 면 됩니다 . br 태그 를 사용 하 면 두 칸 이나 내려가 므로 픽셀 단위 로 조정 하 기 위해서 는 margin - top 이나 padding - top 을 쓰 면 픽셀 단위 로 조정 이 가능 합니다 . 저 의 경우 는 뷰 온 버튼 바로 밑 에 위치 시키 기 위해서 그런 것 이 고요 . 그리고 주소 는 url 다음 에 오 는 것 이 상대 주소 인데 님 의 경우 처럼 절대 주소 를 사용 해도 됩니다 . 절대 주소 는 내 서버 가 아닌 다른 서버 의 내용 을 인용 할 때 사용 하 죠 . 내 서버 에 있 는 것 을 인용 하 고자 할 때 는 굳이 길 게 http 까지 안 넣 어도 됩니다 . 이미지 가 루트 의 images 폴더 에 있 다면 images / button . gif 로 하 면 되 구요 . . 댓글 감사 합니다 . 
 하하 2011 . 09 . 25 11 : 18 신고 
 martian 님 글 은 매우 유용 하 고 잘 되 네요 배우 고 갑니다 ~~ 
 epqk 님 좀 ㅎㅎ < br > 이라니 요 . css 를 더 배우 셔야 할 듯 요 
 베누시 안 2011 . 09 . 25 11 : 49 신고 
 epqk 2011 . 09 . 25 12 : 17 신고 
 꼭 css 를 쓰 란 법 은 없 으니까 적 어 놓 은 겁니다 ^_^ 
 2011 . 09 . 28 22 : 10 
 베누시 안 2011 . 09 . 29 00 : 01 신고 
 어떻게 따라다니 는지 어떤 상황 에서 그런지 설명 부탁 합니다 . 
 wlfltksdidvk 2011 . 10 . 02 20 : 50 신고 
 제이 쿼리 에 대한 다양 한 예제 강좌 ( ? ) 좀 많이 해 주 셨 으면 좋 겠 어요 ~ 
 제이 쿼리 를 이용 한 팝업 ( 모달 팝업 ) 이라든지 . . 
 시간 괜찮 으시 다면 포토샵 글 보다 제이 쿼리 글 을 . .. 
 베누시 안 2011 . 10 . 02 22 : 44 신고 
 현재 로서 는 포토샵 을 찾 는 분 들 이 많 기 때문 에 어느 정도 글 이 많 아 지 면 제이 쿼리 글 을 올립니다 . 아직 포토샵 관련 해서 반 도 못 올렸 네요 . 
 2011 . 10 . 03 22 : 26 
 베누시 안 2011 . 10 . 03 22 : 50 신고 
 단편 적 으로 어느 한 가지 만 아 실려고 하 지 말 고 책 을 하나 사서 공부 하 세요 . 전반 적 인 기초 를 아셔야 좋 습니다 . 단순히 궁금증 을 해결 하 는 것 보다 는 기초 부터 배우 세요 . 제 이 쿼리 는 자바 스크립트 가 기본 이 기 때문 에 자바 스크립트 를 우선 시작 하 는 것 이 좋 습니다 . 기초 부분 에 다 나와 있 는 것 들 입니다 . 또한 CSS 도 같이 해야 됩니다 . 자바 스크립트 나 제이 쿼리 가 단순 이 그 분야 만 다룰 수 없 기 때문 에 CSS 가 포함 됩니다 . 단편 적 인 지식 은 지금 안다고 해도 얼마 지나 지 않 아 까먹 습니다 . 
 2011 . 10 . 03 22 : 56 
 베누시 안 2011 . 10 . 03 23 : 52 신고 
 인터넷 서점 을 둘러 보 니 제대로 된 CSS 책 이 없 네요 . 그런 상황 에서 아직 사용 하 기 도 힘든 CSS 3 에 대한 책 이 많 군요 . 저 는 외서 로 공부 해서 책 을 추천 하 기 는 힘들 지만 다행 이 Head First 번 역서 가 있 네요 . 헤드 퍼스트 는 그림 이 많 고 잡다 한 설명 이 있 어서 별로 지만 초보 자분 들 에게 는 좋 으리라 생각 됩니다 . 책 을 보 면서 직접 코딩 하 고 기억 하 기 어려운 것 은 항상 메모장 을 열 고 메모 하 세요 . 나중 에 메모 만 봐도 어떤 내용 인지 기록 도 하 다 보 면 나중 에 참고 할 때 찾 기 쉽 습니다 . 메모 가 배우 는데 가장 빠른 길 입니다 . 메모 안 하 면 나중 에 찾 기 도 어렵 습니다 . 
 2012 . 07 . 25 10 : 41 
 베누시 안 2012 . 07 . 25 13 : 51 신고 
 추가 한 파일 을 참고 하 세요 . 
 2012 . 08 . 03 18 : 05 
 2012 . 08 . 20 13 : 33 
 개 나리 2013 . 05 . 22 11 : 05 신고 
 소스 감사 합니다 . 웹 페이지 에 적용 해 보 니 위치 도 맞 게 들어갔 는데 하 단 스크롤바 가 생기 네요 . .# effect 에 overflow : hidden 도 추가 해 봤 는데 . . 변함 이 없 네요 . . 근데 이 소스 를 HTML 상 아무데나 위치 시켜 도 상관없 는 건가요 ? 
 베누시 안 2013 . 05 . 22 13 : 44 신고 
 위 스타일 시트 에 는 하단 스크롤바 가 만들 어 질 만한 코드 가 없 는데요 . 원래 사이트 의 스타일 시트 를 점검 해 보 세요 . 그리고 배치 는 스타일 시트 로 하 면 됩니다 . 
 stella 2013 . 07 . 27 14 : 41 신고 
 제 가 현재 만들 고 있 는 홈페이지 jquery - 1 . 9 . 1 . min 버전 인데요 . .. 
 이 안 에서 는 올려 주 신 움직임 이 제대로 작동 하 지 않 아서요 . 혹시 어떻게 수정 해야 사용 할 수 있 을까요 ? 제 가 파 일 명 조정 하 는 수준 이 고 , 함수 를 스스로 작성 해서 고치 는 수준 이 아니 라서 . .. 
 급한 대로 제이 쿼리 책 을 사 서 토글 부분 을 봐도 , 어떻게 응용 해야 할지 잘 모르 겠 네요 . ^^ 
 딱 제 가 생각 하 는 움직임 이 라서 꼭 부탁드립니다 ~ 
 베누시 안 2013 . 07 . 28 07 : 15 신고 
 제이 쿼리 플러그인 은 기반 으로 사용 하 는 제이 쿼리 버전 이 다르 면 제대로 나오 지 않 을 수 있 으니 이전 버전 을 사용 하 세요 . 
 초보 개발자 2017 . 03 . 26 16 : 24 신고 
 안녕 하 십니까 . 소스 보 고 열심히 따라 해 봤 습니다 . 혹시 궁굼 하 게 있 어서 여쭤 봅니다 . 
 jquery - 3 . 2 . 0 . min . js 버전 을 사용 하 고 있 는 데 3 . 2 . 0 을 쓰 니깐 안 됩니다 . 혹시 3 . 2 . 0 에 맞 는 건 없 을까요 ? 
 답변 제발 부탁드립니다 좋 은 하루 보내 십쇼 !