윤인성 모던 웹을 위한 JavaScript + jQuery 입문 3판 74강 - 플러그인 > javascript

javascript

자바스크립트 강의 리스트

윤인성 | 모던 웹을 위한 JavaScript + jQuery 입문 3판 74강 - 플러그인

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
윤인성님의 javascript강의 청각장애인을 위한 자막
15444120723975.jpg

 안녕하세요 모던 웹을 위한 자바스크립트 제이쿼리 입문 3판 7강

되겠구요
이번 강의에서는 제이쿼리 플러그인 에 대해서 알아보도록 하겠습니다
지금까지 자바스크립트와 제이쿼리 에 시각적인 내용에 대해서 배웠는데요
지금까지 배운 내용을 활용을 하면 어떤 웹사이트에 특정한 페이지를 완전히
모방에서 구현할 수 있을 정도로 뭐 다양한 기술들을 습득하여 쓸 거라고
생각을 합니다
물론 지금 다 못 만들겠다 고 생각하시는 분들도 있는데요 실제로 지난번
했던 것처럼 웹사이트에 있는 기능들을 하나하나 모방을 하다보면 실력이
차근차근 늘어날 것이라고 생각을 합니다 그런데 어쨌거나 웹사이트에서는
자주 사용되는 기능들이 존재해요 예를 들어서 우리가 지난번에 살펴봤더니
이미지 슬라이더 도 굉장히 자주 사용되는 기능이 좀 그리고 뭐 핀터레스트
처럼 요러한 타일 형식으로 무언가를 출력 한다.는 건지 아니면 뭐 동영상을
재생 을 한다. 건지 않은 수많은 고정적인 형태의 무언가가 있는데요
그러한 것들을 우리가 플러그 인 이라는 것을 사용하면 쉽게 구현할 수
있습니다
플러그인은 정확하게 다른 사람들이 우리를 위해서 미리 구현 해 준 무언가
라고 볼 수 있겠는데요 그러한 것들을 한번 활용해 보도록 하겠습니다
일단 가장 처음에 살펴볼 플러그인은 인어 세이드 라는 플러그인이 인데요
요 플러그인이 좋아서 살펴본다 기 보단 사용 방법이 굉장히 쉽기 때문에
살펴보는 겁니다
어쨌거나 책에 있는 링크에 들어가 시계 되면 지금 화면과 같은 인어
세이드 플러그인이 나오게 되는데요
플러그인은 기본적으로 사이트의 사용 방법이 굉장히 자세하게 써 있고
사이트 어딘가의 다운로드 와 관련된 내용이 있습니다
그래서 아래쪽에서 제이쿼리 점 인어 페이지 점
집을 다운로드 해서 받아주시면 되겠구요 다운로드를 받게 되면 지금 화면과
같이 압축파일이 받아 지게 되는데 이 압축 파일에는 일반적으로 지금
화면과 마침 css 와 이미지
js 파일이 있고 예제로 사용될 인덱스 점 html 파일 등이 존재합니다
js 파일을 보게 되면 뭐 제이쿼리 점 인어 페이드 점 js 라는
제이쿼리 이즈 인 어 페이드 플러그인에 본체가 들어 있는걸 볼 수 있고요
이와 관련되서 css 로 jq 페이드 점 css 라는 녀석이 들어있어서
같이 사용을 해주면 좋겠다라는 식으로 들어있고 이미지에는 뭐 실제
플러그인에서 사용되는 이미지 또는 예제 로서 샘플로 써 제공되는
이미지들이 들어 있습니다 그래서 이러한 형태가 굉장히 고정적인 제이쿼리
플러그인 에 제공 방식이기 때문에 지역을 해주시면 좋겠습니다
플러그인의 사용방법은 사이트에 나와있는 경우도 있는데요 사이트 만으로
파악하기 힘들다 며 는 함께 제공되는 집 파일에 들어있는 인덱스 파일을
같은걸 열어보시면 됩니다
일단 내부를 보시게 되면
자바스크립트 파일을 추가하는 부분이 있는데요 제이쿼리 를 추가한 이후에
제이쿼리 점 인어 페이지 점 js 라는걸 추가를 해서 제이쿼리 파일을
읽어 들이고 있습니다
그래서 요 코드가 바로 기본적인 인어 페이드 플러그인에 사용 방법 이라고
보실 수 있겠습니다
그래서 우리도 코드 에다가 한번 두 녀석을 불러와 보도록 할게요
간단하게 정리 해 보았구요 자 시 인덱스 점 htm 파일을 보게 되면
제이쿼리 점
인어 세이드 라는 어떠한 메서드가 사용된 것을 볼 수 있습니다
이 인어 세이드 라는 녀석은 제이쿼리 가 기본적으로 제공하는 것니라
요 제이쿼리 플러그인 안에 들어있는 코드라고 볼 수 있겠는데요 간단하게
제이쿼리 점이 노 세이드 점 js 라는 걸 열어보게 되면 지금 화면과
같이 나와 있습니다
내부에서 인어 페이드 라는 녀석을 추가 하는 모습을 볼 수 있는데요
이녀석을 추가를 하기 때문에 우리가 요녀석을 활용을 하면서
인어 페이드 라는 메서드를 사용할 수 있게 되는 겁니다
어쨌거나 굉장히 다양한 옵션들이 정해져 있는데요
요란 옵션들을 활용하면 된다 라고 보고 사이트 있는 내용을 확인해서 책에
있는 예제를 한번 따라서 진행을 해보도록 하겠습니다
일단 채널 보게 되면 요 이후에 스크립트 태그를 하나 만들게 되는데요
스크립트 태그를 만들고 뭐 당연히 도큐먼트 점
레디 를 입력을 해서 제이쿼리 로 시작하는 부분을 구현을 하고 바디 태그
내부에는 ul 태그 하나와 에라이 로 이미지 태그를 여러개 만들었습니다
요거 같은 경우에는 지난번에 사용했던 이미지를 그대로 붙여넣은 것이라고
보시면 되겠구요
그냥 가지고 계신 이미지로 테스트를 하거나 책과 함께 제공되는 예제 a
들어 있는 이미지로 테스트를 해보시면 좋겠습니다
어쨌거나 ul 태그 안에다가 인어 페이드 라는 이름의
아이디를 부여 를 하도록 하겠고요 이렇게 만들어진 이후에
스크립트에서
저 인어 페이드 라는 녀석을
선택을 해 주신 다음에 인어 페이드 라는
메서드를 호출해 주시면 됩니다 참고적으로 자동완성 기능이 지금 잠시
작동을 안하는데
참 자동완성 기능이 작동을 안 하실 땐 보커 딱히 시거나 하는 작동을
하거든요 그래서 커다 키시면 작동하는 모습을 볼 수 있을 겁니다
어쨌건 이렇게 인어 페이드 를 쓴 다음에 다양한 속성을 지정 을 하게
되는데요 체계 표 17 다시 팔에 나오는 것과 같은 옵션을 지정할 수
있습니다 간단하게
기본 옵션을 지정해서 사용해보도록 하겠구요 인터페이스가 아닌 라이너 쎄이
되죠 그래서 이렇게 지정을 하고 코트를 한번 실행해 보도록 하겠습니다
지금 화면과 같이 슬라이드가 일어나면서 이미지가 전환되는 모습을 볼 수
있습니다
어쨌거나 이렇게 간단한 사용 방식으로 지난번에 보았던 이미지 슬라이더 와
거의 유사한 녀석을 만들 수 있는데요
플러그인을 사용하면 다른 사람들이 미리 만들어 놓은 코드를 이렇게 간단한
매 써도 호출 만으로 사용할 수 있다라고 기억을 해 주시면 좋겠습니다
책을 보게 되면 이제 제이쿼리 를 다 배운 이후에 플러그 인들을 망
사용을 하게 되는데요 그 플러그인을 다양하게 책의 내용을 보면서 공부를
해보시면 좋을 것이라고 생각을 합니다
사실 요거를 강 의해서 진행을 하게 되면 그냥 뭐 공식사이트 보고
공식사이트 어디에 있는 내용을 따라서 그냥 진행하는 수준밖에 되지 않을
것 같아서 플러그인을 따라하는 내용은 생략하도록 하겠습니다
그럼 어쨌거나 플러그인을 어떠한 형태로 찾느냐 에 대해서 살펴보도록
하겠는데요
제이쿼리 플러그인 이라고 인터넷에 7시 게 되면 굉장히 다양한 플러그인
들의 나오게 됩니다
일단 기본적으로 제이쿼리 플러그인 레지스트리에 보게 되면 굉장히 다양한
플러그인이 나와있는데요
사실 제이쿼리 가 조금 오래 되긴 했죠 그래서 오래된 플러그인 드리지만
j 커리가 번성했던 기간이 굉장히 길기 때문에 굉장히 다양한 플러그인
들이 거의 다 나와있다 고 할 수준으로 말할 수 있어요 그래서 코드를
살펴 보시면서 이러한 것은 어떻게 구현을 한다.는 것도 살펴보시면 좋을
거라고 생각을 합니다
어쨌건 그런데 글자만 보고서는 뭔가 내가 뭘 어떻게 부르는지 적을 적
플러그인 무엇을 하는 플러그인 인지 이해하기 힘들 때가 있거든요 그럴
때는 뭐 제이쿼리 플러그인 베스트라고 치 시 거나 아니면 뭐 탑텐 이라고
70원 하게 되면 다양한 제이쿼리 플러그인 이 나오게 되거든요 그래서
요러한 제이쿼리 플러그인을 살펴보면서 이러한 것을 뭐라고 부르는지 등을
확인해 보시면 좋을 거라고 생각을 합니다
예를 들어서 얼굴을 감지하는 플러그인은 뭐 페이스 디텍션 플러그인 이라고
부르게 했고 이렇게 뱅글뱅글 돌면서 0% 에서 100% 까지 차는 그런
녀석들은 올라운드 슬라이더 라고 부른다
뭐 이러한 이름들이 있으니까 확인을 해보시면 좋을 거라고 생각을 합니다
그럼 마지막으로 제이쿼리 플러그인 은 어떻게 만드는지 에 대해서
살펴보도록 하겠는데요
3 개장은 20장 이 되겠고 한번 읽어 보신 이후에 함께 진행을 해주시면
좋을 거라고 생각을 합니다
어쨌거나 스크립트 태그를 별도의 파일로 이렇게 만들었다고 가정을 하고
그냥 요 위에 다 작성하도록 할게요 일단 우리가 만들 플러그인 이름은
예제 있기 때문에 굉장히 간단한데 글자를 붉게 만드는 레더 라는
플러그인을 만들어 보도록 하겠습니다
사실 굉장히 의미가 없는 플러그인 같긴 하지만 공부 용으로 그냥
사용해보도록 할게요
어쨌거나 a 사용 방법을 먼저 정의 하는 게 중요하다 그리고 생각을
하는데요
h1 을 입력을 하고 레더 라고 입력을 하고 괄호를 열고 닫으면 글자를
붉게 만들어 보도록 하겠습니다
이렇게 만든다고 정의를 하고 나면 그때부터 코드를 구현을 해 주시면
되는데요
제이쿼리 점 fan 점 레더 라고 지정을 해 주시면 됩니당
fn 이라는 속성이 무언가를 넣게 되면 그게 바로 제이쿼리 객체에서
사용할 수 있는
메서드로 들어가게 됩니다 그래서 이 안에서
디스 앤 css 를 칼라 레드 로 변경을 하게 되면 이 코드가
자동적으로 구현이 됩니다 뭐 굉장히 간단한 코드 인데 정말로 그렇게
실행이 되는지 확인해 보도록 하겠습니다
실행해보면 요 색상이 붉은 색으로 변하는 모습을 볼 수 있습니다
따라서 fn 이라는 속성을 사용해서
제이쿼리 플러그인을 우리도 직접 구현할 수 있다라고 생각을 해 주시면
되겠습니다
어쨌거나 지금까지 제이쿼리 와 관련된 내용을 대부분 알아보았고 이 책에서
프론트엔드 와 관련된 내용이 모두 끝났다고 볼 수 있는데요
프론트엔드 라는 용어를 모르시는 분들의 대해서 언급을 하게 되면 사용자와
가까운
사용자 바로 앞에 있는 것을 우리가 프론트엔드 라고 부르게 됩니다
그리고 사용자와 멀리 있는 것 오히려
모 회사와 가까운 것을 우리가 빽 & 라고 부르게 되는데요
우리가 파트 3 부터는 이제 - 엔드의 내용을 배우고 그 빽 엔드 와
프론트엔드 가 어떻게 통신을 할 것이냐는 에이젝스 에 대해서 배우게
됩니다
어쨌거나 오늘 강의는 여기까지 되겠고요 사실 지금까지 배운 내용이 정말
많고 정말 많이 활용할 수 있고 이 내용들만 으로 파생되는 직업이 정말
여러개 거든요 그래서 여러가지
연습을 해보시면 좋을 것이라고 생각을 합니다
그럼 다음 강의에서 뵙도록 하겠습니다 감사합니다

댓글 0개

등록된 댓글이 없습니다.

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu