코드펜 사이트 사용법


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

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

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

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




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

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


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


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


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




마무리


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


댓글을 달아 주세요



캐쉬 비우기 및 강력 새로고침


프론트 엔드를 개발하다보면
 "캐시"가  지워지지 않아서 참 귀찮을 때가 많습니다.

크롬에서 그럴땐 보통
Ctrl + Shift + Delete 를 눌러서 
캐시를 삭제하는 경우가 많습니다.



▼아래 화면처럼 삭제하는 방법은 사실 조금 귀찮습니다.



그래서 오늘은 새로고침시 바로 캐시를 지우는 방법을 알아보겠습니다.
사실 방법은 간단합니다.
크롬에서 F12를 눌러 개발자 모드를 실행 한후에

새로고침 버튼위에서 마우스 오른쪾 버튼을 눌러보자
그럼 평소에 보이자 않는 버튼이 생기게 됩니다.

▼아래 버튼으로 새로고침을 하면 아까 설정에서 캐쉬를 지우는 방법을 먼저 선행하고 새로고침을 합니다.




프론트엔드 개발자나 퍼블리셔에게 아주 좋은 방법이다.



마무리

크롬은 완벽한 도구네요




댓글을 달아 주세요