1)배운내용
애니메이션 활용
transform 활용법
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="ftp-8">
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>
<div class="transform"></div>
</body>
</html>CSS
.transform {
width: 300px;
height: 300px;
background-color: yellow;
transform: rotate(45deg); ---> 양수 오른쪽, 음수 왼쪽으로 회전
transform: scale(2, 3); ---> 비율로 키우는 것, x축 width 값, y축 height 값
transform: skew(-10deg, 20deg); ---> 3차원 회전효과 적용, x축 회전, y축 회전
transform: translate(100px, 100px); ---> 선택 영역 object 위치를 변경할 때
margin-left: 300px;
margin-top: 500px;
-webkit-transform: rotate(10deg); ---> 프리픽스 브라우저들의 고유버전표기
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}-
w3school.com 여러 버전들 확인가능
-
프리픽스 표기
-
크롬사파리, 파이어폭스, ms브라우저, 오페라
Transition
CSS
.transition {
width: 300px;
height: 300px;
background-color: yellow;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear; ---> 처음부터 끝까지 같은 속도
transition-delay: 1s; ---> 1초 후에 애니메이션 움직임
transition: width 2s linear 1s, height 2s linear; ---> 위의 4줄을 한 줄로 정렬, 듀레이션과 딜레이 주의, 첫 번 째가 듀레이션 두 번 째가 딜레이, height 추가도 가능
}
.transition:hover { ---> 애니메이션이 움직이는 부분
width: 600px;
height: 600px;
}-
Duration과 Delay를 한 줄로 사용할 때, 앞쪽이 듀레이션 뒤쪽이 딜레이
-
새로운 속성들 추가시 ,로 구분해서 추가
animation
<!DOCTYPE html>
<html>
<head>
<meta charset="ftp-8">
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>
<!-- <div class="transform"></div> -->
<!-- <div class="transition"></div> -->
<div class="animation"></div>
</body>
</html>CSS
.animation {
width: 300px;
height: 300px;
background-color: yellow;
animation-name: changeWidth; ---> 위쪽과 비슷함
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 6s; ---> 6회
animation-iteration-count: infinite; ---> 계속
animation-direction: normal; --->진행방향 정방향
animation-direction: alternate; ---> 반복
}
@keyframes changeWidth {
from {
width: 300px; ---> 시작
height: 300px;
background-color: yellow;
}
to {
width: 600px; ---> 끝
height: 600px;
background-color: red;
border: solid 10px blue; ---> 파란경계선
}
}
-
from to를 사용해서 다양한 커스텀 가능
-
from to 대신 0%, 25%, 100% 등등 으로 시작과 끝 표현가능
spin-lion
HTML
<div class="spin-lion"></div>CSS
.spin-lion {
width: 150px;
height: 150px;
background-color: blue;
animation-name: spinLion;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation: spinLion 1.5s linear infinite alternate 1s;
animation: spinLion 1.5s linear infinite alternate 1s; ---> 한 줄로 사용가능 (두 개의 숫자는 먼저 듀레이션 뒤쪽 딜레이) 숫자 하나면 듀레이션
@-webkit-keyframs spinLion { ---> 자동으로 대표하는 것이 아님
from {
-webkit-transform: rotate(-10deg); ---> 같이 달아줘야함
}
to {
-webkit-tranform: rotate(10deg);
}
}
@keyframs spinLion {
from {
transform: rotate(-10deg);
}
to {
tranform: rotate(10deg);
}
}-
jeremyckhan.github.io/stylie
-
움직임에 대한 css속성 자동으로 가능
hover
HTML
<div class=hover-image>
<img src="https://img.pngio.com/sea-background-png-transparent-sea-backgroundpng-images-pluspng-ocean-background-pictures-png-585_329.png"
<div class="image-info">
<h2>Title</h2>
<p>Parapragh</p>
</div>
</div>CSS
.hover-image:hover img {
box-sizing: border-box;
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
}2)어려운점
-
뼈대를 새우는 HTML의 구조에 비해 CSS의 세부설정 방법들이 많아서 외우려고 생각하니 어렵게 느껴짐
-
여전히 홀로 코드를 짜보라고 하면 헷갈림
-
벨로그작성을 위한 코딩을 하는 것인지 실습을 하기 위한 것인지 강의를 들으면서 작성을 동시에 하니 이해가 잘 안됨
3)해결방법
-
단순한 방법이지만 반복함(익숙하지 않아서 더 헷갈린다고 생각함)
-
먼저 듣고 다시 작성해봄(훨씬 나음)
-
동시에 작업을 하니 집중이 잘 안됨
4)학습소감
-
CSS의 스타일 적용 부분 활용이 생각보다 많은 것 같아서 흥미롭게 느껴짐
-
애니메이션 효과들이 흥미로움
-
생각보다 툴이 많은 것 같음
Please be wonderful but don't be so serious, enjoy this journey with the good people!