[CSS] 17. 실습: Kitchen

in Web on CSS


실습: 재능교육



/*------------- kitchen.css --------------*/


body{background: url(dark-wood.png);}
.wrap{width:940px; margin: 20px auto 20px auto; border:2px solid #000; 
	background: #fff;}
.head-main{height:130px; background: url(header.jpg);} 
.head-main h1{position:relative; left: -9999px;}
.nav{padding: 5px 0px 5px 30px; background: #aeaca8;}
.nav ul{overflow:hidden;}
.nav ul li{float:left; margin-right:40px; font-size:15px;}
#black{color:#000;}
#pink{color:#de6581; font-size:15px;}
.nav ul li a{color:#fff; text-decoration:none;}
.nav ul li a:hover{color:#000;}
.content{overflow:hidden;}
.main{width:659px; float:left;}
.main h2{margin-top:50px; margin-bottom:5px;}
.main h3{margin-bottom:10px;}
.con1-img{overflow:hidden;}
.f1{width:290px; padding:5px; margin:20px; border: 1px solid #eeeeee;
	float:left; }

.f2{width:290px; height: 220px; padding:5px; margin:20px; 
	border: 1px solid #eeeeee; float:left;}
.sub{width:250px; float:left; border-left:1px solid #eeeeee; 
	padding-left:10px}	
.sub h2{margin-top:10px; margin-bottom:5px; padding-top:30px; 
	padding-bottom:10px;}
.sub ul li{border-bottom:1px solid #eeeeee;}
.sub ul li a{padding:10px; display:block; text-decoration:none;}
.sub ul li a:hover{background: #eeeeee;}

.footer{height:30px;padding:7px 0px 0px 20px; background: #aeaca8; 
	color:#ffffff;}





/*------------- kitchen.html.html --------------*/


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="kitchen.css">
	<title>kitchen</title>
</head>
<body>
<div class="wrap">
	<div class="header">
		<div class="head-main">
			<h1>Yoko's Kitchen</h1>
		</div>
		<div class="nav">
			<ul>
				<li><a href="" id="black">홈</a></li>
				<li><a href="">교실</a></li>
				<li><a href="">케이터링</a></li>
				<li><a href="">소개</a></li>
				<li><a href="">연락처</a></li>
			</ul>
		</div>
	</div>
	<div class="content">
		<div class="main">
			<div class="con1-img">
				<figure class="f1">
					<img src="bok-choi.jpg" alt="">
					<figcaption>Bok Choi</figcaption>
				</figure>
				
				<div class="con1">
					<h2>일본의 채식주의자</h2>
					<h3 id="pink">런던에서의 5주 코스</h3>
					<p>5주간 전통적인 일본의 채식주의자 음식에 대해 소개하고 쌀과 국수 요리를 가르친다.</p>
				</div>
			</div>
			
			<div class="con2-img">
				<figure class="f2">
					<img src="teriyaki.jpg" alt="">
					<figcaption>Teriyaki Sauce</figcaption>
				</figure>
			</div>
			<div class="con2">
				<h2>소스 마스터클래스</h2>
				<h3 id="pink">1일 워크샵</h3>
				<p>1일 집중 코스에서는 다양한 일본 요리에서 사용할 수 있는 가장 맛있는 소스를 만드는 방법을 살펴본다.</p>
			</div>
		</div>
		<div class="sub">
			<div class="sub-nav">
				<h2 id="pink">인기 요리법</h2>
				<ul>
					<li><a href="" id="pink">야키토리(Yakitori) - 구운 닭</a></li>
					<li><a href="" id="pink">츠쿠네(Tsukune) - 닭꼬치</a></li>
					<li><a href="" id="pink">오코노미야키(Okonomiyaki)- 해물 부침개</a></li>
					<li><a href="" id="pink">미즈타키(Mizutaki) - 영계백숙</a></li>
				</ul>
			</div>
			<div class="sub-con">
				<h2 id="pink">연락처</h2>
				<p>Yoko's Kitchen<br>
				27 Redchurch Street<br>
				Shoreditch<br>
				London E2 7DP</p>
			</div>
		</div>
	</div>
	<div class="footer">
		<p>© 2011 Yoko's Kitchen</p>
	</div>
</div>
</body>
</html>




실행결과