웹 개발자 필수 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>
