[#. CodePen] HTML, CSS, JS 코드와 화면을 동시에 볼 수 있는 코드펜 티스토리에 가져와서 사용하기

 

 

 

 

앞으로는 HTML, CSS, JS 관련 코드를 작성할 때

각각의 코드와 완성된 화면을 동시에 볼 수 있는 코드펜 CodePen을 사용하려고 한다

 

 

 

 

codepen.io/

CodePen

 

 

 

 

 

① 가입 후 Pen 생성

가입한 후 왼쪽에 Pen 클릭

 

 

 

 

 

② 코드 작성

이렇게 펜이 생성되면 여기에 각각의 코드를 작성한다

 

 

 

③ 작성 후 링크 가져오기

펜 하단에 Embed 클릭 => HTML 코드 가져오기

 

 

 

 

 

 

 

④ 티스토리에 코드 붙여넣기

HTML 모드로 하고 코드 붙여넣기 => 기본모드로 돌아오기 하면 된다