1. 학습내용
오늘은 Box-shadow와 애니메이션 효과를 주는 방식에 관해 배웠다.
- Box-shadow
<style>
div{width: 600px; height: 250px;
background: url('images/book.png') no-repeat;
border: solid 1px #ccc;}
#example1{box-shadow: 5px 10px;}
#example2{box-shadow: 5px 10px #888;}
#example3{box-shadow: 5px 10px skyblue;}
#example4{box-shadow: 2px 2px 2px black,
0 0 25px blue,
0 0 5px darkblue;}
#example5{box-shadow: 5px 5px 5px 5px grey inset;}
</style>
</head>
<body>
<div id="example1"></div>
<br><br>
<div id="example2"></div>
<br><br>
<div id="example3"></div>
<br><br>
<div id="example4"></div>
<br><br>
<div id="example5"></div>
<br><br>
각각 수치에 따라서 그림자를 짙게 주거나, 밖이 아닌 안쪽으로 주는 등의 옵션을 지정할 수 있다.
- transform과 transition으로 애니메이션 효과 주기
transform : 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여.
<style>
.origin{
width: 200px; height: 134px;
border: 1px solid black;
margin: 40px; perspective: 200px;/*원근감*/
}
/*이미지 이동*/
.movex:hover{
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
-moz-transform: translateX(50px);
-o-transform: translateX(50px); /*오페라*/
transform: translateX(50px);
}
.movey:hover{
transform: translateY(50px);
}
.movexy:hover{
transform: translate(10px, 20px);
}
/*이미지 확대, 축소*/
.scalex:hover{
transform: scaleX(1.5);
}
.scaley:hover{
transform: scaleY(1.5);
}
.scalexy:hover{
transform: scale(0.5,0.5);
}
/*기울임 - 각도*/
.skewx:hover{transform: skewX(40deg);}
.skewy:hover{transform: skewY(20deg);}
.skewxy:hover{transform: skew(30deg, -30deg);}
/*회전*/
.rot:hover{transform: rotate(90deg);}
/*3차원*/
.rotx:hover{transform: rotateX(45deg);}
.roty:hover{transform: rotateY(45deg);}
.rotz:hover{transform: rotateZ(45deg);}
.rotxyz:hover{transform: rotate3d(2.5, 1.2, -1.5, 45deg);}
</style>-transition : transition-property (en-US), transition-duration (en-US), transition-timing-function (en-US) 과 transition-delay를 위한 단축 속성. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 :hover 이나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것들이다.
참고: https://developer.mozilla.org/ko/docs/Web/CSS/transition
<style>
/*전환 프로퍼티, 전환시간*/
span{transition: font-size 1s;}
span:hover{font-size: 500%;}
</style>
</head>
<body>
<p><span>꽝!</span>글자에 마우스를 올려보세요.</p>
</body>2. 어려웠던 점 및 해결방안
새로이 알았던 것들을 적어본다.
만약 transform 을 적어주고 싶다면, 원래 이미지를 감싸는 공간태그에 perspective: 200px;
같이 원근감을 줘야지 적용이 된다.
그리고 여러 웹 브라우저 상에서 적용이 되게 할려면 해당 포맷을 transform앞에 적어준다.
transition은 변화를 줄 프로퍼티를 적어 준 다음에 변환전과 후에 관한 프로퍼티를 각각 태그에 적어 주면 적용이 된다.
<style>
div{width: 100px; height: 100px;
background: orange; margin-bottom: 100px;} /*변환전 스타일*/
.box{transition-property: width, height, background-color;
transition-duration: 1s ,3s;}
.box:hover{width: 300px;height: 300px;
background-color: brown;} /*변환후 스타일*/
.box2{transition-property: background-color,transform, width, height;
transition-duration: 3s;}
.box2:hover{background-color: aquamarine;
width: 200px;height: 200px;transform: rotate(18deg);} /*변환후 스타일*/
</style>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>3. 학습소감
애니메이션을 써 본적은 있지만 이렇게 세세하게 배운적은 처음이었다.
잘 활용한다면 좀 더 동적인 사이트를 만들 수 있을거란 생각이 들었다.
친숙한 개발자가 되고픈 사람