Front- 프론트엔드 디자인 무료 공개소스 / codepen.io

---

코드펜 사이트 사용법

---

코드펜은 흥미로운 사이트입니다. 

프론트엔드 디자이너들이 만들어놓은 수많은 오픈 소스가 존재합니다.

업무의 있어서도 상당히 도움이 되는 좋은 곳입니다.

누구나 와서 가입 후에 

HTML , CSS ,  JS 를 코딩해서 

결과물을 놓고 자랑하는 사이트입니다.

프론트 개발자라면 학습으로도 좋습니다.

▼우선 사이트 주소는 이렇습니다.

사이트 디자인도 CI도 이쁘고 정갈하네요 

https://codepen.io/

▼ 공개된 소스중 하나를 선택하여 살펴보겠습니다 

크리스마스 볼이라는 작품인데요 

아래 URL로 접근해보세요

https://codepen.io/Mamboleoo/pen/VrdYxN

▼그럼 HTML, CSS, JS 가 있습니다. 해당 작품의 코딩 결과입니다.

이것들을 복사해가서 실행하면 그대로 실행이 될 것입니다.

물런 다운로드 기능도 제공합니다.

▼다운 방법은 오른쪽 아래 Export 라는 버튼을 누르면 압축파일이 보입니다. 

클릭하여 다운로드 합니다.

▼압축을 해제하면 index.html이 보이게 됩니다.

클릭하여 실행해보시면

▼아래와 같이 환상적인 HTML을 확인 가능합니다. 

이름대로 크리스마스 볼처럼 보이네요

---

마무리

---

이처럼 디자인 요소가 필요하면

코드펜에서 소스를 얻어가시기 바랍니다.

그리고 스터디 하기에 정말 좋은 사이트니

본인의 작품도 만들어 보시길 바랍니다.