[ Codepen ] 코드펜 사용법

CODEPEN

사이트 : https://codepen.io/

사이트 자체 이미지하면 검정색 하고 흰색 이 떠오르네요.코드팬은 주로 자바스크립트 / CSS / HTML를 테스트 할때 사용합니다. 저는 사이트에 있는 모든 기능을 사용하진않고 , 주로 테스트를 하거나 , 예시 소스를 보거나 , 눈 정화용으로 사용하곤 합니다. 사이트가 오픈소스 사이트이지만 저작권이 있는 소스들도 있어서 모든 것이 무료는 아닌 사이트입니다. PRO 버전이 거의 저작권이 있는 소스인 것같아요.

사이트가 미리 테스트를 할때 정말 유용합니다. 작업을 하면서 천천히 사용법을 적어 보겠습니다. 

회원가입

https://codepen.io/accounts/signup/user/free

무료 유료 설정하는 것이 있지만 무료로 만들었습니다. 

로그인

로그인이 완료되면 다시 메인으로갑니다.

메인화면

메인으로 가시면 최상단에 위 캡쳐 이미지 처럼 나옵니다. 

제가 사용 하는 기능은 

1. Create 버튼 

2. YOUR Dashboard 버튼

3. Search -  돋보기 이모티콘

4. 화면 중간에 있는 사람들이 만들어놓은 오픈소스

하나하나씩 보겠습니다. 

1.CREATE 버튼을 클릭해보시면 상세 목록이 나옵니다. 

위의 이미지에서 여러가지 기능이 있지만 저는 New Pen을 사용합니다.

위에 이미지처럼 화면에 나와요 .

하나씩 기능을 설명드리면 

1. 좌측 상단은 만든 new pen의 이름입니다. 클릭하면 이름을 바꿀 수 가 있어요. 

2. 화면 우측에 HTML / CSS / JS  부분이 있어요. 저기에 소스를 넣으시면 됩니다. 

3. Save는 작업한 소스 저장입니다. 컨트롤 + s / command+s 로도 save가 됩니다. 

4. Setting 기능이 핵심이어서 이미지를 보면서 설명드리겠습니다. html /css / js 를 설정하는데 제이쿼리 라이브러리나 scss 등을 설정합니다. 

5. change view 화면의 view를 본인에게 맞게 바꿀 수 있습니다. 

setting 기능을 좀더 보면 

css설정도 바꿀수 있고 , SCSS를 사용하거나 다른 기타 설정도 할 수 있습니다.

제이쿼리,리액트 등  라이브러리를 사용 할 수도 있습니다 .

저기에 없는 라이브러리는 CDN으로 직접 삽입도 할 수 있어요.

아래 링크로 들어가보시면 

https://codepen.io/sheldhe/pen/JBKxEZ

제가 만든 pen이 나올거에요. 거기에서 추가로 작업을 하거나 수정을 하면서 테스트도 해보실 수 있습니다. 

2. YOUR Dashboard 

내가 만든 pen리스트를 볼 수 있습니다.

3. Search -  돋보기 이모티콘

내가 예시를 보고싶어하는것을 검색해보시면 됩니다. (되도록 영어로)

이것 말고도 많은 기능이 있습니다. 

더 좋은 기능이 있으면 댓글로 남겨주세요.