본문 바로가기
IT_Developers/Online IDE

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

by 고코더 2021. 1. 9.

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


 

안녕하세요.

고코더 입니다.

 

 

 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 탭을 클릭하면 삭제 예정인 펜들을 확인할 수 있습니다.

 

 


마무리


 

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

 

 

 

댓글