HTML, CSS, Javascript 웹에서 코드 테스트하는 사이트

HTML, CSS, Js 등을 테스트하고 싶은데 PC에서 하기는 귀찮고,

바로 웹에서 실시간으로 적용된 화면을 보면서 하고 싶다면

이 사이트를 이용해보시기 바랍니다.

Jsbin이라는 사이트이며 상단의 링크로 바로 이동가능합니다.

코드를 입력 시 바로 출력해서 보여주고 따로 설치할 것은 없습니다.

간단하게 코드 확인용으로 좋은 사이트입니다.

해당 사이트를 이용하는 방법에 대해 간단히 알아보겠습니다.

사이트에 접속하면 상단과 같은 화면을 확인할 수 있습니다.

기본적으로 HTML화면과 output(출력) 화면이 보입니다.

화면 중앙에 HTML 외의 CSS, Javascript, Console 버튼이 있습니다.

자신이 확인해보고 싶은 메뉴를 클릭합니다.

CSS와 Javascript 버튼을 클릭하였습니다.

상단에 해당 메뉴들의 화면도 보이게 변경되었습니다.

CSS 화면에 코드를 입력한 화면입니다.

Body 태그에 색상 값을 입력하였더니 Output에 바로 적용되어 보여집니다.

새로고침이나 버튼 클릭이 필요없이 실시간으로 적용되어 보여집니다.

이번에는 Javascript 코드 입력화면입니다.

alert에 테스트라는 문구를 입력하고 우측의 Run With JS 버튼을 클릭하였습니다.

정상적으로 alert에 입력된 문구가 출력되는 것을 확인할 수 있습니다.

JS도 CSS처럼 실시간으로 확인하고 싶다면 우측의 Auto-run JS 라는 메뉴를

클릭하여 체크하면 스크립트도 입력 시 실시간으로 적용되어 출력되게 됩니다.

공부하는 세상