1. box-sizing
<style>
.box {
width: 400px;
border:5px solid black;
padding:20px;
box-sizing: border-box;
background-color: lime;
}
</style>
위 코딩이 적용된 웹화면
1. flex
<style>
#wrap {
width: 900px;
margin: 0 auto;
display: flex;
}
</style>
위 코딩이 적용된 웹화면
1. transition
<style>
.box {
width: 100px;
height: 100px;
background-color: lime;
transition: all 1s linear;
}
.box:hover {
width: 100%;
height: 200px;
background-color: blue;
}
</style>
참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function
1. animation
1. transform
transform-style : 자식 요소를 3D 공간에 배치하거나 2D 평면에 평평하게 배치 할지를 지정
1. filter
invert() : 반대로 보이게 하는 효과
opacity() : 투명도
sepia() : 브라운톤의 단색으로 보이게 하는 효과