[KOSTA] Spring 기반 Cloud 서비스 개발자 양성자 과정 36일차 - CSS 실습
0
💻 KOSTA Spring 기반 Cloud 서비스 구현 개발자 양성 과정 실습
목록 보기
31/47
.png)
📃 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;
}
DB 엔지니어👍