- 코드 펜이란?
- 코드 펜 가입 및 로그인하기
- 코드 펜 사용해보기
1. 코드 펜이란?
개발자들 주로 프론트 엔드 개발자들이, 본인이 구현한 HTML, CSS, Javascript 코드 조각들을 테스트하고, 시연하기 위한 커뮤니티,라고 정의되어있습니다. 블로그 포스팅을 자주 찾아보시는 분들은, 코드 펜이라고 하면 잘 모르시지만, 막상 보면 한 번쯤은 본 적이 있는 커뮤니티 일 듯합니다.2. 코드 펜 가입 및 로그인하기
코드 펜 접속을 먼저 진행해주시고 (https://codepen.io/) , 상단의 SignUp을 찾아줍니다.이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
3. 코드 펜 사용해보기
이제 제가 코드 펜을 사용하는 주목적인, 블로그에 포스팅으로 가져와보겠습니다.상단의 [Save] 버튼을 눌러 코드들을 저장해줍니다.이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이전 스크린샷 안내
원본 스크린샷은 만료된 외부 링크라 표시하지 않습니다. 본문의 명령과 설명을 기준으로 진행해 주세요.
이번 프로젝트를 마무리하면서, javascript web apis에 대한 포스팅을 하겠다고 생각을 했고, 나중에 내가 보기 쉽게 포스팅을 하기 위한 방법으로 코드 펜을 선택했다. 코드 펜에 대한 포스팅을 진행한 만큼 마음껏 활용할 생각이다.