728x90
반응형
1. transform
2. transition
1. transform
[ 정의 ]
- 요소의 위치, 크기, 회전, 비틀기(왜곡) 변형을 지정할 수 있다.
- transform: 값;
[ 값(함수) 종류 ]
| 이름 | 설명 |
| translate() | 위치 변형 (position: relative와 유사하다.) |
| scale() | 배율(크기) 변형 |
| rotate() | 회전 변형 |
| skew() | 왜곡 변형 |
[ 예제 1 ]
<style>
.box {
border: 1px solid black;
width: 100px;
height: 100px;
margin-right: 100px;
margin-top: 30px;
background-color: cornflowerblue;
float: left
}
#box1 { transform: translate(0, 100px); }
#box2 { transform: scale(1.2, 1.2); }
#box3 { transform: rotate(70deg);}
#box4 { transform: skew(0, 30deg);}
</style>
<body>
<div id="box1" class="box">이동하는 상자(translate)</div>
<div id="box2" class="box">확대하는 상자(scale)</div>
<div id="box3" class="box">각도기 상자(rotate)</div>
<div id="box4" class="box">왜곡된 상자(skew)</div>
</body>
[ 예제 2 ]
<style>
.box {
border: 1px solid black;
width: 100px;
height: 100px;
margin: 0 auto;
float: left;
background-color: cornflowerblue;
}
.box { transform: translate(0, -50px);}
.box:hover { transform: translate(0, 10px);}
</style>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
2. transition
[ 정의 ]
- 수치형 속성값에 한해서 객체의 속성(상태값)이 변화되는 과정을 시간 순으로 보여주는 기술
- 정해진 시간 동안 요소의 속성값을 부드럽게 변화시킬 수 있다.
[ 속성 ]
| 속성 | 설명 |
| transition | 모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있다. |
| transition-property | 요소에 추가할 전환(transition) 효과를 설정한다. |
| transition-duration | 전환(transition) 효과가 지속될 시간을 설정한다. |
| transition-timing-function | 전환(transition) 효과의 시간당 속도를 설정한다. |
[ transition 예제]
See the Pen transition 예제 by yhyuk (@yhyuk) on CodePen.
[ transition-timing-function 예제 ]
See the Pen transition 예제2 by yhyuk (@yhyuk) on CodePen.
MEMO>
# 하나의 문제로 여러가지 답이 있듯이, CSS도 그런 부분이 강한거같다. 하지만, 보편적으로 이럴땐 이렇게, 저럴때 저렇게 하는 노하우? 같은건 있는거같다. ( 선생님이 알려주신 노하우를 내것으로 만들기 )
# 웹 수업 듣고 나서 부터 계속 느낀건데 오늘 transform, transition을 배우면서 확실하게 느낀것은 '디자인' 이란 분야도 정말 어렵고 창의적인 부분이 많이 필요하다는걸 느꼈다.
# 주말에 선생님이 나눠준 문제 여러번 풀고 백지 상태에서도 풀어보기.
728x90
반응형
'교육 > CSS' 카테고리의 다른 글
| CSS 개발자 수업 59일차 - animation, flex (0) | 2021.06.21 |
|---|---|
| CSS 개발자 수업 57일차 - 가상 클래스 선택자, 속성 선택자, 전후 선택자, shadow (0) | 2021.06.20 |
| CSS 개발자 수업 56일차 (0) | 2021.06.17 |
| CSS 개발자 수업 55일차 - float, position, z-index (0) | 2021.06.17 |
| CSS 개발자 수업 54일차 - text, box, align, overflow, visibility, display, opacity (0) | 2021.06.15 |
댓글