CodePen - 코드펜 Pen 생성하기, 삭제하기

---

펜을 만들고, 지우는 기초적인 작업 배워보기

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 코드펜을 사용하는 가장 기초적인 사용법인 Pen을 생성하고 삭제하는 방법을 알아보겠습니다. Pen이라는 단위는 코드펜에서 사용하는 하나의 아이템입니다. 웹으로 치면 하나의 페이지라고 생각하면 쉽습니다. 

 

● 2. 로그인한 후에 코드펜에 접속하면 아래처럼 Work 창이 나타납니다. 여기서 왼쪽 위에 Create에서 Pen을 클릭합니다.

 

● 3. 그럼 아래처럼 여러 Pen의 종류가 나타납니다. 가장 기본적인 단위인 Pen을 생성해보겠습니다. 그 밖에 다른 Pen들은 차차 알아가 보도록 하겠습니다. 

 

 

● 4. 펜을 클릭하면 우리가 자주 보게 될 펜 코드 창이 나타납니다. 여기서 프런트엔드의 전반적인 개발을 연습해볼 수 있습니다. 

https://codepen.io/pen/

 

● 5. 코드가 작성되었다면 왼쪽 맨 위에 편집 버튼을 눌러 Pen의 이름을 변경할 수 있습니다. 

 

● 6. 그리고 내용을 작성합니다. 테스트를 위해 아주 기초적으로 작성을 하였습니다. 그저 글자가 나타나고 가운데 정렬이 되는 임시적인 소습니다.

 

● 7. 작성이 완료가 되었다면 이제 SAVE 버튼을 클릭합니다.

 

● 8. 이제 다시 Work 페이지로 돌아오면 아까 만들어놓은 Pen이 생성되어 있습니다. 이번엔 이걸 삭제해보겠습니다. Pen 오른쪽 아래에 있는 점이 세 개 있는 메뉴 버튼을 누르고 나타난 창에서 Delete를 클릭합니다.

 

● 9. 그럼 삭제 경고창이 나타납니다. 내용은 3일 동안 휴지통에 보관하고 이후에 삭제된다는 내용입니다. "I understand, delete my Pen"를 클릭하면 펜이 삭제됩니다.

Delete Confirmation

Here's what happens when you delete a Pen:

* The view count, hearts, tags, and comments are permanently deleted and cannot be restored.

* A copy of this Pen will be saved to the Deleted Items section of Your Work for 3 days.

* After 3 days, that copy is permanently deleted. You can also manually delete it from your Deleted Items (more details).

 

● 10. 삭제된 펜은 작업창에 나타나지 않습니다. 

 

● 11. 다만 Deleted 탭을 클릭하면 삭제 예정인 펜들을 확인할 수 있습니다.

 

 

---

마무리

---

 

가장 많이 사용하는 기본 단위입니다.