HTTP, CSS, JS코드를 블로그로 가져오자 (Codepen.io)

요새 블로그 글을 작성하다보니 공부한 것에 대한 JS나 CSS를 직접 눌러보고 확인하고 싶었다...
구글링을 하다보니 찾게 된 Codepen.io 

오자마자 코드를 치고 싶은 욕구...

---

#간단하지만 대단한 기능

시작하자마자 VSC 다크모드의 냄새가 나는데, 일단 START Coding을 누르면 다음과 같이 창이 나온다.
일단 블로그에 올리기위해선 코드를 저장해야하고 그를 위해선 회원가입을 해야한다. 
하지만 간단하게 html태그를 연습하고 싶다면 가입을 하지않아도 무료로 사용가능하니 사용하시면된다.

여듬으로 유료도 있긴하지만 유료는 내가 사용 코드를 비공개하고자할때 사용하는데 그리 추천하진 않는다.

 

간단한 화면. 간단한 예제도 구현가능

짜잔

---

#그래서 블로그에 어떻게 올려?

앞서 이야기 했다시피 가입은 해야하니 가입을 마치고 홈페이지오면 자신의 코드를 작성하고
화면의 우측하단에 보면 Embed라는 칸이 있다. 이를 클릭하면 바로 html코드가 주-욱 나올텐데
이를 복사해서 블로그에서 html모드로 붙여놓기를 하면 바로 나온다. 

※주의 : 여기서 저장된 것은 내 Codepen.io계정안에 저장되어 있기때문에
저장된 코드를 수정할 경우 이곳에서 출력된 것에도 영향을 준다.
고로 다른 출력물을 만들고자할때에는 새 코드를 작성한 후, 새 작업을 해야한다.

우측하단 Embed를 선택하자

 

html코드를 복사해서 내 블로그에 뙇

 

---

#결과

 

See the Pen 예제1 by hambugman (@hambugman) on CodePen.

 

이렇듯 내 블로그 안에서도 작성한 태그문서를 출력해보고 테스트를 할 수 있다.

 

이 외에도 CodePen에서는 다른 이들이 만든 것도 볼 수 있고, 내부 코드들(유료기능으로 막지만않으면)도 볼 수 있기 때문에 자기 발전에도 큰 도움이 되는 사이트라고 생각된다.

프론트엔드쪽뿐만 아니라 프로그래밍에도 관심이 많다면 정말 추천드린다. 

 

따라가기에는 부족한 내실력...그저 공부만

 

 

CodePen