냐울당 햄버거 메뉴

목차

    반응형

    안녕하세요. 개자이너 씸플레이입니다.

     

    오늘은 코드펜에서 제이쿼리를 불러오는 방법을 알아보겠습니다. 이미지처럼 CDN을 불러와보겠습니다.


    1. 코드펜

    https://codepen.io/

     

    CodePen

    An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

    codepen.io

    코드펜 메인 화면

    코드펜에 접속

     

    • 위의 링크를 이용해 코드펜에 접속해주세요.

     

    코드펜 왼쪽 메뉴

    Pen 메뉴 선택

     

    • 화면 왼쪽에 메뉴 중 Pen 메뉴를 선택해 새 파일을 만들어줍니다.

    2. 세팅

    코드펜 새 파일 이미지

    세팅 클릭

     

    • 화면 위쪽에 있는 Settings 메뉴를 클릭해줍니다. 

    세팅창

    JS 선택

     

    • 세팅 창 왼쪽에서 JS 탭을 선택합니다.

    세팅창 JS 탭

    jQuery 검색

     

    • CDN을 검색하는 칸이 있는데 예시로도 이미 jQuery가 보이네요. 
    • 검색창에 jQuery를 검색해줍니다.

     


    3. jQuery 불러오기

    jquery 검색시 화면

    jquery 선택

     

    • 제이쿼리를 검색하면 가장 위에 jquery가 뜰 것입니다.
    • 3.5.1 버전이네요. 다른 버전이 필요하시다면 검색해주시고 아니라면 맨 위에 것을 선택합니다.

    추가된 cdn

    ②  추가된 jquery 확인

     

    • 제이쿼리를 선택하면 검색창 아래로 cdn이 추가됩니다.
    • 원하는 것이 추가되었는지 확인해주시면 됩니다. 

    저장 버튼

    ③ 저장하기

     

    • 마지막으로 세팅 창 오른쪽 아래에 있는 Save & Close 버튼을 클릭합니다.
    • 저장이 되면서 창이 닫히면 정상적으로 작동하는 것입니다.

    여기까지 오시느라 수고하셨습니다. 이제 코드펜에서 제이쿼리를 마음껏 사용해보세요!

     

     

    [같이 보면 좋은 글]

    [coding/editor] - [codepen] 레이아웃 바꾸기

    [coding/html + css] - [css] 도형을 회전시키는 애니메이션을 만들어보자


    그럼 이만.

    총총.

    반응형
    댓글
    위쪽 화살표
    도움이 되었다면 공감(하트)과 댓글을 부탁드려요.
    로딩바