JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<!--
Copyright(c)2014 Mingi Choi All rights reserved
Author Contact : [email protected]
-->
<meta charset="UTF-8">
<title>[##_page_title_##] - [##_title_##]</title>
<link rel="stylesheet" href="./style.css" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" type="text/css" /> <!-- 나눔고딕 구글 웹폰트 -->
<link rel="shortcut icon" href="./images/favicon.ico" />
<link rel="alternative" href="[##_rss_url_##]" type="application/rss+xml" />
<!-- 하위버전 호환 스크립트 -->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<!-- 하위버전 호환 스크립트(HTML5) -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<s_t3>
<header><!-- 헤더 -->
<div id="he_logo"><!-- 로고 -->
<div id="logo" class="v_center1">
<!-- alt 값에 블로그 이름을 넣어주세요. -->
<a href="[##_blog_link_##]"><img src="./images/img_logo_m.png" class="logo_main" alt="블로그 이름" /></a>
<!-- alt 값에 블로그 부제를 입력해주세요. -->
<br/><img src="./images/img_logo_s.png" alt="블로그 부제" />
</div>
</div>
</header>
<section><!-- 컨텐츠 영역 -->
<nav><!-- 메뉴 -->
<div id="an_menu"><!-- 메뉴 -->
<div id="menu" class="v_center1">
<ul class="ul_nonstyle">
<li class="f_left"><a href="[##_blog_link_##]"><span class="span_bold">블로그</span></a></li>
<li class="f_right">
<ul class="ul_nonstyle">
<li class="f_left"><a href="[##_taglog_link_##]"><span class="menu_add">태그</span></a></li>
<li class="f_left"><a href="[##_guestbook_link_##]"><span class="menu_add">방명록</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<aside class="f_left"><!-- 사이드바 -->
<s_sidebar><!--...
CSS
@CHARSET "UTF-8";
/*
Copyright(c)2014 Mingi Choi All rights reserved
Author Contact : [email protected]
*/
/* commonness */
* { margin : 0px ; /* 마진 0 */
padding : 0px ; /* 패딩 0 */ }
* { font-size : 11pt ; /* body 태그 폰트 11pt */ }
a:link { color : black ; /* a태그 폰트 색 검정 */
text-decoration : none ; /*링크 밑줄 제거 */ }
a:visited { color : black ; /*방문링크 글자색 검정*/
text-decoration : none ; /* 방문링크 밑줄 제거 */ }
a:hover { color : gray ; /* 마우스 올려놓은 링크 회색 */ }
a:active { color : darkgray ; /*클릭한 링크 다크그레이 */ }
input[type="radio"] { display : none ; }
input[type="text"] { font-size : 10pt ; }
input[type="password"] { font-size : 10pt ; }
textarea { font-size : 10pt ;
width : 785px ;
margin-bottom : 2px ; }
.span_bold { font-weight : bold ; /* 글자 굵게 */ }
.color_gray { color : gray ; } /* 텍스트 색상 회색 */
.f_left { float : left ; } /* 좌측정렬 */
.f_right { float : right ; } /*우측정렬 */
.h_center1 { margin : 0 auto ; } /* 가로 우측정렬 방법 1 */
.h_center2 { text-align : center ; } /* 가로 우측정렬 방법 2 */
.v_center1 { display : table-cell;
vertical-align : middle ; } /* 세로 우측정렬 방법 1 */
.ul_nonstyle { list-style : none; }
.li_overflip { white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ; } /* 영역 넘어가는 글 자르기 */
.div_clearboth { clear : both ;
margin-bottom : 10px ; } /* 영역 구분(엔터) + 아래 10px 마진 */
.display_inlineBlock { display : inline-block ; /* floated li 대응 */ }
/* 탭 코드 css */
.tabs_con input:nth-of-type(1) ~ div:nth-of-type(2),
.tabs_con input:nth-of-type(2) ~ div:nth-of-type(3) { display : none ; }
.tabs_con input:nth-of-type(1):checked ~ div:nth-of-type(2),
.tabs_con input:nth-of-type(2):checked ~ div:nth-of-type(3) { display : block ; }
.tabs_labels label { color : #bababa ; }
.tabs_labels_con { display : table-cell ;
vertical-align : middle ; }
.tabs_labels label:hover { color : #636363 ; }
.tabs_con input:nth-of-type(1):checked ~ .tabs_labels label:nth-of-type(1), .tabs_con input:nth-of-type(2):checked ~ .tabs_labels...