코드펜(CodePen) 작성 코드를 블로그에 넣는 방법(블로그에 코드 넣기)
다른 블로그들을 구경하다 보니...
이런 형태의 코드 에디터를 찾았습니다 html, css, js가 탭으로 구분되어 있고 심지어 실시간으로 결과물을 확인할 수 있고 가독성도 되게 좋아요!
이번에 실시간 코드 에디터인 코드펜(codepen)을 소개하고 html, css, js를 효율적으로 보여주는 방법을 소개해보려 합니다.
코드펜(CodePen)
실시간 코드 에디터로, HTML, CSS, JS를 탭으로 구분하여 효율적으로 보여줍니다. 이 편리한 도구를 활용하여 블로그 포스팅 시 코드가 길어져 가독성이 떨어지는 문제를 해결할 수 있습니다. 이제 코드펜을 소개하고, HTML, CSS, JS를 효과적으로 보여주는 방법을 알아봅시다.
코드펜(CodePen) 소개 실시간 코드 에디터
코드펜은 개발자들이 HTML, CSS, JS 코드를 작성하고 시연해볼 수 있는 온라인 플랫폼입니다. 간단한 URL로 코드를 공유하고, 작성한 코드를 미리보기할 수 있으며, 다른 사람들과 코드를 공유하고 협업할 수도 있습니다. 또한, 코드펜을 이용하여 블로그 포스팅 시에도 코드를 첨부하여 코드의 가독성을 높일 수 있습니다.
HTML, CSS, JS를 효율적으로 보여주는 방법
1. 분할하여 보여주기
코드펜에서 HTML, CSS, JS를 각각 탭으로 나누어 작성하면 코드가 깔끔하게 정리되어 가독성이 좋아집니다. 각 탭에 해당하는 코드만 집중적으로 보여주기 때문에 코드를 파악하기가 훨씬 쉬워집니다.
2. 주석 활용하기
코드펜에서 작성한 코드에는 주석(comment)을 활용하여 코드의 기능이나 설명을 추가할 수 있습니다. 코드를 처음 접하는 사람들도 주석을 통해 코드의 의도를 이해할 수 있으므로, 가독성과 이해도를 높일 수 있습니다.
3. 결과물 확인하기
코드펜은 작성한 코드의 실시간 결과물을 바로 확인할 수 있는 기능이 있습니다. 따라서 코드를 작성하면서 동시에 결과물을 확인하며 수정할 수 있어 효율적으로 개발할 수 있습니다.
4. 외부 라이브러리 및 프레임워크 사용하기
코드펜에서는 다양한 외부 라이브러리와 프레임워크를 사용할 수 있습니다. 이를 활용하면 코드의 양을 줄이고, 기능을 간편하게 추가할 수 있어 가독성을 높이고 개발 시간을 단축할 수 있습니다.
코드펜(CodePen) 사용법
1. 위 링크로 접속하셔서 회원가입하고 로그인 해주세요.
2. 좌측에 Pen을 클릭합니다.
3. 코드를 작성해줍니다.
4. 코드를 다 작성한 후 우측 상단에 save버튼을 누르셔서 저장합니다.
5. 저장한 후 우측 하단에 Embed버튼을 누르세요.
6. 원하시는 테마 등 설정을 하시고 코드를 복사하세요
7. 글쓰기에서 HTML 모드에서 복사한 코드를 붙여넣기를 합니다.
아래와 같은 코드블럭이 완성되었습니다!
See the Pen Untitled by Yeong jun Park (@Yeong-jun-Park) on CodePen.
이상으로 오늘은 코드를 블로그에 넣는 방법 구현해 보았습니다.
앞으로 코드 포스팅은 codepen을 이용할 것 같네요 ^^
다음번에는 더욱 도움 되는 정보를 가지고 오겠습니다.
댓글
댓글 쓰기