[7주][2일][1~2th] HTML/CSS: 마우스롤오버 페이지, -webkit, -ms의 사용

★ 용어 정리

bottom:0px;

position:fixed;

 -> 꼬리 부분이라고 할 때, 고정시켜 주는 것.

☆ 실습(1) : <header>,<section>,<footer> 페이지 만들기 실습

CSS

*,body{

margin:0px;

font-family: "맑은 고딕";

}

body{

background:#000;

}

section{

float:right;

width:250px;

height:250px;

margin-top:250px;

margin-right:20px;

}

section p{

font-size: 12px;

color:gray;

}

section dl{

font-size: 12px;

margin-top:50px;

color:#fff;

}

#header{

background: #f00;

width:100%;

height:70px;

top:1px;

position:relative;

}

#wrap{

background: url(images3/bg_event.png) no-repeat;

position:relative;

height:551px;

min-height:551px;

width:485px;

margin:0 auto;

top:20px;

}

h1,h2,h3{

display:none;

}

footer{

border-top:solid 3px #f00;

background: #0f0;

width:100%;

height:50px;

bottom:0px;

position:fixed;

text-align:center;

padding-top: 20px;

}

footer a{

}

footer a:hover{

color:#f00;

}

#header ul{

list-style-type: none;

margin:0 auto;

width:1000px;

height: 40px;

top:20px;

position:absolute;

}

a{

text-decoration: none;

}

li{

display:block;

float:left;

}

li a{

padding:10px 20px;

color:#000;

}

li a:hover{

background: #000;

border-radius:5px;

color:#fff;

}

HTML

   <header id="header">  

<nav>

<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>

<li><a href="#">증정도서신청</a></li>

</ul>

</nav>

</header> 

<div id="wrap">

<h1>갤럭시 노트 완전 정복 출간 기념 이벤트</h1>

<h2>모바일 라이프에서 아날로그 감성까지 100배 즐기기! </h2>

<h3>갤럭시 노트를 다루는 가장 합리적인 방법!</h3>

<section>

<p>스마트폰과도 다르고 태블릿 PC도 아닌 신개념 스마트 기기 갤럭시 노트!

새로운 기기에 알맞은 새로운 활용법을 소개합니다! </p>

<dl>

<dt>이벤트1</dt>

<dd class="style1">행사 도서를 구매하신 모든 분들께 갤럭시 노트 전용 

다이나믹 액정보호필름을 드립니다.(선착순, 한정수량)</dd>

<dt>이벤트2</dt>

<dd>갤럭시 노트 완전 정복을 구매하시는 분들께 1,000원 할인 쿠폰을 드립니다./dd>

</dl>

</section>

</div>

<footer>

<p>copyright All Right Reserved. 

<a href="http://www.infopub.co.kr">infopub.co.kr</a></p>

</footer>

결과

아래와 같은 화면이 완성된다. 메뉴는 hover로 롤오버 효과가 되게 하였으며, 링크주소는 없다.

신간도서 메뉴에 마우스를 갖다 대면, 롤오버 효과가 되는 것을 볼 수 있다.

<footer>태그, 제일 밑에 카피라이터 부분에 하이퍼링크 부분에 마우스를 갖다 대면, 빨간색으로 롤오버 되는 것을 볼 수 있다.

☆ 실습(2) : 마우스 대면 본문이 서서히 보이게 하기

 - 주황색 부분이 실제 애니메이션 효과를 준 부분이다.

 - 일단 overflow:hidden; 과 width, height를 사용해서 큰 글자만 보여지고 나머지는 숨긴 다음에 

    -webkit-transition-duration: 2s; 으로 2초에 본문 내용까지 나타나게 하는 실습이다(크롬에서 사용

    하였으므로 앞에 -webkit이 붙는 것이다).

CSS

body, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd {

margin:0px;

padding:0px;

font-family:"맑은 고딕", 돋움;

}

body {

background:url(images3/eye_bg.png) repeat-x;

}

header {

background:url(images3/eyetop.png) no-repeat center 36px ;

width:638px;

height:369px;

margin:0 auto;

}

header h1, header h2, header p {

display:none;

}

dt, dd {

display:inline;

}

dt {

font-size:2em;

font-weight:bold;

letter-spacing:-1px;

}

/* Animation */

#book1{

background: #f00;

width:170px;

height:50px;

overflow: hidden;

-webkit-transition-duration:2s;

}

#book1:hover{

background: #f00;

width:700px;

height:50px;

}

#book2{

background: #ff0;

width:300px;

height:50px;

overflow: hidden;

-webkit-transition-duration:2s;

}

#book2:hover{

background: #ff0;

width:700px;

height:50px;

}

.a{

background: #0f0;

width: 200px;

height: 200px;

position:absolute;

clip: rect(50px,180px,100px,40px);

clear: both;

}

.b{

margin-top:200px;

}

빨간 바탕의 "포토샵 CS5" 가 보인다.

이 안의 내용이 마우스를 갖다 대었을 때 서서히 나타나기 시작한다.

거의 다 왔다.

다 보인다!