상대 크기 em / rem
em 단위는 상위 요소 크기의 몇배인지를 나타내는 크기(1.5em : 상위요소의 1.5배)
rem 단위는 문서의 최상위 요소, 즉 html 요소 크기의 몇 배인지를
나타내는 크기(1.5rem : html요소의 1.5배)
CSS 2D
transform
이차원 좌표에서 요소를 변형시키는 속성
이동, 확대/축소, 회전, 경사 등을 만들 수 있음
translate, scale, rotate, skew
벤더 프리픽스(vender prefix)
주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때
이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미
아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만
아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 앞에 붙여준다. 벤더 프리픽스를 사용하는 방법은 해당 속성 이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며,
표준 문법 코드는 가장 마지막에 작성해야 한다.
linear-gradient
background : linear-gradient(방향,색상1,색상2)
방향은 생략이 가능하며 생략시에는 벤더 프리픽스도 생략 가능(표준화 코드 적용 가능)
방향에 가로방향(left,right)을 작성시에는 벤더 프리픽스를 꼭 작성해 주어야 함
transition
요소에 추가할 css 스타일의 전환효과를 설정
추가할 전환효과나 지속될 시간도 설정
transition:property timing-function duration delay
property : 요소에 추가할 전환효과의 적용 속성을 설정
timing-function : 전환효과의 변화되는 속도값을 설정
linear : 일정한 속도로 변환
ease : 전환효과가 변하면서 변환(천천히 - 빠르게 - 천천히)
(ease-in ease-out ease-in-out)
duration : 전환효과의 걸리는 시간 설정
delay : 전환효과의 대기시간 설정
CSS 애니메이션
요소의 현재 스타일을 다른 스타일로 변화
적용할 스타일은 이전 프레임에 적용하는 것이 아니라 초기 스타일에 적용
(ex : transform)
@keyframes 애니메이션명{
from 혹은 0%{
처음에 적용할 스타일
}
정수%{
중간 지점마다 적용할 스타일
}
...
to 혹은 100%{
마지막에 적용할 스타일
}
}
perspective()
3D 환경을 만들기 위해 사용자의 관찰자 시점(투영점)을 구체화해서
입체감을 부여하는 속성, 스크린에서 해당 px만큼 떨어진 곳에 관찰자가
있다는 것을 근거로 구성
'Front-end > CSS' 카테고리의 다른 글
| [CSS 05] 플렉서블 레이아웃, 미디어 쿼리 (0) | 2022.02.19 |
|---|---|
| [CSS 04] Position, 조상요소 (0) | 2022.02.19 |
| [CSS 03] 배경, 박스모델, 디스플레이, 폼 (0) | 2022.02.13 |
| CSS 02 (0) | 2022.01.23 |
| CSS 01 (0) | 2022.01.23 |