CodePen - 코드펜 "Add to Collection" 핀 기능 사용하기

---

코드펜 Pin으로 고정하기

---

 

안녕하세요.

고코더 입니다.

 

 

 

 

● 1. 코드펜에서는 Pin(핀)이라는 기능을 사용할 수 있습니다. 흔히 사무실에서 중요한 문서를 핀으로 꽃을때 사용하는 그 핀을 말합니다. 그래서 회사에 가면 이런 펜들이 회의실에 많이 볼 수 있습니다. 코드펜에서는 이런 핀과 같은 기능을 제공합니다. 살짝 중요한 핀을 잘보이는 곳에 꽃아두고 사용할 수 있습니다. 

 

 

 

● 2. 코드펜에서 이전 시간에 만든 Pen을 확인 가능합니다. Your Work라는 탭에서 확인이 가능합니다. 여기서 만든 Pen에 점 세 개를 클릭합니다. 

https://codepen.io/your-work

 

● 3. 그러면 세 개의 메뉴가 나타납니다. 여기서 "Add to Pins"를 클릭합니다. 위에서 말한 해당 작품을 핀에 꼽아둘 수 있는 기능을 말합니다. 

 

● 4. Pin을 꽃아 둔 pen들은 작업 시에 상단에 펜 모양의 아이콘을 눌러보면 이렇게 쉽게 접근할 수 있도록 리스트로 표시됩니다. 사무실이 있다면 한쪽 벽면에 요즘 하고 있는 중요한 작업들을 관리하는 것처럼 코드 펜에서도 핀으로 꽃아 두고 집중하여 관리할 수 있게 됩니다. 

https://codepen.io/pen/

 

 

● 5. 핀에 꼽아둔 아이템을 정리하려면 X 버튼을 누르거나 

 

● 6. 처음 보여드렸던 화면에서 추가된 아이템을 다시 확인해보면 "Remove from Pins"로 변경되어 있습니다. 

 

 

---

마무리

---

코드펜 처럼 귀여운 기능