[KOSTA] Spring 기반 Cloud 서비스 개발자 양성자 과정 36일차 - CSS 실습

47450 단어 KOSTAKOSTA

📃 layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>레이아웃 연습하기</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
	#menu{
		background-color: #a4cd55;
		width: 60%;
		height: 50px;
		border-top: 2px solid;
		border-bottom: 2px solid;
	}
	
	#menu > ul{
		list-style: none;
		display: inline;
		
		
	}
	
	#menu > ul > li {
		float: left;
		padding: 15px;
		margin: 0 auto;
		
	}
	
	#menu > ul > li > a{
		text-decoration: none;
		color: darkgreen;
		font-size: 20px;
		font-weight: bold;
	}
	
	#content1{
		width: 25%;
		position: absolute;
	}
	
	#content1 img{
		float: left;
	}
	
	h5{
		font-size: 20px;
		font-weight: bold;
		
	}
	
	
	#content2{
		width: 25%;
		left: 650px;
		position: relative;
		
	}
	
	#infolist{
		clear: both;
		background-color: #a4cd55;
		width: 60%;
		height: 40px;
		top: 100px;
		position: relative;
	}
	
	#infolist > ul{
		list-style: none;
		display: inline;
	}
	
	#infolist > ul > li{
		float: left;
		padding: 10px;
		margin: 0 auto;
		border-right: 2px solid;
		border-color: white;
	}
	
	#infolist > ul > li > a{
		color: white;
		text-decoration: none;
		padding: 10px;
		font-weight: bold;
	}
	
	#infolist #list_title{
		font-weight: bold;
		border-right: none;
	}
	
	dt{
		font-weight: bold;
		margin: 10px;
		background-image: url("images/li.gif");
		background-repeat: no-repeat;
		padding-left: 15px;
		
	}
	
	dd{
		margin-left: 0;
		text-indent: 30px;
	}
	
	
</style>
</head>
<body>

<div>
	<img src="images/herblogo.jpg">
</div>

<div id="menu">
 <ul>
  <li><a href="#">허브란?</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 id="content1">
 <h5>허브란? </h5>
 <img src="images/balm.jpg" id="balm">
 <p>라틴어의 ‘푸른 풀’을 의미하는 Herba에서 유래된 말로, ‘잎, 줄기와 뿌리 등이 식용, 약용에 쓰이거나, 향기나 향미가 이용되는 식물의 총체’ 라고 할 수 있다. 즉, 잎, 줄기, 뿌리, 꽃 등을 허브의 의미에 포함하며 그 성분이 식품이나 음료속에 보존용 향신료 또는 건강증진제로서 첨가되는 식물과 식품, 음료 외에 제품에 향수, 화장, 세정의 효과를 기대하여 이용되는 식물의 전부라고 할 수 있다.현재 국내에서 일반적으로 알고 있는 허브에 대한 개념은 외국에서 도입된 식물에 한정지어 생각하는 경우가 대부분이나 사실은 이미 수 천년 전부터 우리 조상들도 생활 전반에 걸쳐 많은 곳에서 이용하여 왔다. 즉, 산야초들, 예를들면 쑥, 냉이, 씀바귀, 곰취 등 봄철식단에 반찬으로 이용된 것과 한방 처방에 들어가 있는 모든 식물들도 넓게는 모두 허브의 범주에 넣을 수 있는 것이다.</p>
 <ul>
  <li>허브는 약용식물이다</li>
  <li>허브는 향기식물이다</li>
  <li>허브는 채소이다</li>
  <li>허브는 향신료이다</li>
  <li>허브는 미인을 만든다</li>
 </ul>
</div>

<div id="content2">
 <h5>허브의 종류</h5>
 <dt>바질(Basil)</dt>
  <dd>두통, 신경과민, 구내염, 강장효과, 건위, 진정, 살균, 불면증에 좋고 젖을 잘 나오게 하는 효능이 있으며, 졸림을 방지하여 늦게까지 공부하는 수험생에게 좋다. 또한 신장의 활동을 촉진시키며 벌레 물린데에 살균효과가 있다.</dd>
 <dt>캐모마일(Chamomile)</dt>
  <dd>목욕제로 쓰면 심신의 긴장을 풀어주며 전신 미용에 효과가 크다. 불면증에도 차로 마시면 좋고 감기에 발한 해열 작용, 신경통, 류마티스에 진통 진정작용, 여성의 냉증에도 좋으며 미용효과로는 식후나 취침 전 뜨거운 물 한 컵에 꽃 3~5송이를 넣고 몇 분 간 우렸다가 건져내고 마시면 좋다.</dd>
 <dt>레몬밤(Lemonbalm)</dt>
  <dd>레몬밤의 차는 뇌의 활동 강화, 기억력 증진에 효과가 있어 공부하는 수험생에게 좋다. 또한 우울증을 해소시키며 해열, 발한작용이 있어 감기 초기에 조석으로 마시면 효과적이며 체력소모가 많은 여름철 청량음료로도 좋다.</dd>
</div>

<div id="infolist"> 
 <ul>
  <li id="list_title">허브 향기 가득한 곳</li>
  <li><a href="http://www.herbisland.net/" target="_blank">포천 허브아일랜드</a></li>
  <li><a href="http://www.herbhillz.com/" target="_blank">대구 허브힐즈</a></li>
  <li><a href="http://www.herbnara.com/" target="_blank">평창 허브나라</a></li>
  <li><a href="http://www.iyherbland.co.kr/" target="_blank">일영 허브랜드</a></li>
  <li><a href="http://www.herbvillage.co.kr/" target="_blank">연천 허브빌리지</a></li>
 </ul>
</div>
</body>
</html>



📃 layout 2

@charset "UTF-8";

#wrapper{
	background: url("../images/common/wrap_bg.jpg")no-repeat top center;
}

#header{
	background: url("../images/common/bg_menubox.png")no-repeat top center;
	width: 940px;
	height: 105px;
	
}

#infoMenu{
	text-align: right;
	margin-right: 80px;
	margin-bottom: 10px;
}

#infoMenu li{
	display: inline;
	padding: 0px 3px 0px 8px;
	border-left: 1px dotted gray;
}

.logo{
	position: absolute;
	top: 32px;
	left: 30px;
}

#navigation{
	background: url("../images/common/sitemenu_bg.gif")no-repeat 0 0;
	width: 842px;
	height: 43px;
	margin-left: 45px;
}

#navigation li{
	float: left;
}

#navigation li.first{
	margin-left: 217px;
	
}

#naviSub01{
	position: absolute;
	top: 77px;
}

#contents{
	background: url("../images/common/contents_box.png")no-repeat 0 0;
	width: 940px;
	height: 400px;
	margin-left: 30px;
}

#subWrap{
	width: 190px;
	height: 200px;
	background: url("../images/common/subwrap_bg.gif")no-repeat 0 0;
	float: left;
	padding: 30px;
}

#subWrap h2{
	padding: 10px;
	border-bottom: 5px solid;
	border-color: orange;
}
#subWrap > ul li{
	border-bottom: 1px solid;
	border-color: orange;
	padding: 10px;
}

#subWrap > ul li.select{
	font-weight: bold;
	font-size: 15px;
}

#subWrap > ul li.select a{
	color: orange;
}

#contentsWrap{
	width: 620px;
	float: left;
}

#quick{
	width: 50px;
	height: 250px;
	float: right;
	background: url("../images/common/quick_bg.gif")no-repeat 0 0;
	
}

#quick ul{
	padding: 5px;
	
}

#quick ul > li{
	padding: 3px;
}

.search{
	margin-top: 50px;
	
}

.btnSearch{
	float: right;
}

.depth{
	float: right;
	padding: 40px;
	font-size: 13px;
	color: gray;
}

#contentsWrap img{
	padding: 20px;
	margin-top: 20px;
}

#contentsArea{
	border-top: 2px dotted;
	padding: 20px;
	border-color: #efefef;
}

#slogan{
	position: relative;
}
.sloganImg{
	float: left;
}

.sloganCon{
	font-size: 14px;
	color: #949285;
	float: left;
}

.name{
	color: red;
}

#footer{
	clear: both;
}

.guideMenu {
	list-style: none;
	margin-left: 120px;
	
}


.guideMenu li{
	margin: 0 auto;
	border-radius: 10px;
}

.guideMenu li a{
	width: 135px;
	height: 15px;
	float: left;
	padding: 10px;
	background-color: gray;
	color: white;
	font-weight: bold;
	
}

.footerLogo{
	bottom: 320px;
	position: absolute;
}

address{
	clear: both;
	margin-left: 120px;
	padding-top: 50px;
}

.footerInner{
	margin-top: 50px;
}
트라이(Trie)
맥북 세팅

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage