'codepen'에 해당되는 글 1건



코드펜 사이트 사용법


코드펜은 흥미로운 사이트입니다. 
프론트엔드 디자이너들이 만들어놓은 수많은 오픈 소스가 존재합니다.
업무의 있어서도 상당히 도움이 되는 좋은 곳입니다.

누구나 와서 가입 후에 
HTML , CSS ,  JS 를 코딩해서 
결과물을 놓고 자랑하는 사이트입니다.

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

▼우선 사이트 주소는 이렇습니다.
사이트 디자인도 CI도 이쁘고 정갈하네요 




▼ 공개된 소스중 하나를 선택하여 살펴보겠습니다 
크리스마스 볼이라는 작품인데요 
아래 URL로 접근해보세요

▼그럼 HTML, CSS, JS 가 있습니다. 해당 작품의 코딩 결과입니다.
이것들을 복사해가서 실행하면 그대로 실행이 될 것입니다.
물런 다운로드 기능도 제공합니다.


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


▼압축을 해제하면 index.html이 보이게 됩니다.
클릭하여 실행해보시면


▼아래와 같이 환상적인 HTML을 확인 가능합니다. 
이름대로 크리스마스 볼처럼 보이네요




마무리


이처럼 디자인 요소가 필요하면
코드펜에서 소스를 얻어가시기 바랍니다.
그리고 스터디 하기에 정말 좋은 사이트니
본인의 작품도 만들어 보시길 바랍니다.


댓글을 달아 주세요