구글 블로그 스팟 html, CSS, JavaScript등의 코드를 미리보기 하는 방법

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

블로그에 매번 적용 시켜 보기 힘들다면?

블로그에 적용시킬 버튼코드나 css등을 힘들게 매번 블로그의 html편집창 안에 넣어서 테스트해보거나 미리보기로 확인하고는 합니다. 하지만 이렇게 작업하는것은 너무 효율이 안좋고 힘들어서 매번 이렇게 적용하는것 자체를 힘들어해서 아예 사용안하는 분들이 많습니다. 하지만 html과 css등으로 이뤄진 버튼이나 기능은 블로그방문자에게 그만큼의 신경쓴 블로그, 잘갖춰진 느낌을 줌으로 가능하다면 더욱 쉽게 미리보고 적용할 수 있는 서비스를 찾는것이 좋습니다.

jsbin사이트를 활용하세요

그렇다면 어떤 서비스를 이용해야 html, css, js등을 쉽게 적용해보고 미리보기할 수 있을까요? 제가 이것저것 사용해보니 이 사이트가 사장 직관적이고 코드를 넣어서 미리보기 하기가 편하더라구요. 일단 아래의 링크를 클릭해 사이트로 이동하여 살펴보세요.

jsbin 사이트 바로가기

너무 간편한 html코드 미리보기

처음 접속하고나면 이것저것 복잡하게 이뤄진 레이아웃이 아닌 직관적인 모습으로 되어있어서 너무 보기에 편리합니다. html, css, javascript, Console, Output등으로 입력란을 설정이 가능합니다. 아래의 입력란을 보면 알 수 있듯이 각각의 입력란이 바로 보여지죠?

이제 내가 필요한 html코드와 필요에 따라 css, javascript등을 입력란에 넣으세요. 그리고 가장 우측창을 바라보면 별도로 버튼을 누르지않아도 현재 내가 작성한 코드가 어떻게 본문에 나타날지에 대해서 바로 결과를 보여주게 됩니다. 

그러면 이거보고 바로 블로그에 넣으면 되는거 아닌가? 생각하시겠지만 이 결과를 보면서 마음에 조금 안드는면이 있겠죠? 디자인 부분이 그러하다면 css의 수치나 색상, 코드등을 수정하여 다시 결과창에 나타나는 모습을 볼 수가 있고요. 스크립트를 수정하면 기능적으로 작동되는 모습이 달라져 결과가 나타나는것을 바로 확인가능합니다.

이 정도면 만족스러운데? 하는 순간이 온다면 그 코드를 그대로 복사해서 블로그의 html편집창이나 본문등에 쉽게 붙여넣기하여 코드를 완성하면 되겠습니다. 이 사이트로 여러가지 코드들을 넣어보고 수정해본다면 html코드등을 다루는데도 많은 도움이 됩니다. 별도의 프로그램없이 어떤 컴퓨터에서나 동일하게 브라우저하나만으로 확인가능하다는점이 가장 큰 장점으로 다가오는 'jsbin' 사이트입니다. 필수로 저장해두고 사용하기를 추천드립니다.

이 글의 카테고리 : 추천유틸도구