[2018 웹 디자인 기능사] 와이어 프레임

웹 디자인 기능사

올해 개정된 웹 디자인 기능사 출제 기준에 와이어 프레임이 추가되었습니다.
와이어프레임이란 레이아웃을 미리 스케치해놓은 것이라고 생각하면 편합니다.

전체 템플릿 다운로드
와이어프레임(공개)

 

첫번째

와이어프레임(공개)-1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 1</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.wrap{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:50px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;}
		.gnb:hover>li>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}

		.footer{display:flex;justify-content:space-between;align-items:center;text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer-logo{width:20%;}
		.copyright{width:60%;}
		.sns{width:20%;}
		.sns a{background:#fff;width:30px;height:30px;border-radius:30px;text-align:center;line-height:30px;display:inline-block;color:#000;font-size:11px;}
	</style>
</head>
<body>
	<div class="wrap">
		<header class="header">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</header>
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="banner">
				<h3 class="title">배너</h3>
				<div class="layer">사진</div>
			</section>
			<section class="icons">
				<h3 class="title">바로가기</h3>
				<ul>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기1</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기2</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기3</a></p>
					</li>
				</ul>
			</section>
		</section>
		<footer class="footer">
			<div class="footer-logo">로고</div>
			<div class="copyright">
				copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.
			</div>
			<div class="sns">
				<a href="#">F</a>
				<a href="#">T</a>
				<a href="#">I</a>
			</div>
		</footer>
	</div>
</body>
</html>

 

두번째

와이어프레임(공개)-2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 2</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.wrap{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;position:relative;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb:after{content:"";position:absolute;left:0;right:0;top:100px;height:160px;background:#f5f5f5;display:none;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:100px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;z-index:10;}
		.gnb:hover:after{display:block;}
		.gnb:hover>li>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:90px;height:70px;border:1px solid #666;display:inline-block;}

		.footer{display:flex;justify-content:space-between;align-items:center;text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer-logo{width:20%;}
		.copyright{width:60%;}
		.sns{width:20%;}
		.sns a{background:#fff;width:30px;height:30px;border-radius:30px;text-align:center;line-height:30px;display:inline-block;color:#000;font-size:11px;}
	</style>
</head>
<body>
	<div class="wrap">
		<header class="header">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</header>
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="gallery">
				<h3 class="title">갤러리</h3>
				<ul>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진1</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진2</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진3</a></p>
					</li>
				</ul>
			</section>
			<section class="banner">
				<h3 class="title">배너</h3>
				<div class="layer">배너 사진</div>
			</section>
		</section>
		<footer class="footer">
			<div class="footer-logo">로고</div>
			<div class="copyright">
				copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.
			</div>
			<div class="sns">
				<a href="#">F</a>
				<a href="#">T</a>
				<a href="#">I</a>
			</div>
		</footer>
	</div>
</body>
</html>

 

세번째

와이어프레임(공개)-3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 3</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.wrap{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;position:relative;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:100px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;z-index:10;}
		.gnb>li:hover>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:90px;height:70px;border:1px solid #666;display:inline-block;}

		.footer{display:flex;justify-content:space-between;align-items:center;text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer-logo{width:20%;}
		.footer-right{width:80%;line-height:50px;text-align: left;}
		.copyright{font-size:12px;text-transform:uppercase;}
	</style>
</head>
<body>
	<div class="wrap">
		<header class="header">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</header>
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="gallery">
				<h3 class="title">갤러리</h3>
				<ul>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진1</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진2</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진3</a></p>
					</li>
				</ul>
			</section>
			<section class="banner">
				<h3 class="title">배너</h3>
				<div class="layer">배너 사진</div>
			</section>
		</section>
		<footer class="footer">
			<div class="footer-logo">로고</div>
			<div class="footer-right">
				<p>
					<a href="#">하단메뉴1</a>
					<a href="#">하단메뉴2</a>
					<a href="#">하단메뉴3</a>
					<a href="#">하단메뉴4</a>
				</p>
				<p class="copyright">copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.</p>
			</div>
		</footer>
	</div>
</body>
</html>

 

네번째

와이어프레임(공개)-4

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 4</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.wrap{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;position:relative;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb:after{content:"";position:absolute;left:0;right:0;top:100px;height:160px;background:#f5f5f5;display:none;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:100px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;z-index:10;}
		.gnb:hover:after{display:block;}
		.gnb:hover>li>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:90px;height:70px;border:1px solid #666;display:inline-block;}
		
		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}

		.footer{display:flex;justify-content:space-between;align-items:center;text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer-left{width:80%;line-height:35px;text-align: left;text-indent:50px;}
		.footer-right{width:20%;}
		.copyright{font-size:12px;text-transform:uppercase;}
	</style>
</head>
<body>
	<div class="wrap">
		<header class="header">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</header>
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="gallery">
				<h3 class="title">갤러리</h3>
				<ul>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진1</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진2</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진3</a></p>
					</li>
				</ul>
			</section>
			<section class="icons">
				<h3 class="title">바로가기</h3>
				<ul>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기1</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기2</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기3</a></p>
					</li>
				</ul>
			</section>
		</section>
		<footer class="footer">
			<div class="footer-left">
				<p>
					<a href="#">하단메뉴1</a>
					<a href="#">하단메뉴2</a>
					<a href="#">하단메뉴3</a>
					<a href="#">하단메뉴4</a>
				</p>
				<p class="copyright">copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.</p>
			</div>
			<div class="footer-right">패밀리사이트</div>
		</footer>
	</div>
</body>
</html>

 

 

다섯번째

와이어프레임(공개)-5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 5</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;}
		.header>div{display:flex;justify-content:space-between;align-items:center;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:50px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;}
		.gnb:hover>li>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}

		.footer{text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer>div{display:flex;justify-content:space-between;align-items:center;}
		.footer-logo{width:20%;}
		.footer-right{width:80%;line-height:35px;text-align: left;}
		.copyright{font-size:12px;text-transform:uppercase;}
	</style>
</head>
<body>
	<header class="header">
		<div class="container">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</header>
	<div class="container">
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="banner">
				<h3 class="title">배너</h3>
				<div class="layer">사진</div>
			</section>
			<section class="icons">
				<h3 class="title">바로가기</h3>
				<ul>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기1</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기2</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기3</a></p>
					</li>
				</ul>
			</section>
		</section>
	</div>
	<footer class="footer">
		<div class="container">
			<div class="footer-logo">로고</div>
			<div class="footer-right">
				<p>
					<a href="#">하단메뉴1</a>
					<a href="#">하단메뉴2</a>
					<a href="#">하단메뉴3</a>
					<a href="#">하단메뉴4</a>
				</p>
				<p class="copyright">copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.</p>
			</div>
		</div>
	</footer>
</body>
</html>

 

 

여섯번째

와이어프레임(공개)-6

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 6</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;}
		.header>div{display:flex;justify-content:space-between;align-items:center;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb:after{content:"";position:absolute;left:0;right:0;top:100px;height:160px;background:#f5f5f5;display:none;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:100px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;z-index:10;}
		.gnb:hover:after{display:block;}
		.gnb:hover>li>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:90px;height:70px;border:1px solid #666;display:inline-block;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}

		.footer{border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer>div{display:flex;justify-content:space-between;align-items:center;}
		.footer-left{width:80%;}
		.copyright{font-size:12px;text-transform:uppercase;}
		.footer-right{width:20%;line-height:40px;text-align: center;}
		.sns a{background:#fff;width:30px;height:30px;border-radius:30px;text-align:center;line-height:30px;display:inline-block;color:#000;font-size:11px;}
	</style>
</head>
<body>
	<header class="header">
		<div class="container">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</header>
	<div class="container">
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="gallery">
				<h3 class="title">갤러리</h3>
				<ul>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진1</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진2</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진3</a></p>
					</li>
				</ul>
			</section>
			<section class="icons">
				<h3 class="title">바로가기</h3>
				<ul>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기1</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기2</a></p>
					</li>
					<li>
						<div class="icon_wrap"></div>
						<p><a href="#">바로가기3</a></p>
					</li>
				</ul>
			</section>
		</section>
	</div>
	<footer class="footer">
		<div class="container">
			<div class="footer-left copyright">
				copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.
			</div>
			<div class="footer-right">
				<p class="sns">
					<a href="#">F</a>
					<a href="#">T</a>
					<a href="#">I</a>
				</p>
				<p class="family">
					패밀리사이트
				</p>
			</div>
		</div>
	</footer>
</body>
</html>

 

 

일곱번째

와이어프레임(공개)-7

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 7</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;}
		.header>div{display:flex;justify-content:space-between;align-items:center;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:100px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;z-index:10;}
		.gnb>li:hover>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:90px;height:70px;border:1px solid #666;display:inline-block;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}
		
		.footer{text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer>div{display:flex;justify-content:space-between;align-items:center;}
		.footer-logo{width:20%;}
		.copyright{width:60%;}
		.sns{width:20%;}
		.sns a{background:#fff;width:30px;height:30px;border-radius:30px;text-align:center;line-height:30px;display:inline-block;color:#000;font-size:11px;}
	</style>
</head>
<body>
	<header class="header">
		<div class="container">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</header>
	<div class="container">
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="gallery">
				<h3 class="title">갤러리</h3>
				<ul>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진1</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진2</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진3</a></p>
					</li>
				</ul>
			</section>
			<section class="banner">
				<h3 class="title">배너</h3>
				<div>
					배너 사진
				</div>
			</section>
		</section>
	</div>
	<footer class="footer">
		<div class="container">
			<div class="footer-logo">로고</div>
			<div class="copyright">
				copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.
			</div>
			<div class="sns">
				<a href="#">F</a>
				<a href="#">T</a>
				<a href="#">I</a>
			</div>
		</div>
	</footer>
</body>
</html>

 

 

 

여덟번째

와이어프레임(공개)-8

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 8</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1200px;margin:0 auto;}
		.header{height:100px;border-bottom:1px solid #ddd;}
		.header>div{display:flex;justify-content:space-between;align-items:center;position:relative;}
		.logo{line-height:100px;font-size:35px;color:#09F;}
		.gnb{display:flex;}
		.gnb:after{content:"";position:absolute;left:0;right:0;top:100px;height:160px;background:#f5f5f5;display:none;}
		.gnb a{display:block;transition:0.3s;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:100px;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:0;right:0;display:none;z-index:10;}
		.gnb:hover:after{display:block;}
		.gnb:hover>li>ul{display:block;}
		.gnb>li>ul a{background:#f5f5f5;color:#09F;text-align:center;line-height:40px;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:300px;overflow:hidden;}
		.slide ul{width:300%;height:300px;display:flex;}
		.slide li{width:33.33%;height:300px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px 0;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:13px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:90px;height:70px;border:1px solid #666;display:inline-block;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}
		
		.footer{text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer>div{display:flex;justify-content:space-between;align-items:center;}
		.footer-left{width:80%;line-height:35px;text-align: left;text-indent:50px;}
		.footer-right{width:20%;}
		.copyright{font-size:12px;text-transform:uppercase;}
	</style>
</head>
<body>
	<header class="header">
		<div class="container">
			<h3 class="logo"><a href="#">LOGO</a></h3>
			<ul class="gnb">
				<li>
					<a href="#">MENU-1</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-2</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-3</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
				<li>
					<a href="#">MENU-4</a>
					<ul>
						<li><a href="#">SubMenu-1</a></li>
						<li><a href="#">SubMenu-2</a></li>
						<li><a href="#">SubMenu-3</a></li>
						<li><a href="#">SubMenu-4</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</header>
	<div class="container">
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</section>
		<section class="content">
			<section class="notice">
				<h3 class="title">공지사항</h3>
				<ul>
					<li>
						<a href="#">Quaerat officiis voluptatum</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Officiis sint accusantium</a>
						<span class="date">2018-08-06</span>
					</li>
					<li>
						<a href="#">Optio quisquam totam</a>
						<span class="date">2018-08-06</span>
					</li>
				</ul>
			</section>
			<section class="gallery">
				<h3 class="title">갤러리</h3>
				<ul>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진1</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진2</a></p>
					</li>
					<li>
						<div class="img_wrap"></div>
						<p><a href="#">사진3</a></p>
					</li>
				</ul>
			</section>
			<section class="banner">
				<h3 class="title">배너</h3>
				<div>
					배너 사진
				</div>
			</section>
		</section>
	</div>
	<footer class="footer">
		<div class="container">
			<div class="footer-left">
				<p>
					<a href="#">하단메뉴1</a>
					<a href="#">하단메뉴2</a>
					<a href="#">하단메뉴3</a>
					<a href="#">하단메뉴4</a>
				</p>
				<p class="copyright">copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.</p>
			</div>
			<div class="footer-right">패밀리사이트</div>
		</div>
	</footer>
</body>
</html>

 

 

 

아홉번째

와이어프레임(공개)-9

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 9</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1000px;display:flex;}
		.site-left{width:200px;background:#f5f5f5;}
		.site-right{width:800px;}
		.logo{line-height:100px;font-size:35px;color:#09F;background:#FFF;text-align:center;}
		.gnb a{display:block;transition:0.3s;text-align:center;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:40px;border-bottom:1px solid #ddd;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{display:none;z-index:10;}
		.gnb>li:hover>ul{display:block;}
		.gnb>li>ul a{background:#fff;color:#09F;text-align:center;line-height:30px;font-size:13px;border-bottom:1px solid #ddd;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:350px;overflow:hidden;}
		.slide ul{width:300%;height:350px;display:flex;}
		.slide li{width:33.33%;height:350px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:11px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}
		
		.footer{text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer>div{display:flex;justify-content:space-between;align-items:center;}
		.footer-logo{width:20%;}
		.footer-right{width:80%;line-height:35px;text-align: left;}
		.copyright{font-size:12px;text-transform:uppercase;}
	</style>
</head>
<body>
	<div class="container">
		<div class="site-left">
			<header class="header">
				<h3 class="logo"><a href="#">LOGO</a></h3>
				<ul class="gnb">
					<li>
						<a href="#">MENU-1</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-2</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-3</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-4</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
				</ul>
			</header>
		</div>
		<div class="site-right">
			<section class="slide">
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
			<section class="content">
				<section class="notice">
					<h3 class="title">공지사항</h3>
					<ul>
						<li>
							<a href="#">Quaerat officiis voluptatum</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Officiis sint accusantium</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Optio quisquam totam</a>
							<span class="date">2018-08-06</span>
						</li>
					</ul>
				</section>
				<section class="banner">
					<h3 class="title">배너</h3>
					<div class="layer">사진</div>
				</section>
				<section class="icons">
					<h3 class="title">바로가기</h3>
					<ul>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기1</a></p>
						</li>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기2</a></p>
						</li>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기3</a></p>
						</li>
					</ul>
				</section>
			</section>
			<footer class="footer">
				<div class="container">
					<div class="footer-logo">로고</div>
					<div class="footer-right">
						<p>
							<a href="#">하단메뉴1</a>
							<a href="#">하단메뉴2</a>
							<a href="#">하단메뉴3</a>
							<a href="#">하단메뉴4</a>
						</p>
						<p class="copyright">copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.</p>
					</div>
				</div>
			</footer>
		</div>
	</div>
</body>
</html>

 

 

 

열번째

와이어프레임(공개)-10

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 10</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1000px;display:flex;}
		.site-left{width:200px;background:#f5f5f5;}
		.site-right{width:800px;}
		.logo{line-height:100px;font-size:35px;color:#09F;background:#FFF;text-align:center;}
		.gnb a{display:block;transition:0.3s;text-align:center;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:40px;border-bottom:1px solid #ddd;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{display:none;z-index:10;}
		.gnb>li:hover>ul{display:block;}
		.gnb>li>ul a{background:#fff;color:#09F;text-align:center;line-height:30px;font-size:13px;border-bottom:1px solid #ddd;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:350px;overflow:hidden;}
		.slide ul{width:300%;height:350px;display:flex;}
		.slide li{width:33.33%;height:350px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:11px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:70px;height:60px;border:1px solid #666;display:inline-block;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}

		.footer{border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer>div{display:flex;justify-content:space-between;align-items:center;}
		.footer-left{width:80%;}
		.copyright{font-size:12px;text-transform:uppercase;text-indent:40px;}
		.footer-right{width:20%;line-height:40px;text-align: center;}
		.sns a{background:#fff;width:30px;height:30px;border-radius:30px;text-align:center;line-height:30px;display:inline-block;color:#000;font-size:11px;}
	</style>
</head>
<body>
	<div class="container">
		<div class="site-left">
			<header class="header">
				<h3 class="logo"><a href="#">LOGO</a></h3>
				<ul class="gnb">
					<li>
						<a href="#">MENU-1</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-2</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-3</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-4</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
				</ul>
			</header>
		</div>
		<div class="site-right">
			<section class="slide">
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
			<section class="content">
				<section class="notice">
					<h3 class="title">공지사항</h3>
					<ul>
						<li>
							<a href="#">Quaerat officiis voluptatum</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Officiis sint accusantium</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Optio quisquam totam</a>
							<span class="date">2018-08-06</span>
						</li>
					</ul>
				</section>
				<section class="gallery">
					<h3 class="title">갤러리</h3>
					<ul>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진1</a></p>
						</li>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진2</a></p>
						</li>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진3</a></p>
						</li>
					</ul>
				</section>
				<section class="icons">
					<h3 class="title">바로가기</h3>
					<ul>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기1</a></p>
						</li>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기2</a></p>
						</li>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기3</a></p>
						</li>
					</ul>
				</section>
			</section>
			<footer class="footer">
				<div>
					<div class="footer-left copyright">
						copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.
					</div>
					<div class="footer-right">
						<p class="sns">
							<a href="#">F</a>
							<a href="#">T</a>
							<a href="#">I</a>
						</p>
						<p class="family">
							패밀리사이트
						</p>
					</div>
				</div>
			</footer>
		</div>
	</div>
</body>
</html>

 

 

열한번째

 

 

와이어프레임(공개)-11

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 11</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1000px;display:flex;}
		.site-left{width:200px;background:#f5f5f5;}
		.site-right{width:800px;}
		.logo{line-height:100px;font-size:35px;color:#09F;background:#FFF;text-align:center;}
		.gnb a{display:block;transition:0.3s;text-align:center;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:40px;border-bottom:1px solid #ddd;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:200px;display:none;z-index:10;width:200px;top:0;}
		.gnb>li:hover>ul{display:block;}
		.gnb>li>ul a{background:#fff;color:#09F;text-align:center;line-height:30px;font-size:13px;border-bottom:1px solid #ddd;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:350px;overflow:hidden;}
		.slide ul{width:300%;height:350px;display:flex;}
		.slide li{width:33.33%;height:350px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:11px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:70px;height:60px;border:1px solid #666;display:inline-block;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}
		
		.footer{text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer>div{display:flex;justify-content:space-between;align-items:center;}
		.footer-logo{width:20%;}
		.footer-right{width:80%;line-height:35px;text-align: left;}
		.copyright{font-size:12px;text-transform:uppercase;}
	</style>
</head>
<body>
	<div class="container">
		<div class="site-left">
			<header class="header">
				<h3 class="logo"><a href="#">LOGO</a></h3>
				<ul class="gnb">
					<li>
						<a href="#">MENU-1</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-2</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-3</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-4</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
				</ul>
			</header>
		</div>
		<div class="site-right">
			<section class="slide">
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
			<section class="content">
				<section class="notice">
					<h3 class="title">공지사항</h3>
					<ul>
						<li>
							<a href="#">Quaerat officiis voluptatum</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Officiis sint accusantium</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Optio quisquam totam</a>
							<span class="date">2018-08-06</span>
						</li>
					</ul>
				</section>
				<section class="gallery">
					<h3 class="title">갤러리</h3>
					<ul>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진1</a></p>
						</li>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진2</a></p>
						</li>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진3</a></p>
						</li>
					</ul>
				</section>
				<section class="banner">
					<h3 class="title">배너</h3>
					<div>
						배너 사진
					</div>
				</section>
			</section>
			<footer class="footer">
				<div class="container">
					<div class="footer-logo">로고</div>
					<div class="footer-right">
						<p>
							<a href="#">하단메뉴1</a>
							<a href="#">하단메뉴2</a>
							<a href="#">하단메뉴3</a>
							<a href="#">하단메뉴4</a>
						</p>
						<p class="copyright">copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.</p>
					</div>
				</div>
			</footer>
		</div>
	</div>
</body>
</html>

 

 

열두번째 (마지막)

와이어프레임(공개)-12

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>WireFrame 12</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		ul,li{list-style:none;}
		a{text-decoration:none;color:inherit;}
		.container{width:1000px;display:flex;}
		.site-left{width:200px;background:#f5f5f5;}
		.site-right{width:800px;}
		.logo{line-height:100px;font-size:35px;color:#09F;background:#FFF;text-align:center;}
		.gnb a{display:block;transition:0.3s;text-align:center;}
		.gnb>li{position:relative;}
		.gnb>li>a{padding:0 40px;color:#09F;font-size:17px;line-height:40px;border-bottom:1px solid #ddd;}
		.gnb>li:hover>a{background:#09F;color:#fff;}
		.gnb>li>ul{position:absolute;left:200px;display:none;z-index:10;width:200px;top:0;}
		.gnb>li:hover>ul{display:block;}
		.gnb>li>ul a{background:#fff;color:#09F;text-align:center;line-height:30px;font-size:13px;border-bottom:1px solid #ddd;}
		.gnb>li>ul a:hover{color:#fff;background:#09F;}

		.slide{height:350px;overflow:hidden;}
		.slide ul{width:300%;height:350px;display:flex;}
		.slide li{width:33.33%;height:350px;}
		.slide li:nth-child(1){background:#ffa;}
		.slide li:nth-child(2){background:#faa;}
		.slide li:nth-child(3){background:#afa;}

		.content{display:flex;justify-content:space-between;height:160px;padding:20px;}
		.content>section{width:30%;}
		.content .title{border-bottom:1px solid #ddd;padding-bottom:10px;margin-bottom:10px;font-size:17px;}

		.notice{line-height:200%;font-size:11px;}
		.notice li{display:flex;justify-content:space-between;cursor:pointer;}
		.notice .date{color:#aaa;}
		.notice li:hover{background:#ffe;}

		.gallery ul{display:flex;justify-content:space-between;}
		.gallery li{width:30%;text-align:center;}
		.gallery a{font-size:13px;}
		.img_wrap{width:70px;height:60px;border:1px solid #666;display:inline-block;}

		.icons ul{display:flex;justify-content:space-between;}
		.icons li{width:30%;text-align:center;}
		.icons a{font-size:13px;}
		.icon_wrap{width:50px;height:50px;border-radius:50px;border:1px solid #000;margin:10px auto;}
		
		.footer{display:flex;justify-content:space-between;align-items:center;text-align:center;border-top:1px solid #ddd;background:#aaa;color:#fff;line-height:100px;}
		.footer-logo{width:20%;}
		.copyright{width:60%;}
		.family{width:20%;}
	</style>
</head>
<body>
	<div class="container">
		<div class="site-left">
			<header class="header">
				<h3 class="logo"><a href="#">LOGO</a></h3>
				<ul class="gnb">
					<li>
						<a href="#">MENU-1</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-2</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-3</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
					<li>
						<a href="#">MENU-4</a>
						<ul>
							<li><a href="#">SubMenu-1</a></li>
							<li><a href="#">SubMenu-2</a></li>
							<li><a href="#">SubMenu-3</a></li>
							<li><a href="#">SubMenu-4</a></li>
						</ul>
					</li>
				</ul>
			</header>
		</div>
		<div class="site-right">
			<section class="slide">
				<ul>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</section>
			<section class="content">
				<section class="notice">
					<h3 class="title">공지사항</h3>
					<ul>
						<li>
							<a href="#">Quaerat officiis voluptatum</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Officiis sint accusantium</a>
							<span class="date">2018-08-06</span>
						</li>
						<li>
							<a href="#">Optio quisquam totam</a>
							<span class="date">2018-08-06</span>
						</li>
					</ul>
				</section>
				<section class="gallery">
					<h3 class="title">갤러리</h3>
					<ul>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진1</a></p>
						</li>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진2</a></p>
						</li>
						<li>
							<div class="img_wrap"></div>
							<p><a href="#">사진3</a></p>
						</li>
					</ul>
				</section>
				<section class="icons">
					<h3 class="title">바로가기</h3>
					<ul>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기1</a></p>
						</li>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기2</a></p>
						</li>
						<li>
							<div class="icon_wrap"></div>
							<p><a href="#">바로가기3</a></p>
						</li>
					</ul>
				</section>
			</section>
		<footer class="footer">
			<div class="footer-logo">로고</div>
			<div class="copyright">
				copyright &copy; 2018 <strong>junil hwang</strong> all right reserved.
			</div>
			<div class="family">
				패밀리사이트
			</div>
		</footer>
		</div>
	</div>
</body>
</html>