[7주][4일][1~2th] HTML/CSS: 실습하기

☆ 실습(1) : 아래 그림과 같이 만들어라

 

CSS

.newbook{
 font-size: 50px;
 text-shadow: 0 0 10px #666;
 color:#fff;
 margin:0 auto;
 text-align: center;
 text-transform: capitalize;
 font-family : "맑은 고딕";
 font-style: italic;
}
.booklist ul{
 list-style-type: none;
 width:498px;
}
.booklist li{
 float:left;
 margin-right: 46px;
 margin-top:6px;
}
.booklist{
 background: url(images/book_bg.png) no-repeat;
 width:498px;
 height:300px;
 border-radius: 25px;
 border: 5px double #999;
 margin: 0 auto;
}
#wrap{
 background:#ff0;
 width:600px;
 height:500px;
 margin:0 auto;
}

 

HTML

<div id="wrap">
<h1 class="newbook">new book</h1>
<div class="booklist">
<ul>
<li><a href="#"><div><img src="images/book1.png"></div></a>
<li><a href="#"><div><img src="images/book2.png"></div></a>
<li><a href="#"><div><img src="images/book3.png"></div></a>
</ul>
</div>
</div>

 

 

☆ 실습(2) : 쇼핑몰 크게 보기 효과 내기

 

CSS

img{
 border: none;
}
li{
 list-style-type: none;
}
a{
 text-decoration:none;
}
*{
 margin: 0px;
 padding: 0px;
}
body{
 font-family: "맑은 고딕";
}
#gallery li{
 float:left;
 width:100px;
 height:100px;
 margin: 10px;
}
#gallery li a img{
 border: 2px solid #000;
 width:100px;
 z-index:2;
 position:relative;
  -webkit-transition-duration:1s;
}
#gallery li a:hover img{
 position:relative;
 width:300px;
 z-index:3;
 box-shadow:0 0 10px #000;
 -webkit-transition-property:width,height;
 -webkit-transition-duration:1s;
 -webkit-transition-delay:0.5s; 
}
#gallery li a .name{
 background: #f00;
 text-align:center;
 color:#fff;
 top:-105px;
 position: relative;
/*   display:none; */
  z-index:30;
  visibility: hidden;
}
#gallery li a:hover .name{ 
 visibility: visible;
 top:-306px;
 left:2px;
 position: relative;
}

 

HTML

<ul id="gallery">
<li><a href="#"><img src="images/bag_hotpink.png">
<div class="name"><span>Hot Pink</div>
</a>
<li><a href="#"><img src="images/bag_navy.png">
<div class="name"><span>Hot Pink</div>
</a>
<li><a href="#"><img src="images/bag_white.png">
<div class="name"><span>Hot Pink</div>
</a>
</ul>

 

결과