[**코드펜**]은 프론트엔드 개발자들이 코드들을 공유하거나 테스트할 때 사용하는 사이트입니다.
거기에 추가하자면 저처럼 잘 모르는 초보가 공부를 하러 가는 곳이기도 하고, 소스코드가 필요한 유저가 가서 얻어오는 곳이기도 합니다.
굉장히 잘 만든 사이트지만 자세히 살펴보지 않으면 몇몇 유용한 기능들을 그냥 지나칠 수도 있습니다.
그래서 이번 시간에는 코드펜 사이트를 사용하는 방법을 알아볼까 합니다.
소비자 입장
코드를 제작하진 않지만 좋은 코드를 얻기 위해 들어가시는 분들을 위한 사용 설명서입니다.
원하는 코드 찾기
원하는 글을 찾는 방법은 크게 2가지가 있습니다.
- 검색하기
- 토픽 찾아가기
아래는 코드팬 상단의 검색창을 눌렀을 때 나오는 화면입니다.
1번이 검색창, 2번이 자주 찾는 검색어, 3번이 토픽입니다.
보통 유저들이 찾을만한 검색어는 이렇습니다.
hover - 마우스를 갖다대었을 때 변하는 효과
button - 버튼 종류
sticky - 따라다니는 네비게이션 메뉴 같은 종류
layout - 웹페이지의 기본이 되는 레이아웃 종류
gooey - 물컹물컹한 효과를 지닌 버튼이나 메뉴
slider - 홈페이지 메인에 주로 쓰이는 슬라이더, carousel라는 표현도 자주 쓰인다
infinite scroll - 무한 스크롤
media card - 포스트를 담은 카드 썸네일 메뉴
그 외에도 창의적으로 만들어진 자료들이 많으니 가능성은 무궁무진 합니다.
원하는 글을 찾았다면 클릭해서 들어가면 됩니다.
구체적인 예시를 들어보자면, 만약 css만으로 이뤄진 슬라이더를 검색해본다고 가정해봅시다.
저는 검색어로 pure css slider라고 검색했고, 아래 사진처럼 목록이 주르륵 뜹니다.
썸네일로 대략 어떤 종류의 스니펫인지 볼 수 있기 때문에 마음에 드는 걸 골라서 들어가주시면 됩니다.
그러면 3가지 창이 있을텐데, 각각 HTML, CSS, JAVASCRIPT 입니다.
아래 사진에서 제가 빨갛게 표시한 부분이죠.
코드 가공해서 가져가기
일반적인 경우라면 나온 코드를 원하는 부분을 택해 가져가시면 됩니다.
다만 위의 스샷에서 생소하실 수 있는 부분이 있습니다.
바로 [**pug**]와 [**less**]라는 부분인데, 일반적인 html과 css가 아닙니다.
html과 css을 더 편리하게 쓰기 위해 사용되는 방법인데, 본인에게 익숙한 방식으로 바꿀 수 있습니다.
위의 사진처럼 아래 화살표를 누르면 하얗게 컴파일 할 수 있는 창이 뜰 겁니다.
[**View Compiled HTML**]을 누르면 왼쪽사진에서 오른쪽 사진처럼 일반적인 HTML로 변하게 됩니다.
[팁*jquery의 경우 pure javascript로 바꿔줄 순 없는데 그럴 땐 바벨을 이용하시면 됩니다.*]
CSS도 마찬가지의 방법으로 바꿔주시면 됩니다.
이렇게 변한 코드 중 원하는 걸 가져가시면 되는데, 여기서 주의해야할 점이 있습니다.
- 추가로 연결된 라이브러리가 있는가를 살피기
- html에 cdn으로 불러온 것이 있는지, css에 import한 게 있는지 살피기.
HTML에 부분에 <script src=""> 태그를 이용해서 jquery 같은 라이브러리 연결되어있거나, 부트스트랩 같은 것들을 연결해놨을 수도 있습니다.
CSS에 import로 폰트 파일 같은 걸 연결해놨을 수도 있고요.
혹은 HTML/CSS/JS의 글씨 왼쪽의 톱니바퀴 모양을 누르면 위와 같이 세팅창이 뜨는데, 코드펜에서 연결을 도와주는 라이브러리를 쓴 경우도 있습니다.
이런 경우엔 그 라이브러리가 필요하다는 거니 본인이 사용할 곳에도 적용하시면 됩니다.
이렇게 가공해서 가져가시면 됩니다.
저작권
기본적으로 코드들은 자유롭게 사용 가능합니다.
코드펜 운영자분의 마인드는 이렇습니다.
'당신이 이 공간에 코드를 올리는 것 자체가 다른 사람이 자유롭게 사용하라고 올리는 겁니다. 그게 싫으면 PRO로 가입해서 privacy 모드를 켜야 합니다.'
실제로 아래는 코드펜의 라이센스 부분입니다.
이 부분은 유저가 설정할 수 없이 고정입니다.
다만 다른 사람이 만든 프로젝트를 가져가서 쓴다면 코드 안에 원저작권자 표시를 해놔야 합니다.
개발자 입장
직접 코드를 작성하는 사람 입장입니다.
여기서 주의할 점은 codepen에 본인의 코드를 올리는 순간 자유롭게 사용을 허가해준다는 뜻이 됩니다.
그게 싫으면 PRO 회원으로 업그레이드 해서 써야 하는 딜레마가 있습니다.
작업하기
다만 저장하지 않고, 어디까지나 연습용으로 쓰는 건 공개하지 않고 쓸 수 있습니다.
코드를 저장하지 않고 연습만 하려면 회원가입도 필요없습니다.
codepen에 접속하신 후에, 메인화면 왼쪽 상단에 있는 [**Start Coding**]을 눌러주시면 됩니다.
그러면 HTML/CSS/JAVASCRIPT를 입력할 수 있는 칸과 마크업하면 결과가 보이는 미리보기창이 있습니다.
이 정도면 사용법은 다 아는 셈이지만, 유용한 세팅들을 알아볼까 합니다.
위의 화면처럼 HTML/CSS/JS 왼쪽의 톱니바퀴를 누르면 라이브러리를 CDN 형태로 불러올 수 있습니다.
jquery, react, angular, vue가 버전 별로 모두 제공 되지요.
CSS나 HTML의 경우엔 SASS/PostCSS/Less/stylus/SCSS나 pug/slim/Haml/markdown이 제공됩니다.
뿐만 오른쪽 상단의 change view를 통해 구조를 바꿀 수도 있고, 하단의 console 창을 눌러 개발자 모드를 열지 않고도 콘솔을 볼 수 있습니다.
이제 작업을 하시면 됩니다.
펜 퍼오기
여기에서 끝나지 않고 코드를 다른 사이트에 공유하거나 강의용 예제로 쓰고 싶다면 저장을 해야 합니다.
그리고 저장을 하려면, 무료 회원 가입이 필요합니다.
로그인을 한 상태에서 작업물로 들어가면 SAVE 버튼을 사용할 수 있습니다.
세이브를 눌러 저장을 해주면, 오른쪽 하단에 Add to Collection, Fork, Embed, Export,Share 등의 버튼이 생깁니다.
여기서 [**Embed**]를 누르시면 퍼갈 수 있는 창이 나타납니다.
위의 사진에서 제가 빨갛게 표시한 것처럼 테마 설정 후, 크기를 드래그해서 정하고, 아래에 나타난 코드를 복사해서 붙여 넣으면 됩니다.
[팁* iframe은 lazyload로 지연로딩 가능합니다. 저 같은 경우 lazysizes 라이브러리를 사용했습니다.*]
그 외에도 회원가입시 다른 사람의 작업물에 코멘트를 남긴다거나, Fork를 해서 프로젝트를 진행하거나, Following하거나 하는 일등이 가능합니다.
관련글
'그외 > 유용한 정보' 카테고리의 다른 글
| RTX-3080 종류별 성능 등급표 알아보기 (0) | 2020.10.26 |
|---|---|
| 무한 스크롤 (Infinite Scroll) 페이징 구현해보기 예제 (11) | 2020.10.22 |
| 스크롤 내리면 상단에 고정되는 네비 메뉴 만들기 (4) | 2020.10.20 |
| 웹폰트를 경량화 후 로딩속도를 최적화해서 적용하는 방법 (2) | 2020.10.12 |
| 파일이름 일괄변경 프로그램 다크네이머(DarkNamer) 사용법 리뷰 (2) | 2020.10.11 |
