본문 바로가기
IT_Developers/Online IDE

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

by 고코더 2021. 1. 8.

코드펜이 뭔지 체험할 수 있는 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를 접하는 분도 쉽게 따라 할 수 있는 튜토리얼을 한번 체험해보세요.

 

 

 

댓글1