친절한효자손 취미생활

열심히 짜놓은 코딩을 티스토리에 직접 업로드 하려니까 일반적인 스타일의 CSS의 경우는 그냥 스크린샷을 해서 이미지 통째로 올려도 상관은 없지만 움직이는 애니메이션, 자바스크립트의 경우는 결과 화면을 보여주기가 쉽지가 않습니다. 이럴때 필요한것이 코드펜 (Codepen) 입니다.


코드펜은 HTML, CSS, JS 등을 직접 입력해서 결과화면을 얻고, 이것을 다른 사람들과 공유함으로서 코딩 노하우를 공유하는 외국 사이트 입니다. 더불어 자신이 짜놓은 소스코드를 그대로 티스토리에 올릴 수 있습니다. 코드펜으로 올리면 결과화면까지 공유할 수 있어서 방문자도 직접 이것저것 클릭도 해보고 움직여보면서 같이 결과화면을 볼 수 있으니 더욱 직관적 설명이 가능합니다. 그러면 어떻게 올리는지 확인해 보겠습니다.


먼저 코드펜 홈페이지에 가셔서 회원가입을 진행하세요. 이메일 인증까지 진행하셔야 완벽하게 가입이 됩니다. 가입 완료 후 로그인을 합니다.


로그인 완료 후 Create > New Pen 으로 가셔서 새로운 문서를 만듭니다. 그리고 브라켓 등으로 짜놓으신 코딩을 html, css, javascript 항목대로 나눠서 옮겨줍니다. 물론 직접 코딩을 해도 상관 없습니다.


코딩을 완료 하셨다면 Save 버튼을 눌러서 저장합니다.


아래쪽에 보시면 Embed 버튼이 있습니다. 눌러주세요.


이제 다 되었습니다. 먼저 테마를 선택합니다. 저는 Dark 테마를 선호합니다. 그리고 HTML, CSS, JS 버튼이 있는데 이것들을 먼저 보여지게 할지 아니면 결과화면만 보여지게 할지를 정하시면 됩니다. 다 꺼두시면 결과화면만 보여지게 됩니다. 물론 차후에 해당 버튼을 누르면 마크업 된 상태도 확인 가능합니다. 그리고 녹색 부분은 창의 세로 크기 입니다. 적당히 위/아래로 드래그 해보시면 크기가 변합니다. 이제 마지막으로 오른쪽 아래의 HTML 소스코드 부분을 복사하시면 됩니다.


소스코드도 수정 가능합니다. 위의 3개가 방금 설명드렸던 부분입니다. 숫자 부분은 창의 세로 사이즈 입니다. 테마도 설정 할 수 있으며 보여지는 화면 설정도 가능합니다.


이제 티스토리에서 글을 쓸 때 기본 모드 버튼을 눌러서 HTML 모드로 전환합니다.


방금 메모장에 복사해둔 소스코드를 그대로 원하는 문장 사이에 붙여넣기 합니다.


그러면 글쓰기 모드에서는 이렇게 보여집니다. 미리보기를 눌러서 확인해 보겠습니다.


미리보기를 해보시면 방금 설정한 상태로 코드펜이 정상적으로 출력되고 있음을 확인할 수 있습니다. 이 방법을 진작에 알았다면 요긴하게 쓰는건데... 이제라도 알았으니 적극적으로 활용해 보도록 하겠습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band