본문 바로가기

프로그래밍/HTML CSS

[HTML] HTML 코드 테스트 하기 +CSS +JavaScript

사이트나 티스토리에서 HTML이나 CSS코드 또는 JavaScript코드를 작성할 때 매번 작성 후 적용해보고 하는게 여간 번거로운 일이 아닙니다.

따라서 테스트 후에 적용 해볼 수 있으면 정말 좋겠죠?

작성한 코드를 곧바로 적용해서 결과를 옆창에서 확인해 볼 수 있는 사이트가 있습니다.

두 사이트가 있는데요,


첫 번째 사이트 W3Schools

첫 번째는 바로 유명한 코딩 교육 사이트인 w3schools 입니다.

W3Schools is a popular web site for learning web technologies online. Content includes tutorials and references relating to HTMLCSSJavaScriptPHPAngularJSSQLBootstrapNode.js, and jQuery. It receives more than 10 million unique visitors monthly.

출처 : 위키피디아


매달 방문자수가 천만명을 넘어가며, 위 처럼 다양한 종류의 웹 프로그래밍 언어를 교육하는 사이트입니다.

w3schools에서 제공하는 코드 작성 테스트 페이지가 있습니다.

사용법 및 링크

사용법이라고 하기 민망할 정도로 간단합니다. 그냥 옆에 html, javascript, css 코드를 작성 후 Run버튼을 클릭하기만 하면 결과가 오른쪽 창에 나타납니다.

아래 링크를 타고 들어가시면 HTML 을 곧바로 테스트 해보실 수 있습니다.

html 테스트 페이지

저는 북마크 해놓고 html, javascript, css 관련 포스팅을 할 때 이용합니다.


media 쿼리로 반응형 스킨을 만들때 저 오른쪽 창의 크기가 윈도우 창 크기 역할을 합니다.

따라서 반응형 스킨 제작시에도 css를 이용해 media쿼리를 테스트 해보기가 용이합니다. 


두 번째 사이트 liveweave

위의 테스트 페이지가 정말 간단한 테스트를 위한 페이지 였다면 이번엔 좀 더 깔끔한 UI를 가진 테스트 페이지를 소개해 드리겠습니다.


사실 제가 실제로 사용하는 페이지 인데요.

HTML, CSS, Javascript의 작성 구간이 나누어져 있으며 하나로 통합하여 html파일로 저장해주는 기능 또한 있습니다.


편집 할 시에는 각 창을 확대해서 편집 할수도 있구요. 물론 결과창 또한 확대해서 확인이 가능합니다.

티스토리 블로그 수정을 테스트할 때 매우 용이합니다.




이 테스트 페이지들을 알게 된 이후로 메모장으로 html을 작성해서 html파일로 저장 후 테스트 해보곤 했었습니다...

정말 피곤 한 일이죠.

혹시 모르시는 분이 계셨다면 북마크 해두시고 사용해보세요.

유용한 정보가 되었길 바랍니다.


감사합니다.