<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="Mind freaker stuff (Mindfreakerstuff.com) is a blog for Design inspiration, tutorials and latest mobile/Gadgets review . Learn Design Theory, Typography, Website Design, MS office Tips and latest android mobiles/apps more.">
<title>스킨보기</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
}
h2 { font-size: 2.8rem; text-align: center; color: #000; }
.container {width: 100%; margin: 10px auto;}
.anne { clear: both; width: 800px; margin: 20px auto ; font-size: 18px; }
.anne li { line-height: 170%; }
.anne li:before { content: '\2022'; display: inline-block; vertical-align: baseline; margin: 0 8px 0 0; }
ul.tabs {
	width: 600px;
	display: flow-root;
	margin: 0 auto;
	padding:0;
	list-style: none;
	font-weight:bold;
}
ul.tabs li {
	float: left;
	margin: 0 4px;
	padding: 0;
	overflow: hidden;
	position: relative;
	width: calc(25% - 8px);
	text-align: center; 
	box-sizing: border-box;
	
}
ul.tabs li a {
	padding: 10px;
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 16px;
	outline: none;
	border: 1px solid #00a1e9;
	border-radius: 20px;
}

ul.tabs li a:hover {
	background: #00a1e9;
	color: #fff;
}	
html ul.tabs li.active, html ul.tabs li.active a {
	color: #fff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #00a1e9;
	border-radius: 20px;
	color: #fff;
}
.tab_container {
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
	margin: 10px;
	font-size: 16px;
	display: flow-root;
}
.tab_content .con { float: left; box-sizing: border-box; width: calc(50% - 25px); margin: 0 50px 0 0; display: flow-root; }
.tab_content .con:last-child { margin: 0; }
.tab_content .con > div { float: left; width: calc(33.333333333% - 7px); }
.tab_content .con > div span { display: inline-block; font-size: 16px; text-align: center; margin: 0 0 8px 0; width: 100%; }
.tab_content .con > div:nth-child(1) { float: none; clear: both; font-size: 20px; background-color: #959595; width: 25px; border-radius: 20px; padding: 5px; text-align: center; color: #fff; font-weight: bold; margin: 0 auto 20px auto; }
.tab_content .con > div:nth-child(3) { margin: 0 10px; }
.tab_content .con > div:nth-child(3) img { height: 300px; }
.tab_content .con > div:nth-child(4) img { }
.tab_content .con > div:nth-child(4) span { color: blue; }

.tab_content .con > div a { display: block; max-width: 100%; width: 100%; height: 600px; border: 1px solid #c9c9c9; box-sizing: border-box; overflow: hidden; }
.tab_content .con > div a img { display: block; max-width: 100%; height: 600px; }

.tab_content .con > div:hover a img { transform: scale(1.1); transition: 0.5s; }

</style>
</head>

<body>

<div class="container">

	<h2>기관 홈페이지 스킨 미리보기</h2>

    <ul class="tabs">
      <li><a href="#tab1">스킨1-스킨2</a></li>
      <li><a href="#tab2">스킨3-스킨4</a></li>
	  <li><a href="#tab3">스킨5-스킨6</a></li>
	  <li><a href="#tab4">스킨7-스킨8</a></li>
    </ul>

	<ul class="anne">
		<li>PC 첫화면, PC 서브화면, 모바일 화면 미리보기를 확인하실 수 있습니다.</li>
		<li>이미지 클릭 시 원본사이즈로 크게 확대 하여 보실 수 있습니다.</li>
		<li>실제 작업 시에는 웹표준, 웹접근성, 웹편의성 등의 기준 준수를 위해 디자인이 변경될 수 있습니다.</li>
	</ul>

	<div class="tab_container">
        <div id="tab1" class="tab_content">
			<div class="go01 con">
				<div>1</div>
				<div><span>[PC 첫화면]</span><a href="img/go01_main.jpg"><img src="img/go01_main.jpg" alt="기관스킨1번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go01_sub.jpg"><img src="img/go01_sub.jpg" alt="기관스킨1번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go01_mobile2.jpg"><img src="img/go01_mobile.jpg" alt="기관스킨1번 모바일 미리보기" /></a></div>
			</div>
			<div class="go02 con">
				<div>2</div>
				<div><span>[PC 첫화면]</span><a href="img/go02_main.jpg"><img src="img/go02_main.jpg" alt="기관스킨2번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go02_sub.jpg"><img src="img/go02_sub.jpg" alt="기관스킨2번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go02_mobile2.jpg"><img src="img/go02_mobile.jpg" alt="기관스킨2번 모바일 미리보기" /></a></div>
			</div>
        </div>
        <div id="tab2" class="tab_content">
			<div class="go03 con">
				<div>3</div>
				<div><span>[PC 첫화면]</span><a href="img/go03_main.jpg"><img src="img/go03_main.jpg" alt="기관스킨3번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go03_sub.jpg"><img src="img/go03_sub.jpg" alt="기관스킨3번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go03_mobile2.jpg"><img src="img/go03_mobile.jpg" alt="기관스킨3번 모바일 미리보기" /></a></div>
			</div>
			<div class="go04 con">
				<div>4</div>
				<div><span>[PC 첫화면]</span><a href="img/go04_main.jpg"><img src="img/go04_main.jpg" alt="기관스킨4번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go04_sub.jpg"><img src="img/go04_sub.jpg" alt="기관스킨4번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go04_mobile2.jpg"><img src="img/go04_mobile.jpg" alt="기관스킨4번 모바일 미리보기" /></a></div>
			</div>
        </div>
        <div id="tab3" class="tab_content">
			<div class="go05 con">
				<div>5</div>
				<div><span>[PC 첫화면]</span><a href="img/go05_main.jpg"><img src="img/go05_main.jpg" alt="기관스킨5번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go05_sub.jpg"><img src="img/go05_sub.jpg" alt="기관스킨5번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go05_mobile2.jpg"><img src="img/go05_mobile.jpg" alt="기관스킨5번 모바일 미리보기" /></a></div>
			</div>
			<div class="go06 con">
				<div>6</div>
				<div><span>[PC 첫화면]</span><a href="img/go06_main.jpg"><img src="img/go06_main.jpg" alt="기관스킨6번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go06_sub.jpg"><img src="img/go06_sub.jpg" alt="기관스킨6번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go06_mobile2.jpg"><img src="img/go06_mobile.jpg" alt="기관스킨6번 모바일 미리보기" /></a></div>
			</div>
        </div>
        <div id="tab4" class="tab_content">
			<div class="go07 con">
				<div>7</div>
				<div><span>[PC 첫화면]</span><a href="img/go07_main.jpg"><img src="img/go07_main.jpg" alt="기관스킨7번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go07_sub.jpg"><img src="img/go07_sub.jpg" alt="기관스킨7번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go07_mobile2.jpg"><img src="img/go07_mobile.jpg" alt="기관스킨7번 모바일 미리보기" /></a></div>
			</div>
			<div class="go08 con">
				<div>8</div>
				<div><span>[PC 첫화면]</span><a href="img/go08_main.jpg"><img src="img/go08_main.jpg" alt="기관스킨8번 메인 미리보기" /></a></div>
				<div><span>[PC 서브화면]</span><a href="img/go08_sub.jpg"><img src="img/go08_sub.jpg" alt="기관스킨8번 서브 미리보기" /></a></div>
				<div><span>[모바일화면]</span><a href="img/go08_mobile2.jpg"><img src="img/go08_mobile.jpg" alt="기관스킨8번 모바일 미리보기" /></a></div>
			</div>
        </div>
	</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>

</body>
</html>