코드펜(codepen)에서 jQuery 사용 방법

안녕하세요. 티스토리에서 혹은 기타 블로그에서 코드를 작성할때,

보다 쉽게 코드와 결과를 보여줄 수 있는 사이트인 codepen을 많이 사용하실텐데요.

이러한 코드펜에서는 js파일에는 자바스크립트만 적용되다보니,

제이쿼리를 사용해주시려면 따로 셋팅을 해주셔야 합니다.

 

1.코드펜 접속

codepen.io/pen/

상단의 링크를 눌러 코드펜에 접속해줍니다.

그리고 표시해둔 'Start Coding' 버튼을 눌러줍니다.

 

그럼 위와 같은 화면이 나오며 이 화면내에서 html, css, js 코드를 적을 수 있습니다.

여기서 오늘 알아볼 제이쿼리 추가는 상단의 settings의 버튼을 눌러 적용할 수 있습니다.

 

위와 같은 팝업레이어창이 뜹니다.

그럼 JS 탭을 눌러주신 뒤 Add External Scripts/Pen에 위와 같이 jqurey를 눌러주시면 자동으로 CDN가 입력됩니다.

그리고 Close 버튼을 눌러주시면 제이쿼리가 적용이 됩니다.