코드펜 Codepen 설치 와 사용 방법

소스를 확인 하거나 테스트 하고 싶어질때가 있을 것이다.

그럴 때 유용하게 자바스크립트 / CSS / HTML를 테스트 할 수 있는 사이트가 있어 안내 합니다.

사이트가 오픈소스 기반 사이트인데

저작권이 있는 소스들이 있고 그런것들은 유료(PRO)버전 에서만 사용 할 수 있습니다.

하지만 심플하게 내 소스를 테스트 하고 공유하고 그런 목적에 심플하게 사용 할 수 있습니다.

설치

사이트접속

코드펜 사이트 링크

사이트주소 로 접속 하면 위와 같은 곳으로 접속 이 됩니다.

회원가입

회원가입을 해줍니다.

정보입력

모두 입력 후 제출(Submit)해줍니다.

간단사용설명안내

간단한 설명

CodePen 편집기 사용을 시작하는 데 도움이되도록 예제 펜을 만들기 시작합니다
코드 추가, 미리보기보기, 설정 변경, 레이아웃 변경과 같은 작업을 수행하는 방법을 보여준다고 합니다.
궁금 하다면 보는 것을 추천 합니다. 2분 정도 소요 됩니다.

사용

화면 구성

화면구성

(①) HTML 소스 입력 하는 곳

(②) CSS 소스 입력 하는 곳

(③) Jaba script 소스 입력 하는 곳

(④) 입력한 소스의 적용값이 바로바로 확인 됨

화면 구성 변경

(①) Changeview 메뉴에서 Pen의 레이아웃(②)을 변경 할 수 있습니다.

메뉴

메뉴

(①) 키를 누르면 메뉴가 열립니다.

이부분에서 저는 New pen을 사용하여 페이지를 열어서 사용합니다.

Settings

Pen을 열어 상단 세팅(①)버튼을 눌러보면 (②)와 같은 세팅 창이 활성화 됩니다.

HTML 프로세서 변경

HTML 프로세서를 변경 할 수 있습니다

css 프로세서 변경

SCSS 등도 사용을 할 수 있습니다. 다른 설정도 가능 합니다.

JS프로세서 변경

제이쿼리등의 라이브러리를 사용 할 수 있습니다 . (

제공하지 않는 라이브러리는 CDN 으로 직접 삽입도 할 수 있어요.

에디터 설정

이곳에서 에디터의 설정등 (폰트, 테마색상)등을 설정 할 수 있으니 본인의 스타일 대로 적용 하여 사용하면 됩니다.

프로 (유료버전)

live view(라이브뷰) 모드 지원

이 기능을 사용하여 펜의 전체 페이지보기를 열고 코딩하는 동안 실시간으로 적용 되는 것을 볼 수 있습니다.

Privacy(비공개)모드 지원

내가 원하지 않는 다면 나의 빌드를 비공개로 유지 할 수 있습니다.

Export Build Process(빌드 프로세스 내보내기)

빌드 프로세스와 함께 내보내기 할 수 있으며

코드 번들과 사용자 지정 빌드 스크립트를 받아 오프라인으로 코드를 계속 처리 할 수 있습니다.

Professor Mode(교수모드 , 학습모드)

이모드를 사용하면 사람들이 CodePen에서 나의 작업을 관전 할 수 있습니다. 미리보기가 업데이트되는 동안 코드를 작성하고 설정을 변경하는 것을 볼 수 있어 지도 수정을 받을 수 있다고 합니다.

이건 아래 협업과 비슷한 맥락인 듯 합니다.

Collab Mode(협업)모드

다수 명의 사람이 동시에 펜에서 실시간으로 코드를 편집 할 수 있습니다!

Assets(저장 특화)

PRO 사용자는 드래그 앤 드롭 을 통해 파일 (이미지, 스크립트 또는 필요한 모든 것)을 Pen에 업로드 할 수 있습니다.

필요시 고려 해 볼 수 있겠습니다.

홈페이지 활용 예시

이런 식으로 홈페이지 처럼 활용 하는 분들도 많은 듯 합니다.

마무리

테스트기능

이외에도 여러가지 기능 들이 있겠지만 개인적으로 실시간으로 바로 테스트를 하면서 작업이 가능 하니 이점이 좋습니다.

그외에 코드를 링크로 공유한다던지 그런것이 매우 심플하게 이루어짐으로 그 것도 활용도가 높으니 저와같이 배워 나가기 시작하는 분들은 같이 사용하면서 배워 나가도 좋을 듯 합니다.

더 유용한 기능 들이 있다면 댓글로 알려 주세요.

참고

VMWARE 워크스테이션에 윈도우10 설치 하는 방법 안내

마이크로소프트 Azure 에져 클라우딩 컴퓨터 설치 방법 상세 안내

Leave a Comment