※ CSS 2D
1) transform
- 2차원 좌표에서 요소를 변형시키는 속성이다. translate(이동), scale(확대/축소), rotate(회전), skew(경사) 등을 만들 수 있다.
벤더 프리픽스(vendor prefix)
- 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미한다. 아직 CSS 권고안에 포함되지 않은 기능(표준화가 되지 않은 기능)이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 앞에 붙여준다. 벤더 프리픽스를 사용하는 방법은 해당 속성이 적용되지 않았을 경우 표현해야 하는 코드를 가장 먼저 작성하고, 표준 문법 코드는 가장 마지막에 작성해야 한다.
linear-gradient(방향, 색상1, 색상2)
- 배경색으로 그라데이션을 적용시킨다.
2) transition
- 요소에 추가할 css 스타일의 전환효과를 설정한다. 추가될 전환효과나 지속될 시간도 설정할 수 있다.
transition: property timing-function duration delay
| property | 요소에 추가할 전환효과를 설정한다.(어느 속성에 효과를 줄 것인지) |
| timing-function | 전환효과의 변환되는 속도를 설정한다. |
| linear | 일정한 속도로 변환한다. |
| ease | 전환 속도가 달라지도록 설정한다. (ease-in, ease-out, ease-in-out) |
| duration | 전환효과의 시간 설정한다. |
| delay | 전환효과의 대기시간 설정한다. |
<head>
<title>transition - 1</title>
<style>
#bg-tr {
background-color: lightcyan;
transition: background-color linear 2s;
}
#bg-tr:hover { background-color: mediumvioletred; }
#border-tr {
background-color: aquamarine;
border: 5px dotted hotpink;
transition: all ease-out 2s;
}
#border-tr:hover {
background-color: aqua;
border: 5px dashed aliceblue;
border-radius: 50%;
transform: scale(1.5);
}
</style>
</head>
<body>
<h2>transition - 1</h2>
<div id="bg-tr"></div>
<div id="border-tr"></div>
</body>
transition - 1
<head>
<title>transition - 2</title>
<style>
#container {
position: relative;
width: 800px;
height: 400px;
border: 5px solid black;
border-radius: 30px;
margin: 0 auto;
padding: 30px;
}
.box {
font-size: 20px;
width: 140px;
height: 140px;
margin-bottom: 50px;
background-color: gold;
border-radius: 20px;
}
#container:hover > .box {
transform: rotate(720deg);
margin-left: 650px;
}
#no-delay {
transition-duration: 3s;
}
#delay {
transition-duration: 2s;
transition-delay: 1s;
}
</style>
</head>
<body>
<h2>transition - 2</h2>
<div id="container">
<div id="no-delay" class="box">
<p>(☞ﾟヮﾟ)☞</p>
</div>
<div id="delay" class="box">
<p>(´▽`ʃ♡ƪ)</p>
</div>
</div>
</body>
transition - 2
(☞ﾟヮﾟ)☞
(´▽`ʃ♡ƪ)
728x90
'CSS' 카테고리의 다른 글
| 국비 수업 30일 차(22.11.14.) - animation, CSS 우선순위 (0) | 2022.11.14 |
|---|---|
| 국비 수업 29일 차(22.11.11.) - flex 2, 미디어 쿼리 (0) | 2022.11.14 |
| 국비 수업 29일 차(22.11.11.) - flex 1 (0) | 2022.11.14 |
| 국비 수업 28일 차(22.11.10.) - CSS position (0) | 2022.11.11 |
| 국비 수업 27일 차(22.11.09.) - 박스 모델 (0) | 2022.11.11 |