코드펜 Codepen에서 소스 연습도 하고, 코딩도 참고하고

코드펜 Codepen을 소개합니다.

 

 

 

학원에서 코딩을 배우면서 처음 코드펜 사이트를 알게 되었습니다.

 

아래의 url에 들어가서 많은 코드를 참고하였습니다.

 

 

https://codepen.io/

CodePen

 

 

다른 분들은 회원가입을 해서 주로 코딩 테스트를 할 때 코드펜을 많이 사용하는 것 같습니다.

저는 회원가입을 하지는 않고 주로 샘플을 찾거나 예시 소스를 참고하고자 할 때 코드펜에 들어갑니다.

찾고자 하는 효과를 영어로 검색을 하면 html, css, js 3개의 파트로 나누어서 소스를 보여줍니다.

 

 

<코드펜 사이트 html, css, js 구별 화면>

각 부분을 복사할 수 있기 때문에 원하는 소스만을 참고해서 내가 원하는 효과를 내 웹페이지에 입히면 됩니다.

class명이나 태그명이 전체적인 코드와 다를 때는 코드펜에서 가져온 소스의 class명과 태그를 제 코딩에 맞게 수정을 하는 작업을 하여야 합니다.

수정을 하지 않고 코드펜에서 복사한 코드를 그대로 사용하면 내가 작성한 기존의 코드와 class명이나 id가 충돌할 수도 있으니 주의가 필요합니다.

 

코드가 아니라 이미지 같은 디자인적 요소는 저작권과 관련될 수 있으니 주의가 필요합니다.

 

 

<codepen 홈페이지 화면>

 

 

기본칼라인 블랙과 화이트로 간결하면서도 세련된 이미지를 보여주는 코드펜.

 

이상으로 코드펜에 대한 간단한 소개를 마칩니다.