나도 할 수 있다! 코린이들을 위한 소스 제공 사이트 CodePen

 
여러분들 오늘은 몇 가지 유용한 프로그램 소개 해 드리려고 해요
그 중 코딩 연습할 때나 포트폴리오 만들 때 참고하기 좋은 사이트 하나 가져왔어요.
 

CodePen

 
 
CodePen은 웹 개발자와 디자이너들이 HTML, CSS, JavaScript 코드를 실시간으로 작성하고 공유할 수 있는
온라인 코드 편집기입니다. 
 
 

 
무료 요금제로도 기본적인 코딩 작업이 가능하지만,
협업과 고급 기능을 원할 경우 프로 요금제를 사용하시면 좋아요.
 
프로 요금제는 한 달 12달러로 한화 16000원입니다.
제가 프로 요금제를 구매 했었던 이유는 무료 요금제를 이용하면 다운 받을 수 있는 템플릿이 제한되어 있어서였어요
아래처럼 PRO 라는 노란 뱃지가 붙은 컨텐츠는
프로요금제를 이용하는 유저만 다운 받을 수 있어요!

 

코드펜 프로요금제 기능

 
 
코드펜 이용법을 간단합니다. 상단 서치바에 찾고 싶은 내용을 검색하세요
저는 대시보드(dashboard) 디자인을 검색했어요. 영어로 입력해주셔야 많은 자료가 나옵니다.
 
그리고 마음에 드는 디자인 이름 옆 아래에 있는 점 세개를 눌러 주세요~

 
그럼 해당 디자인을 즐겨찾기 하거나, 컬렉션에 추가할 수 있어요.

1. Add to Pins (핀):
   • 핀 기능은 마음에 드는 다른 사용자의 펜(Pen)을 저장하고 쉽게 접근할 수 있도록 하는 기능입니다. 일종의 "즐겨찾기" 역할을 하며, 나중에 다시 보고 싶거나 참고하고 싶은 코드를 핀으로 저장해둡니다.
   • 핀을 하면 개인 프로필에서 쉽게 찾을 수 있으며, 이는 다른 사람이 작성한 코드에 대한 링크를 저장하는 용도로 사용됩니다.
2. Add to Collection (컬렉션):
   • 컬렉션은 여러 펜을 주제별로 묶어 하나의 그룹으로 정리할 수 있는 기능입니다. 자신이 만든 펜이나 다른 사람의 펜을 여러 개 모아 하나의 컬렉션을 만들 수 있습니다.
   • 예를 들어, "애니메이션 예제"라는 컬렉션을 만들고 그 안에 관련된 펜들을 모아둘 수 있습니다. 컬렉션은 여러 펜을 주제별로 관리하는 방식입니다.

 
 

나의 컬렉션 & 핀한 컨텐츠 확인하기

 
우측 상단 끝에 있는 핀 모양 버튼을 클릭 => Pin한 컨텐츠 확인
우측 상단 이모지 아이콘 > Your Work > Collection 탭 => 나의 컬렉션 확인

 
 
저는 이 귀여운 mp3 플레이어를 사용해 보려고 하는데요
오른쪽 상단 View in Editor을 클릭해주세요~

 
그럼 이렇게 HTML, CSS, JS 소스와 구현된 화면이 아래 보여져요.
화면 가장 아래 하단부에 임베드하는 기능, 포크기능, Export(zip파일로 저장하거나 깃허브에 올리는 기능)도 있으니
원하시는 작업 선택하셔서 진행해주세요. 코드를 다운받고자 하시는 분은 Export 해 주시면 됩니다