1. css 2D / transform
이차원 좌표에서 요소를 변형시키는 속성
이동, 확대/축소, 회정, 경사 등믈 만들수 있음
translate, scale, rotate , skew
liner-gradient
background: liner-gradient (방향, 색상1, 색상2)
방향은 생략이 가능하며 벤더 프리픽스도 생략 가능
방향에 가로방향 (left, right)을 작성시에는 벤더 프리픽스를 반드시 작성해 주어야함
벤더프리릭스 (vendor prefix)
주요 웹 브라우저 공급자가 (safari, ie, chorm...) 새로운 실험적인 기능을 제공할때
이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미
아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할때 벤더프릭스를 사용
벤터 프릭스를 사용하면 해당 기능이 포함되어 있지 않은 웹 브라우저에서도 가능을 사용 가능
IE : -ms-
crome: -webkit-
Firefox: -moz-
<입력 코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
</head>
<body>
<h2>transform</h2>
<p>orginal</p>
<p id="trans1">translate</p>
<p id="trans2">rotate</p>
<p id="trans3">scale</p>
<p id="trans4">skew</p>
<p id="gradient">gradient</p>
</body>
</html>
<스타일 코드>
<style>
body {
margin-left: 100px;
}
p{
width: 400px;
padding: 15px;
border: 3px solid navy;
}
#trans1 {
background-color: deeppink;
transform: translate(30px, 30px);
}
#trans2 {
background-color: aquamarine;
transform: rotate(60deg); /*deg 도 라고 생각하면 된다. */
}
#trans3{
background-color: skyblue;
transform: scale(1.5, 1.2); /*스케일 : 커진다고 생각하면 됨*/
}
#trans4{
background-color: gold;
transform: skew(30deg, 15deg);
}
#gradient{
background: linear-gradient(to right, pink 40%,green 50%,hotpink);
}
</style>
<출력결과>
<설명>
#gradient는 안에 색이 그라데이션되는 속성의 값을 넣어주고
오른쪽부터 시작해서 40% 핑크, 50% 그린, 그리고 핫핑크로 해주었다.
skew( 회전 x , y 축 ) deg 는 도 라고 생각하면됨
따라, skew( 30deg, 15deg ) 의 속성을 넣어 저렇게 지정 deg 만큼 돌아간것을 볼수 있다.
2. transition
요소에 추가할 css 스타일의 전환효과를 설정
추가할 전환효과나 지속될 시간도 설정
ex)
transition: property timing-function duration dely
property: 요소에 추가할 전화효과의 전용 속성을 설정
timing-function : 전환 효과의 변화되는 속도값을 설정
linear: 일정한 속도
ease : 전환효과가 변하면서 변환 (천천히- 빠르게 - 천천히)
(ease-in ease-out ease-in-out)
duration: 전환 효과의 걸리는 시간 설정
delay:전환 효과의 대기시간 설정
<입력코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transtion-1</title>
</head>
<body>
<h2>transtion-1</h2>
<div id="bg_tr"></div>
<div id="border_tr"></div>
</body>
</html>
<스타일 코드>
<style>
div {
width: 100px;
height: 100px;
margin:30px;
border: 1px solid black;
}
#bg_tr {
background-color: red;
transition: background-color linear 2s;
}
#bg_tr:hover{
background-color: orange;
transition: 2s ;
transform: translate( 300px);
}
#border_tr{
background-color: green;
border: 10px;
transition: all ease 2s;
}
#border_tr:hover {
background-color: blue;
border: 5px solid rgb(250, 0, 137);
border-radius: 50%;}
</style>
< 설명 >
#bg_tr 에 hover을 했을때 빨간색이였던 네모모양이 300px 옮겨가면서( 2초후 )오렌지 색으로 바뀐다.
#border_tr 에 hover 했을때 50%의 테두리 기울기를 줘서 원의 모양으로 바꿔지며 테두리 색이 변하는 모습을
볼수 있다.
'Class > Frontend' 카테고리의 다른 글
| [프론트 엔드 DAY11] (0) | 2022.05.26 |
|---|---|
| [프론트 엔드 DAY09] (0) | 2022.05.24 |
| [프론트 엔드 DAY08] (0) | 2022.05.23 |
| [프론트 엔드 DAY07] (1) | 2022.05.09 |
| [프론트 엔드 DAY06] (0) | 2022.05.02 |
댓글