[CodePen] 코딩 연습 최적화 실시간 뷰 코드펜

여러분은 코딩 작업을 하실 때 어떤 프로그램을 사용하시나요? 드림위버도 있고, 나모 웹 에디터도 있고 정말 다양하겠지만, 저는 간단한 코딩이 필요할 경우 코드펜을 사용합니다. 편의성으로 말할 것 같으면, 비싼 금액을 주고 프로그램을 설치할 필요가 없다는 점이 최고의 강점인 것 같습니다. PC와 와이파이만 있다면 어디든 갈 수 있어! 가 아니라 어디에서든 코딩을 짜고 이를 실시간으로 확인할 수 있죠.

 

처음 들어가시면 이런 형태입니다. 별도의 가입이나 로그인 절차 없이도 즉시 사용이 가능합니다. 좌측 상단의 Start Coding 버튼을 누르시면 바로 코딩창으로 넘어갑니다.

 

한눈에 html과 css, js를 보면서 실시간으로 적용 예까지 즉시 확인이 가능합니다.

 

이렇게, 각각의 창에 입력한 코딩은 즉시 반영되어 결과물을 실시간으로 확인할 수 있어요.  또 창의 구성도 작업자의 취향(?)에 따라 변경 할 수 있습니다. (html,css,js,결과창의 위치 등등)

회원 가입을 하고 로그인 시 소스를 저장할 수 있기 때문에 미리 짜둔 소스를 필요할 때 찾아 사용하기에도 아주 좋습니다. 

 

 

가입 페이지. Free가 인상 깊네요.

 

 

가입 절차도 무척 간편하답니다.

이름과 유저명, 이메일, 패스워드면 가입 절차 완료!

 

 

이렇게 다른 작업자들의 멋진 작업물도 열람이 가능합니다. 참고가 되는 좋은 소스들이 많기 때문에 가입해두면  엄청 유용하겠지요?

 

한 가지 더,

See the Pen NWxGMOR by kindkimyoung (@kindkimyoung) on CodePen.

이런 식으로도 활용이 가능합니다. 코드를 짜서 저장을 하고 게시할 수 있도록 Embed기능이 있습니다.

 

게시할 코딩을 끝내고 저장했다면 화면 우측 하단의 Embed 버튼을 클릭해주세요.

 

이렇게 팝업창이 뜹니다. 배경색이나 높낮이를 드레그하며 조정이 가능 하며, 설정을 끝냈다면 하단에 생성된 html코드를 복사하여 html모드에 기입해 주시면 위처럼 공유됩니다.

 

티스토리나 네이버 블로그에도 기본적으로 코드 블럭 기능이 있지만, 실시간으로 적용 예까지 확인하는 기능은 없기 때문에 정말 유용하다고 생각됩니다.

 

https://codepen.io/

CodePen