[웹1]
13강 - 그린소프트
커서 올라가면 배경색 변환
#navi li:hover{
background-color:#689000;
cursor:pointer;
}
ul 점 색깔 변경
.subbox ul{
color:#689000;
}
ul 점 스타일 지우기
#navi{
list-style:none;
clear:both;
padding-left:0;
}
링크 밑줄 제거
#navi a{
color:#fff;
text-decoration:none;
}
알드라이브 - 접속하기 - 호스트 주소, 아이디, 비번 입력 - 이미지, 소스코드 업로드
* 그린소프트_HTML
<head>
<title>Green Soft</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
<img src="images/logo_greensoft.png" alt="" />
</div>
<ul id="navi">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li class="menu1"><a href="#">Contact</a></li>
</ul>
</div>
<!-- contents -->
<div id="contents">
<!-- con1 -->
<div class="conbox">
<h2>Smart Web Design</h2>
<p class="con_p">Creativity makes life exciting, but you need to see results to make it worthwhile.</p>
</div>
<!-- con2 -->
<div class="conbox" id="con2">
<h2>Serious Strategy</h2>
<p class="con_p">We may not say what you want to hear, but it's what will get you the best results.</p>
</div>
<!-- con3 -->
<div class="conbox">
<h2>Real Simplicity</h2>
<p class="con_p">Every second of confusion is a second people have to find someone better.</p>
</div>
<!-- con4 -->
<div class="con4">
<h2>Social Media Design Launches(4/12/2012)</h2>
</div>
</div>
<!-- SubContents -->
<div id="subcon">
<!-- sub1 -->
<div class="subbox">
<h2>Recent Blog Updates</h2>
<ul>
<li><a href="#">A Different Approach to Design</a></li>
<li><a href="#">Seth Godin and "The Dip"</a></li>
<li><a href="#">Bring the Love Back</a></li>
<li><a href="#">Web 2.0 Hype Hurts More Than It Helps?</a></li>
<li><a href="#">Free Wordpress Theme by Forty</a></li>
</ul>
</div>
<!-- sub2 -->
<div class="subbox">
<h2>Latest Portfolio Entries</h2>
<ul>
<li><a href="#">Topanga Management</a></li>
<li><a href="#">Pink Tomorrow</a></li>
<li><a href="#">Rate It All</a></li>
<li><a href="#">Word of Mouth Marketing</a></li>
<li><a href="#">Maitland Primrose</a></li>
</ul>
</div>
</div>
<!-- footer -->
<div id="footer">
<span>Copyright ⓒ 2001-2012 Layout Media. All Rights Reserved. Other divisions: Blog Design, Social Media</span>
</div>
</div>
</body>
</html>
* 그린소프트_CSS
/* CSS Document */
body{
background-color:#56585a;
font-size:14px;
font-family:arial, sans-serif;
}
#container{
width:660px;
margin:0 auto;
}
/* 헤더 */
#logo{
float:right;
}
#navi{
list-style:none;
clear:both;
padding-left:0;
}
#navi li{
float:left;
padding:10px;
border-left:1px solid #689000;
border-top:1px solid #689000;
}
#navi li:hover{
background-color:#689000;
cursor:pointer; ---> 마우스를 올려놓을 때, 화살표가 손가락모양으로 전환됨.
}
.menu1{
border-right:1px solid #689000;
}
/* 상단 컨텐츠 */
#contents{
background-color:#689000;
clear:both;
}
#contents h2{
color:#fff;
}
.conbox{
width:33%;
background-color:#689000;
float:left;
}
#con2{
padding-left:0.5%;
padding-right:0.5%;
}
.con4{
background-image:url(images/main_green.png);
background-repeat:no-repeat;
clear:both;
height:220px;
}
.con_p{
color:#cef498;
width:90%;
margin:0 auto;
}
.con4 h2{
padding-top:180px;
padding-left:220px;
}
/* 서브 컨텐츠 */
#subcon{
background-color:#cef498;
}
.subbox{
width:50%;
background-color:#cef498;
float:left;
}
.subbox h2{
color:#666;
border-bottom:5px solid #689000;
width:90%;
margin-left:auto;
margin-right:auto;
}
.subbox ul{
color:#689000;
}
/* 하단 */
#footer{
color:#fff;
font-size:12px;
text-align:center;
padding-top:10px;
clear:both;
}
/* 링크 꾸미기 */
#navi a{
color:#fff;
text-decoration:none;
}
.subbox a{ ---> 클래스 subbox 안의 a태그로 링크걸려있는 것 모두 / 아래와 같이 형식 적용
color:#689000;
text-decoration:none;
}
.subbox a:hover{ ---> 마우스 올리고 있는 상태
color:#666;
}
[ 스튜디오 홈페이지 ]
Site - New Site
사이트 - 사이트이름, 폴더주소 입력
서버 - 주소, 아이디, 비번, 루트(html) 입력
댓글