[조코딩] 제이쿼리라는 js함수 라이브러리 활용하기, 제이쿼리ui, 부트스트랩 함수

 

먼저 기본 양식부터 만들자

index.html 형성 후 ! + tab키를 눌러주면 html 기본 양식이 만들어진다

제이쿼리 : https://jquery.com/

jQuery

제이쿼리 사이트에서 제이쿼리를 다운로드해서 제이쿼리를 사용하거나 

CDN을 통해 제이쿼리를 사용할 수 있다

자 그럼 위처럼 CDN을 복사한 뒤 index.html에 넣어보자

참고로 css는 head태그란에서 link태그로 연결한다.

자바스크립트는 body태그 최하단에서 script태그로 연결한다.

이제 사용할 제이쿼리(자바스크립트함수 라이브러리)를 찾아보자.

우선 활용할 동작이 hide, show이므로 구글검색창에 javascript hide show라고 입력하고 나타난 사이트로 들어가면 하단처럼 예제가 나온다.

그런데 더 찾아보면 toggle이라는 함수가 있다.

이게 우리가 찾던 기능과 가장 유사하므로 이걸 사용한다.

자, 자바스크립트 코드를 활용하는 방법은 다음과 같이 2가지

1. 별도의 자바스크립트 코드를 담을 파일을 만든 후 html파일과 연결

2. 그냥 html파일안에 자바스크립트코드를 작성.

우리 여기서 2번째 방법을 쓴다.

자바스크립트 코드는 script라는 태그 안에 만들어야 한다.

그 후 앞에서 복사한 toggle함수의 코드를 넣어준다.

그리고 사용할 이미지 파일에 id값을 추가하고

복사한 toggle함수를 하단처럼 일부분을 수정해서 이미지에 기능을 적용시킨다.

toggle함수를 대략 살펴보면 다음과 같은 구조로 작동되는 것을 알 수 있다.

추가로 제이쿼리 함수를 살펴보자.

또한 제이쿼리 UI를 살펴보자

이외에도 신기기능이 많은 제이쿼리 UI

추가로 codepen 코드펜 사이트에서도 여러가지 만들어진 함수들을 활용할 수 있다.

또한 부트스트랩에서도 사용된 자바스크립트 함수가 있다.

부트스트랩의 글을 읽어보면 하나의 예시에

사용된 라이브러리가 3개다.

jQuery, popper.js, 부트스트랩.

이 라이브러리 3개를 활용해서 다음 기능을 구현했다.