전체 글 (894) 썸네일형 리스트형 11장 예제 - 애니메이션의 지점, 이름, 실행시간 적용하기 DOCTYPE html> 애니메이션의 지점, 이름, 실행시간 적용하기 #container { width:500px; margin:20px auto; } .box { width:100px; height:100px; float:left; margin:50px; } #box1 { background-color:#4cff00; /*연두색 박스*/ border:1px solid transparent; /*1px짜리 투명 테두리 */ animation-name:shape; /*애니메이션 지정*/ animation-duration: 3s; /*애니메이션 실행 시간 */ } #box2 { background-color:#8f06b0; /*보라색 박스*/ border:1px solid transparent; /*1px짜.. 11장 실습 1 DOCTYPE html> 마우스 오버하면 상품정보 표시하기 #container { width:1000px; margin:20px auto; } h1 { text-align:center; } .prod-list { list-style:none; padding:0; } .prod-list li { float: left; padding: 0; margin: 10px; overflow: hidden; position: relative; } .prod-list img { margin:0; padding:0; float:left; z-index:5; } .prod-list .caption { position: absolute; top:200px; /* 기준 위치보다 200px 아래로 */ width:300px; h.. 11장 예제 - 트랜지션 속성 한꺼번에 지정하기 DOCTYPE html> 트랜지션 속성 한꺼번에 지정하기 .box { margin:50px auto; width:100px; height:100px; background-color:#fb5; border:1px solid #222; transition:2s ease-in;/* 대상: all, 시간:2초, 함수:ease-in */ } .box:hover { /*여기에 있는 속성이 모두 트랜지션 대상*/ width:200px; height:200px; background-color:#f50; transform:rotate(270deg); } 11장 예제 - 트랜지션 대상과 진행 시간 진행하기 DOCTYPE html> 트랜지션 대상과 진행 시간 지정하기 .box { margin:20px auto; width:100px; height:100px; background-color:#07f; border: 1px solid black; transition-property: width,height; /*트랜지션 대상 - 너비, 높이*/ transition-duration:2s, 1s; /*트랜지션 시간 -2초 1초*/ } .box:hover { width:200px; height:120px; } 11장 예제- skew()함수를 텍스트 영역에 적용하기 DOCTYPE html> skew()함수를 텍스트 영역에 적용하기 #container { width:600px; margin: 20px auto; } h1 { width:500px; height:80px; background-color:#222; color:#fff; font-weight:bold; line-height:80px; text-align:center; transform:skewX(15deg); /*x축 기준으로 15도 비틀기 */ } CSS 변형 함수 익히기 11장 예제 - rotate()함수 1. 함수를 사용해 2차원에서 회전하기 DOCTYPE html> Transform:rotate #container{ width:800px; margin:20px auto; } .origin { width: 100px; height: 100px; float: left; margin: 40px; } #rotate1:hover { transform: rotate(40deg); /* 시계 방향(오른쪽)으로 40도 회전 */ } #rotate2:hover { transform: rotate(-40deg); /* 시계 반대 방향(왼쪽)으로 40도 회전 */ } 2. 이미지를 회전하며 원근감 주기 DOCTYPE html> 이미지 회전하며 원근감 주기 .origin { width:300px; height:180px; .. 11장 예제 scale()함수를 사용해 확대.축소하기 DOCTYPE html> scale()함수를 사용해 확대.축소하기 #container { width:800px; margin:20px auto; } .origin { width:100px; height:100px; border:1px solid black; float:left; margin:40px; } .origin > div { width:100px; height:100px; background-color:orange; } #scalex:hover{ /*x축으로 2배 확대 */ transform:scaleX(2); } #scaley:hover{ /*y축으로 1.5배 확대 */ transform:scaleY(1.5); } #scale:hover{ /*x,y축으로 0.7배 확대 */ transform:s.. 11장 예제 - translate() 함수를 사용해 웹 요소 이동하기 DOCTYPE html> translate()함수를 사용해 웹 요소 이동하기 #container { width:800px; height:200px; margin:20px auto; } .origin { width:100px; height:100px; border:1px solid black; float:left; margin:40px; } .origin > div { width:100px; height:100px; background-color:orange; } #movex:hover { transform:translateX(50px); }/*x축으로 50px 이동 */ #movey:hover { transform:translateY(20px);} /*y축으로 20px 이동 */ #movexy:hover.. 이전 1 ··· 102 103 104 105 106 107 108 ··· 112 다음
