[7주][1일][1~2th] HTML/CSS: webkit박스, ms박스

★ 용어 정리

-webkit-box-align:center; 박스에서 가운데정렬(세로)

-webkit-box-align:end; 박스에서 밑으로 정렬(세로)

-webkit-box-pack: center; 박스에서 가운데정렬(가로)

-webkit-box-orient: horizontal; 박스 안 내용을 수평으로 나열

-webkit-box-orient: vertical; 박스 안 내용을 수직으로 나열

-webkit-box-direction: reverse; 표 내용을 뒤집어줌

-webkit-box-ordinal-group:3; 표 안의 우선순위 정하기(위치를 직접 바꿔줌)

display: -webkit-box; div에 적용시, 기본값 세로 정렬에서 가로정렬로 바뀜

 

-webkit-transition-duration:2s; hover 적용시(마우스롤오버) 2초동안 마우스롤오버 효과를 줌.

-webkit-transition-function:ease-in; duration과 함께 사용시 가속효과
-webkit-transition-function:ease-out; duration과 함께 사용시 감속효과

 

-webkit-transform:rotate(45deg);
-webkit-transform-origin:top left;

-webkit-transform:rotate(60deg) scale(1.5,1.5); 박스 크기가 1.5배 확대됨.

 

-webkit-box-flex:1;

-webkit-box-flex:2;

// 박스의 비율을 말함. 위의 경우 표는 2개고 1:2 비율임.

 

background:url(images3/leaf_g.png) no-repeat left center; 왼쪽 가운데에 이미지가 오게 한다.

 

 

☆ 실습 : 마우스롤오버(이미지 돌아가게 하기)

CSS

body, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd {
    margin:0px;
    padding:0px;
    }
   body {
    background:url(images3/eye_bg.png) repeat-x;
    }
   header {
    background:url(images3/eyetop.png) no-repeat center 36px ;
    width:638px;
    height:369px;
    margin:0px auto;
    }
   header h1, header h2, header p {
    display:none;
    }
   section {
    width:600px;
    margin:25px auto;
    }
   section dl {
    float:left;
    width:276px;
    height:193px;
    }
   section dt, section dd {
    display:none;
    }
   /* Transform */ 
   #book1{
    background: url(images3/snow_book1.png) no-repeat;
     -webkit-transform: rotate(30deg);
     -webkit-transform-origin: 50% 50%;
     margin-top:30px;
   }
   #book1:hover{
    background: url(images3/snow_book1.png) no-repeat;
     -webkit-transform: rotate(0deg);
     -webkit-transform-origin: 50% 50%;
     width:500px;
     margin-top:30px;
     -webkit-transition-duration:2s;
    -webkit-transition-function:ease-in;
   }
   
   #book2{
    background: url(images3/snow_book2.png) no-repeat;
    -webkit-transform: rotate(-15deg);
     -webkit-transform-origin: 50% 50%;
   }

 

HTML

<header>
   <h1>눈으로 익히는 IT 길잡이 눈길 시리즈</h1>
   <h2> 교재+학습 통합형 IT 입문서 눈길 시리즈 </h2>
   <p> 기초만 탄탄히 다지면 응용 실력은 저절로 따라온다.필수 기능만을 엄선하여 학습 부담을 없앴습니다.</p>
  </header>
  <section>
   <dl id="book1">
    <dt>포토샵 CS5</dt>
    <dd>다년간의 포토샵 강의 노하우로 포토샵의 기본기를 한권으로 끝낸다!</dd>
   </dl>
   <dl id="book2">
    <dt>일러스트레이터 CS5</dt>
    <dd>캐릭터 디자인부터 고급 일러스트까지 만는 벡터 그래픽툴.</dd>
   </dl>
  </section>