20180807 / 디지텍 / 웹 디자인 기능사 / 문제풀이

전체 파일 다운로드 : 문제풀이

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>디저트 전문점</title>
	<link rel="stylesheet" href="css/common.css">
	<script src="js/jquery-1.12.3.js"></script>
	<script type="text/javascript">
		$(document)
		.on("mouseenter mouseleave", ".gnb li", function () {
			$(this).find("ul").stop().slideToggle(300)
		})
		.on("click", ".layer_opener, .layer_close", function () {
			$(".layer").toggleClass('active')
		})
		window.onload = function () {
			var target = $(".slide ul")
			var len = $(".slide li").length
			var pos = 0
			setInterval(function () {
				pos = (pos + 1) % len
				target.animate({
					marginLeft:-pos*100+"%"
				}, 1000)
			}, 2000)
		}
	</script>
</head>
<body>
	<div class="wrap">
		<header class="header">
			<h3 class="logo">
				<a href="#"><img src="img/logo_color.png" alt="logo"></a>
			</h3>
			<ul class="gnb">
				<li><a href="#">메뉴1</a>
					<ul>
						<li><a href="#">서브메뉴1</a></li>
						<li><a href="#">서브메뉴2</a></li>
						<li><a href="#">서브메뉴3</a></li>
					</ul>
				</li>
				<li><a href="#">메뉴2</a>
					<ul>
						<li><a href="#">서브메뉴1</a></li>
						<li><a href="#">서브메뉴2</a></li>
						<li><a href="#">서브메뉴3</a></li>
					</ul>
				</li>
				<li><a href="#">메뉴3</a>
					<ul>
						<li><a href="#">서브메뉴1</a></li>
						<li><a href="#">서브메뉴2</a></li>
						<li><a href="#">서브메뉴3</a></li>
					</ul>
				</li>
			</ul>
		</header>
		<section class="slide">
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="slide-txt">
				<div class="emblem">
					<img src="img/emblem.png" alt="엠블럼">
				</div>
				<p class="slogan">
					매일 다른 디저트 케이크를 즐기는 공간, 엔젤케이크
				</p>
			</div>
		</section>
		<section class="content">
			<section class="content-top">
				<h3 class="title">바로가기</h3>
				<div class="banner">
					<article>
						<div class="icon_wrap">아이콘</div>
						<h4>Brand Story</h4>
						<dl>
							<dt>일상의 즐거움</dt>
							<dd>
								<p>엔젤케이크의 한 조각 케이크가 </p>
								<p>작은 즐거움이 되도록 노력합니다.</p>
							</dd>
						</dl>
					</article>
					<article>
						<div class="icon_wrap">아이콘</div>
						<h4>Store</h4>
						<dl>
							<dt>함께 만들어가요!</dt>
							<dd>
								<p>가맹점주님들의 부담을 줄여드리는</p>
								<p>경쟁력있는 시스템을 갖고 있습니다.</p>
							</dd>
						</dl>
					</article>
				</div>
			</section>
			<div class="content-btm">
				<section class="notice">
					<h3 class="title">공지사항</h3>
					<ul>
						<li>
							<a href="#">- 엔젤 케이크 홍대점 오픈 안내</a>
							<span class="date">17.01.23</span>
						</li>
						<li>
							<a href="#">- 신제품 ‘하트앤엔젤’  출시</a>
							<span class="date">17.01.23</span>
						</li>
						<li>
							<a href="#">- 발렌타인 음료 증정 이벤트</a>
							<span class="date">17.01.23</span>
						</li>
					</ul>
				</section>
				<section class="product">
					<h3 class="title">제품</h3>
					<div class="img_wrap">
						<a href="#!" class="layer_opener"><img src="img/cake.jpg" alt="cake" height="150"></a>
						<dl>
							<dt>생크림 딸기 케이크</dt>
							<dd>부드러운 시트와 생크링의 심플한 조화 엔젤케이크 베스트셀러</dd>
						</dl>
					</div>
				</section>
			</div>
		</section>
		<footer class="footer">
			<p>브랜드스토리 | 사이트맵 | 이메일무단수집거부 | 개인정보처리방침</p>
			<p>
				<span>사업자번호 : 000-00-00000</span>
				<span>ADD 서울시 강남구 역삼동 733 엔젤케이크</span>
				<span>TEL 010-000-0000</span>
				<span>E-mail master@angelcake.co.kr</span>
			</p>
			<p>COPYRIGHT 2017 © ANGELCAKE. ALL RIGHTS RESERVED.</p>
		</footer>
	</div>
<div class="layer">
	<div>
		<a href="#" class="layer_close">X</a>
		<img src="img/cake.jpg" alt="cake">
	</div>
</div>
</body>
</html>
@charset "utf-8";

/* tag */
* { margin: 0; padding: 0; }
ul, li { list-style: none }
a { text-decoration: none; color: inherit; }
img { vertical-align: middle; }

/* layout */
.wrap { width: 1000px; margin: 0 auto; }
.header { height: 160px; position: relative; z-index: 20;	/* 추가됨 */ }
.logo { height: 80px; line-height: 80px; text-align: center; }
.gnb { height: 80px; line-height: 80px; display: flex; justify-content: center; }
.gnb a { display: block; transition: 0.3s; text-align: center; }
.gnb > li { position: relative; }
.gnb > li > ul { display: none; position: absolute; left: 0; right: 0; }
.gnb > li > a { padding: 0 40px; }
.gnb > li:hover > a { background: #c03e58; color: #FFF; }
.gnb > li:hover > ul { }
.gnb > li > ul a { background: #aaa; color: #FFF; line-height: 40px; }
.gnb > li > ul a:hover { background: #FFF; color: #666; }
.slide { position: relative; height: 400px; overflow: hidden; }
.slide ul { width: 300%; height: 400px; display: flex; }
.slide li { width: 33.333%; background: no-repeat center / cover; }
.slide li:nth-child(1) { background-image: url(../img/slide1.jpg); }
.slide li:nth-child(2) { background-image: url(../img/slide2.jpg); }
.slide li:nth-child(3) { background-image: url(../img/slide3.jpg); }
.slide-txt { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.5); color: #FFF; text-align: center; padding: 20px 0; }
.slogan { font-size: 21px; margin-top: 20px; }
.content { height: 650px; }
.content .title { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 10px; }
.content-top { height: 310px; padding: 20px 0; }
.content-btm { height: 270px; padding: 20px 0; display: flex; justify-content: space-between; }
.content-btm>section { width: 48%; }
.banner { display: flex; justify-content: space-around; }
.banner article { width: 45%; text-align: center; }
.banner .icon_wrap { width: 100px; height: 100px; border-radius: 100px; line-height: 100px; margin: 20px auto; border: 1px solid #000; text-align: center; }
.banner h4 { color: #c03e58; font-size: 25px; margin-bottom: 10px; }
.banner dt { font-size: 17px; font-weight: bold; margin-bottom: 10px; }
.notice ul { }
.notice li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; }
.notice li:hover { background: #ffa; }
.notice a { display: block; padding: 10px 0; }
.notice .date { }
.product { }
.product .img_wrap { display: flex; justify-content: center;	/* 가로 가운데*/ align-items: center;	/* 세로 가운데*/ }
.product dt { font-size: 21px; font-weight: bold; margin-bottom: 10px; }
.footer { border-top: 1px solid #bebebe; padding: 20px 0; font-size: 13px; }
.footer p { line-height: 40px; }
.footer span { display: inline-block; margin-right: 10px; }
.layer { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0, 0, 0, 0.5); z-index: 100; display: none; justify-content: center; align-items: center; }
.layer>div { position: relative; }
.layer.active { display: flex; }
.layer_close { display: block; position: absolute; right: 0; top: 0; padding: 5px 10px; background: #F09; }