html, css 배우고 연습할 수 있는 사이트 - htmlPlayground

티스토리나 테터툴즈, 텍스트큐브 그외 설치형 블로그나 웹사이트를 운영하는 분이라면 자주 마딱뜨리는게 html 일 것이다  html로 인하여 티스토리는 스킨에 대해 엄청난 자유도를 가지게 되었지만, html 을 모르는 초보분들에게는 티스토리를 포기하게 되는 큰 이유가 되기도 한다  하지만, 조금만더 인내를 가지고 블로그를 운영하다 보면 html은 그닥 두려움의 대상이 아니라 정말 유용하다는걸 느끼게 될 것이다

본인의 경우도 html 에 대해서는 정말 아는바가 적었지만, 티스토리를 쓰다보니 html 에 대해서는 어느듯 친숙해 졌고 css 도 점점 눈에 익어 처음의 두려움은 이젠 전혀 없을 뿐만 아니라 어느정도 원하는 바대로 수정도 가능하게 되었다 (물론 지금도 html 이나 css에 대한 지식은 초보 수준이지만 ^^;;;)

지금 소개하는 htmlPlayground는 html 에 관해 배울 수 있고, 연습도 할 수 있는 사이트이다  각각의 코드에 대한 설명과 예제를 포함하고 있기 때문에 html 을 배우고 연습하기에 꽤나 괜찮은 사이트가 아닐까 싶다  사이트에 관해 간략하게 살펴보도록 하겠다

위 처럼 4개로 구역이 나누어져 있다  1번에는 html, css 의 여러 코드가 순서대로 나열 되어 있다  테스트겸 table 을 클릭하니 2번창에 설명이 나온다  아쉬운건 영어라는 것이다  그리고, 4번에 예제로 table 이 어떻게 쓰이는지 코드가 나와 있고, 그옆에 적용된 2X2 테이블이 나와 있다

4번 예제에서 초록색 글자를 클릭하면 3번창에 클릭한 html 코드와 연관이 있는 코드의 리스트가 나온다  3번창에서 원하는걸 선택하면 4번 예제에 바로 적용이 된다  위 이미지는 바탕색을 파랑과 노랑을 선택해서 입혀 봤다  4번창의 상단 메뉴 modifiy code를 이용해 직접 수정도 가능하다  이걸 적절히 이용하면 원하는 html 코드를 짜는데 여러모로 수월하리라 생각된다

본인이 처음부터 html 코드를 만들어서 테스트 하고 싶으면 4번창 상단 메뉴의 modify code를 클릭해 기존의 내용을 모두 지우고, 새로운 코드를 입력하면 된다  내 블로그의 피드구독 버튼 코드를 테스트 해 봤다

css 에 관한 내용도 해볼 수 있고, 검색을 통해 바로 원하는 코드를 찾을 수도 있다

이 서비스는 아래의 주소에서 이용해 볼 수 있다

http://htmlplayground.com/