티스토리 뷰


웹 개발자라던지 테터툴즈나 티스토리 같은 블로그의 주인이라면 html을 많이 이용하는데요, html코드와 css를 입력하면 나모 웹 에디터처럼 미리 볼 수 있도록 해주는 사이트가 있습니다. 바로 CssDesk라는 사이트인데요. 이 포스트에서는 이 사이트에 대해 다루도록 하겠습니다.


주소 : http://cssdesk.com/

사용방법은 정말 간단합니다.


첫 화면입니다. 왼쪽에 html 과 css를 입력하면 오른쪽에 미리보기가 뜨는 형식이죠. 왼쪽에 html 에바로 내용을 입력하시면 됩니다. 따로 <html><head><title><body>를 쓰지않아도 되구요, 나중에 다운로드하면 자동적으로 입력이 되어있습니다. (물론 하고싶으시면 하도도 됩니다 ^^)


제가 급하게 수정을 해봤는데 입력하는 즉시 바로바로 오른쪽 미리보기가 수정이 됩니다. 그리고 오른쪽 위에 Download버튼을 누르시면 자신이 입력한 소스가 컴퓨터에 다운로드가 되는데요, css는 따로 파일로 생기는것이 아니고 한 소스안에 포함이 되어져서 다운로드가 됩니다.



다운로드된 파일의 소스입니다. css는 한 파일안에 포함이 되어있는데, 저게 싫으시면 저기 css 부분을 복사해서 style.css 파일을 새로 만드시면 됩니다.

나모 웹 에디터같은 프로그램이 있으면 훨씬 더 편리하겠지만 나모처럼 이런저런 기능이 없이 단순히 html/css를 테스트해보고 싶으신분들에게는 정말 좋은 사이트인 것 같습니다. 아 그리고 소스를 다운받아서 실행시켜보면 한글이 깨져나올 수 있는데요, 폰트를 바꿔보세요, cssdesk에 기본 설정되어있는 폰트는 한글이란 맞지 않아서 저도 처음엔 깨지더라구요. 그런데 소스에서 폰트를 없애고 나니깐 다시 제대로 나왔습니다. 참고하세요 ~


올블로그추천버튼 블코추천버튼한RSS추가버튼 구글리더기추천버튼 FeedBurner구독하기  컴초모카페로

    글이 마음에 드셨다면 추천버튼 꾸욱! 블로그를 구독하고 싶으시다면 HanRSS, GoogleReader, FeedBurner 버튼을 꾸욱!
저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
댓글
댓글쓰기 폼