웹 개발자 필수 html/css 미리보기 웹사이트 - CssDesk

웹 개발자라던지 테터툴즈나 티스토리 같은 블로그의 주인이라면 html을 많이 이용하는데요, html코드와 css를 입력하면 나모 웹 에디터처럼 미리 볼 수 있도록 해주는 사이트가 있습니다. 바로 CssDesk라는 사이트인데요. 이 포스트에서는 이 사이트에 대해 다루도록 하겠습니다. 주소 : http://cssdesk.com/ 사용방법은 정말 간단합니다. 첫 화면입니다. 왼쪽에 html 과 css를 입력하면 오른쪽에 미리보기가 뜨는 형식이죠. 왼쪽에 html 에바로 내용을 입력하시면 됩니다. 따로 <body>를 쓰지않아도 되구요, 나중에 다운로드하면 자동적으로 입력이 되어있습니다. (물론 하고싶으시면 하도도 됩니다 ^^) 제가 급하게 수정을 해봤는데 입력하는 즉시 바로바로..</p> </a> <div class="detail_info"> <a href="/category/%EB%AF%B8%EC%82%AC%EC%9A%A9/%23%23%EC%9B%B9%EC%84%9C%EB%B9%84%EC%8A%A4%20%EC%86%8C%EA%B0%9C-%EB%A6%AC%EB%B7%B0" class="link_cate">미사용/##웹서비스 소개-리뷰</a> <span class="txt_bar"></span> 2011.11.27 11:22 </div> </div> </div> <div class="area_paging area_paging_list"> <span class="inner_paging"> <a class="ico_skin link_prev no-more-prev">이전</a> <a class="link_page"><span class="selected">1</span></a> <a class="ico_skin link_next no-more-next">다음</a> </span> </div> <div class="area_paging area_paging_simple"> <div class="inner_paging"> <a class="link_prev no-more-prev"> <span class="ico_skin ico_prev"></span>이전 </a> <a class="link_next no-more-next"> 다음<span class="ico_skin ico_next"></span> </a> </div> </div> <div id="mEtc" class="wrap_etc"> <div class="inner_aside"> <!-- 공지사항 --> <div class="box_aside"> <strong>공지사항</strong> <ul class="list_board"> </ul> </div> <!-- 최근에 올라온 글 --> <div class="box_aside"> <strong>최근에 올라온 글</strong> <ul class="list_board"> <li><a href="/229" class="link_board">pwntools gdb.attach 사용..</a></li> <li><a href="/228" class="link_board">가상함수(Virtual function..</a></li> <li><a href="/225" class="link_board">[MIPS] strcmp</a></li> <li><a href="/224" class="link_board">Ubuntu MIPS ARM 크로스 컴..</a></li> </ul> </div> <!-- 최근에 달린 댓글 --> <div class="box_aside"> <strong>최근에 달린 댓글</strong> <ul class="list_board"> <li><a href="/216#comment13170018" class="link_board">옴뇸뇸</a></li> <li><a href="/169#comment13068235" class="link_board">글에 올라와있는 링크 다 막혀..</a></li> <li><a href="/30#comment13052262" class="link_board">네, 2019년 01월 01일 기준,..</a></li> <li><a href="/167#comment12935426" class="link_board">썩었네요</a></li> </ul> </div> <!-- 방문자수 --> <div class="box_aside lst"> <dl class="list_total"> <dt>Total</dt> <dd>1,168,442</dd> </dl> <dl class="list_visitor"> <dt>Today</dt> <dd>17</dd> </dl> <dl class="list_visitor"> <dt>Yesterday</dt> <dd>83</dd> </dl> </div> <!-- 링크 --> <div class="box_aside"> <strong>링크</strong> <ul class="list_board"> <li><a href="https://krang.tistory.com" class="link_board" target="_blank">Krang 님의 블로그</a></li> <li><a href="https://bloggertip.com" class="link_board" target="_blank">블로거팁닷컴 (ZET님의 블로그)</a></li> <li><a href="https://dowajo.tistory.com" class="link_board" target="_blank">멋진성이님의 블로그</a></li> <li><a href="http://cafe.naver.com/dowajo" class="link_board" target="_blank">컴퓨터 A/S 문제해결카페 (컴..</a></li> <li><a href="https://arrestlove.tistory.com" class="link_board" target="_blank">물여우님의 블로그</a></li> <li><a href="http://www.choboweb.com/" class="link_board" target="_blank">웹초보님의 블로그</a></li> <li><a href="http://cafe.naver.com/malzero" class="link_board" target="_blank">바이러스 제로 시즌2 카페</a></li> <li><a href="https://moongoon.tistory.com" class="link_board" target="_blank">slayer의 포토블로그</a></li> <li><a href="http://webcoder.tistory.com" class="link_board" target="_blank">WebZin님의 블로그</a></li> <li><a href="https://muzbox.tistory.com" class="link_board" target="_blank">어떤오후의 프리웨어 이야기</a></li> <li><a href="https://hanul3.tistory.com" class="link_board" target="_blank">책읽어주는남자 한얼</a></li> <li><a href="https://yj8318.tistory.com" class="link_board" target="_blank">8318's Story</a></li> <li><a href="https://pigmovie.tistory.com" class="link_board" target="_blank">Pig&Movie</a></li> <li><a href="" class="link_board" target="_blank"></a></li> <li><a href="https://provier.tistory.com" class="link_board" target="_blank">Provier Blog</a></li> <li><a href="http://juwon0407.blog.me/" class="link_board" target="_blank">JW World</a></li> <li><a href="https://grini25.tistory.com" class="link_board" target="_blank">GRINI</a></li> </ul> </div> <!-- 태그 클라우드 --> <div class="box_aside"> <strong>TAG</strong> <ul class="list_tag"> <li><a href="/tag/%EC%BB%B4%ED%93%A8%ED%84%B0%EC%86%8D%EB%8F%84" class="link_tag cloud4">컴퓨터속도</a></li> <li><a href="/tag/%EC%B5%9C%EC%A0%81%ED%99%94" class="link_tag cloud3">최적화</a></li> <li><a href="/tag/%ED%95%B4%EC%BB%A4%20%EC%8A%A4%EC%BF%A8" class="link_tag cloud3">해커 스쿨</a></li> <li><a href="/tag/%EC%9B%8C%EA%B2%8C%EC%9E%84" class="link_tag cloud3">워게임</a></li> <li><a href="/tag/%EC%82%AC%EC%A7%84" class="link_tag cloud3">사진</a></li> <li><a href="/tag/It" class="link_tag cloud2">It</a></li> <li><a href="/tag/%EC%86%8D%EB%8F%84" class="link_tag cloud4">속도</a></li> <li><a href="/tag/%EC%BB%B4%ED%93%A8%ED%84%B0" class="link_tag cloud4">컴퓨터</a></li> <li><a href="/tag/WarGame" class="link_tag cloud1">WarGame</a></li> <li><a href="/tag/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8" class="link_tag cloud4">프로그램</a></li> <li><a href="/tag/%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8" class="link_tag cloud4">비밀번호</a></li> <li><a href="/tag/%EB%84%A4%EC%9D%B4%EB%B2%84" class="link_tag cloud3">네이버</a></li> <li><a href="/tag/%EC%9C%88%EB%8F%84%EC%9A%B07" class="link_tag cloud3">윈도우7</a></li> <li><a href="/tag/%ED%95%B4%ED%82%B9" class="link_tag cloud4">해킹</a></li> <li><a href="/tag/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%EC%86%8C%ED%94%84%ED%8A%B8" class="link_tag cloud4">마이크로소프트</a></li> <li><a href="/tag/%ED%8C%A8%EC%8A%A4%EC%9B%8C%EB%93%9C" class="link_tag cloud4">패스워드</a></li> <li><a href="/tag/%EB%B3%B4%EC%95%88" class="link_tag cloud3">보안</a></li> <li><a href="/tag/ftz" class="link_tag cloud1">ftz</a></li> <li><a href="/tag/%EB%B2%84%ED%8D%BC%20%EC%98%A4%EB%B2%84%ED%94%8C%EB%A1%9C%EC%9A%B0" class="link_tag cloud3">버퍼 오버플로우</a></li> <li><a href="/tag/%EC%95%85%EC%84%B1%EC%BD%94%EB%93%9C" class="link_tag cloud3">악성코드</a></li> <li><a href="/tag/%EC%9D%B8%ED%84%B0%EB%84%B7" class="link_tag cloud3">인터넷</a></li> <li><a href="/tag/C%EC%96%B8%EC%96%B4" class="link_tag cloud4">C언어</a></li> <li><a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8" class="link_tag cloud4">블로그</a></li> <li><a href="/tag/%EB%B0%94%EC%9D%B4%EB%9F%AC%EC%8A%A4" class="link_tag cloud3">바이러스</a></li> <li><a href="/tag/%EB%B0%B1%EC%8B%A0" class="link_tag cloud3">백신</a></li> <li><a href="/tag/%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80" class="link_tag cloud4">웹페이지</a></li> <li><a href="/tag/%EC%95%84%EC%9D%B4%EC%BD%98" class="link_tag cloud4">아이콘</a></li> <li><a href="/tag/%EC%8B%9C%EC%8A%A4%ED%85%9C%20%ED%95%B4%ED%82%B9" class="link_tag cloud3">시스템 해킹</a></li> <li><a href="/tag/hackerschool" class="link_tag cloud2">hackerschool</a></li> <li><a href="/tag/%EC%9C%88%EB%8F%84%EC%9A%B0" class="link_tag cloud3">윈도우</a></li> </ul> <a href="/tag" class="link_more">more</a> </div> <!-- 달력 --> <div class="box_aside"> <table class="tt-calendar" cellpadding="0" cellspacing="1" style="width: 100%; table-layout: fixed"> <caption class="cal_month"> <a href="/archive/201907" title="1개월 앞의 달력을 보여줍니다.">«</a>   <a href="/archive/201908" title="현재 달의 달력을 보여줍니다.">2019/08</a>   <a href="/archive/201909" title="1개월 뒤의 달력을 보여줍니다.">»</a> </caption> <thead> <tr> <th class="cal_week2">일</th> <th class="cal_week1">월</th> <th class="cal_week1">화</th> <th class="cal_week1">수</th> <th class="cal_week1">목</th> <th class="cal_week1">금</th> <th class="cal_week1">토</th> </tr> </thead> <tbody> <tr class="cal_week"> <td class="cal_day1"> </td> <td class="cal_day1"> </td> <td class="cal_day1"> </td> <td class="cal_day1"> </td> <td class=" cal_day cal_day3">1</td> <td class=" cal_day cal_day3">2</td> <td class=" cal_day cal_day3">3</td> </tr> <tr class="cal_week"> <td class=" cal_day cal_day_sunday cal_day3">4</td> <td class=" cal_day cal_day3"><a class="cal_click" href="/archive/20190805">5</a></td> <td class=" cal_day cal_day3">6</td> <td class=" cal_day cal_day3">7</td> <td class=" cal_day cal_day3">8</td> <td class=" cal_day cal_day3">9</td> <td class=" cal_day cal_day3">10</td> </tr> <tr class="cal_week"> <td class=" cal_day cal_day_sunday cal_day3">11</td> <td class=" cal_day cal_day3">12</td> <td class=" cal_day cal_day3">13</td> <td class=" cal_day cal_day3">14</td> <td class=" cal_day cal_day3">15</td> <td class=" cal_day cal_day3">16</td> <td class=" cal_day cal_day3">17</td> </tr> <tr class="cal_week cal_current_week"> <td class=" cal_day cal_day_sunday cal_day3">18</td> <td class=" cal_day cal_day4">19</td> <td class=" cal_day cal_day3">20</td> <td class=" cal_day cal_day3">21</td> <td class=" cal_day cal_day3">22</td> <td class=" cal_day cal_day3">23</td> <td class=" cal_day cal_day3">24</td> </tr> <tr class="cal_week"> <td class=" cal_day cal_day_sunday cal_day3">25</td> <td class=" cal_day cal_day3">26</td> <td class=" cal_day cal_day3">27</td> <td class=" cal_day cal_day3">28</td> <td class=" cal_day cal_day3">29</td> <td class=" cal_day cal_day3">30</td> <td class=" cal_day cal_day3">31</td> </tr> </tbody> </table> </div> <!-- 글 보관함 --> <div class="box_aside lst"> <strong>글 보관함</strong> <ul class="list_keep"> <li><a href="/archive/201908" class="link_keep">2019/08</a> (1)</li> <li><a href="/archive/201907" class="link_keep">2019/07</a> (1)</li> <li><a href="/archive/201804" class="link_keep">2018/04</a> (1)</li> <li><a href="/archive/201803" class="link_keep">2018/03</a> (2)</li> <li><a href="/archive/201603" class="link_keep">2016/03</a> (2)</li> </ul> </div> </div> </div> </div> </div> <hr class="hide"> <div id="dkFoot" role="contentinfo" class="area_foot"> Blog is powered by <em class="emph_t">Tistory</em> / Designed by <em class="emph_t">Tistory</em> </div> </div> <script src="https://tistory2.daumcdn.net/tistory/406246/skin/images/script.js"></script> <script> (function($) { $.Area.init(); })(jQuery); </script> <script type="text/javascript"> document.oncontextmenu = new Function ('return false'); document.ondragstart = new Function ('return false'); document.onselectstart = new Function ('return false'); document.body.style.MozUserSelect = 'none'; </script> <script type="text/javascript" src="https://t1.daumcdn.net/tistory_admin/assets/blog/0ccc8ebc82d8ddff2b5d35df8bbed2d6312aba8f/blogs/plugins/PreventCopyContents/js/functions.js?_version_=0ccc8ebc82d8ddff2b5d35df8bbed2d6312aba8f"></script> <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script> <script> (function($) { $("body").bind('copy', function (e) { var url = document.location.href, decodedUrl = decodeURI(url), selection = window.getSelection(); if (typeof window.getSelection == "undefined") {//IE8 or earlier... event.preventDefault(); var pagelink = '\n\n 출처: ' + decodedUrl, copytext = selection + pagelink; if (window.clipboardData) { window.clipboardData.setData('Text', copytext); } return; } var body_element = document.getElementsByTagName('body')[0]; //if the selection is short let's not annoy our users if (("" + selection).length < 30) return; //create a div outside of the visible area var newdiv = document.createElement('div'); newdiv.style.position = 'absolute'; newdiv.style.left = '-99999px'; body_element.appendChild(newdiv); newdiv.appendChild(selection.getRangeAt(0).cloneContents()); //we need a <pre> tag workaround //otherwise the text inside "pre" loses all the line breaks! if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") { newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>"; } newdiv.innerHTML += '<br /><br />출처: <a href="' + url + '">' + decodedUrl + '</a> [nothing blog]'; selection.selectAllChildren(newdiv); window.setTimeout(function () { body_element.removeChild(newdiv); }, 200); }); })(tjQuery); </script> <script> lightbox.option({ "fadeDuration": 200, "resizeDuration": 200, "wrapAround": false, "albumLabel": "%1 / %2", "fitImagesInViewport":true , "stopEvent": false }) </script><script type="text/javascript"> var _tiq = 'undefined' !== typeof _tiq ? _tiq : []; _tiq.push(['__setConfig', {enableScroll:true, enableClick:true, enableButton:true}]); _tiq.push(["__setParam", "svcdomain", "user.tistory.com"]); (function(d) { var se = d.createElement('script'); se.type = 'text/javascript'; se.async = true; se.src = location.protocol + '//m2.daumcdn.net/tiara/js/td.min.js'; var s = d.getElementsByTagName('head')[0]; s.appendChild(se); })(document); _tiq.push(['__setParam', 'param_ex', JSON.stringify({"userId":"305661","blogId":"406246","role":"guest","filterTarget":false,"entryId":"164"})]); _tiq.push(['__trackPageview']); _tiq.push(['__content', 't_content', { 'c_id':'406246_164', 'c_title':'웹 개발자 필수 html/css 미리보기 웹사이트 - CssDesk', 'type':'article', 'author':'', 'author_id':'305661', 'cp':'nothing blog', 'cp_id':'406246', 'regdata':'2011-11-27 11:22:24', 'plink':'https://cosyp.tistory.com/164', 'media':'pcweb', }]); var addEvent = function (evt, fn) { window.addEventListener ? window.addEventListener(evt, fn, false) : window.attachEvent('on' + evt, fn); }; var removeEvent = function(evt, fn) { window.removeEventListener ? window.removeEventListener(evt, fn, false) : window.detachEvent('on' + evt, fn);}; var ua = navigator.userAgent.toLowerCase(); var isIOS = /iP[ao]d|iPhone/i.test(ua); var contentExStat = function() { _tiq.push(['__content', 't_content_ex', { 'data_type':'usage' , 'meta': { 'c_id':'406246_164', 'c_title':'웹 개발자 필수 html/css 미리보기 웹사이트 - CssDesk', 'type':'article', 'author':'', 'author_id':'305661', 'cp':'nothing blog', 'cp_id':'406246', 'regdata':'2011-11-27 11:22:24', 'plink':'https://cosyp.tistory.com/164', 'media':'pcweb', } }]); removeEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); }; addEvent(isIOS ? 'pagehide' : 'beforeunload', contentExStat); </script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || []; window.roosevelt_params_queue.push({channel_id: "dk", channel_label: 'tistory'});</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async></script><script type="text/javascript">if(window.console!=undefined){setTimeout(console.log.bind(console,"%cTISTORY","font:8em Arial;color:#EC6521;font-weight:bold"),0);setTimeout(console.log.bind(console,"%c 나를 표현하는 블로그","font:2em sans-serif;color:#333;"),0);}</script><iframe style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//cosyp.tistory.com/api" id="editEntry"></iframe><div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div><div id="tistoryEtcLayer" class="layer_post"></div><div id="tistorySnsLayer" class="layer_post"></div></body> </html>