CodePen - 코드펜 초보를 위한 튜토리얼 따라 해보기

---

코드펜이 뭔지 체험할 수 있는 tutorial

---

 

안녕하세요.

고코더 입니다.

 

 

 

● 1. 코드펜을 가입하였다고 사용할 준비가 되었다면 이제 코드펜이 제시하는 회원가입시 나타나는 튜토리얼을 한번 따라해보시기 바랍니다. 만약 가입 이후에도 튜토리얼이 궁금하다면 아래 URL을 접속하여서 언제든지 복습하실 수 있습니다.

 

● 2. 접속하면 아래처럼 2분정도 시간이 걸린다고 하면서 튜토리얼을 권장합니다. 코드펜이 무엇인지 백문이 불여일견입니다. 한번 저와 함께 해보시길 바랍니다. 

https://codepen.io/pen/tour/welcome/start

 

● 3. 처음 나타나는 화면은 HTML입니다. 초딩학교 시절부터 배우던 그것이 맞습니다. 웹의 가장 기초가 되는 부분입니다. 자동으로 튜토리얼이 Hello World!를 입력해주었습니다. Next를 클릭합니다.

 

<h1>👋 Hello World!</h1>

 

● 4. 이번에는 CSS입니다. HTML에 디자인을 추가할 수 있는 요소입니다. 자동으로 역시 코드펜이 자동으로 코드를 입력합니다. 코딩 할때도 이렇게 자동으로 코드가 입력된다면 얼마나 좋을까요?

 

body {

  font-family: system-ui;

  background: #f06d06;

  color: white;

  text-align: center;

}

 

● 5. 해당 소스를 입력한 결과는 바로바로 아래에 결과 페이지에서 보여줍니다. 이런 장점 덕분에 코드펜을 이용하여 퍼블리싱이나 프론트엔드 공부를 쉽게할 수 있습니다.

 

 

● 6. 대망의 자바스크립트입니다. 복잡한 코드를 순식간에 입력해줍니다. 내용은 대략 폰트 사이즈를 크게 키우는 작업을 하는 소스입니다. 가장 많이 헤매고 힘들어할 공간이 바로 이 JS라고 써져 있는 스크립트 공간이 아닐까 생각합니다.

document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

document.getElementsByTagName("h1")[0].style.fontSize = "6vw";

● 7. 아까 그 결과 페이지를 다시 보시면 이렇게 글자들이 크게 변해있습니다. 일명 동기화 되어 즉시 반영 되었습니다. 

 

 

● 8. 코드가 완성 되었습니다. 이제는 설정을 클릭하라고 합니다. settings를 클릭합니다.

 

 

● 9. 설정에 들어가면 아래와 같이 제목, 설명, 태그를 입력할 수 있습니다. 맨 아래에 있는 Save & Code를 클릭합니다. 

 

 

● 10. 그럼 이렇게 세이브가 완료되고 코드펜을 이용해 하나의 펜을 만들어 보았습니다. 

 

 

---

마무리

---

 

처음 IT를 접하는 분도 쉽게 따라 할 수 있는 튜토리얼을 한번 체험해보세요.