background-color : red
background-image : url("bg.png")
background-repeat : repeat, no-repeat, repeat-x, repeat-y
background-attachment : scroll, fixed
background-position : left top or x% y% or x y
background-size : 100px 100px or cover or containtransform
https://opentutorials.org/course/2418/13684
변형(transform) - 생활코딩
소개 transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다. 형식 transform은 아래와 같은 형식이 올 수 있습니다. /* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transf
opentutorials.org
transition
전환은 효과가 변경 되었을 때 부드럽게 처리해주는 기능
<!doctype html>
<html>
<head>
<style>
a{
font-size:3rem;
display:inline-block;
/*
transition-property: font-size transform;
transition-duration: 0.1s;
transition:all 0.1s;
*/
transition:all 0.1s;
}
a:active{
transform:translate(20px, 20px);
font-size:2rem;
}
</style>
</head>
<body>
<a href="#">Click</a>
</body>
</html>':: IT > CSS' 카테고리의 다른 글
| [CSS] 유지보수(link와 import, minify) (0) | 2020.03.26 |
|---|---|
| [CSS] Multi column, Media query, float (0) | 2020.03.26 |
| [CSS] 간격, box-sizing, 포지션, flex, 레이아웃 (0) | 2020.03.25 |
| [CSS]가상클래스선택자, 다양한 선택자들, 연습사이트(CSS Diner),font-siz , text-align, font (0) | 2020.03.25 |
| [CSS] 선택자의 종류(아이디 선택자, 클래스 선택자, 부모자식 선택자) (0) | 2020.03.25 |