opacity
요소의 투명도를 조절하는 스타일 속성이며, 0.0부터 1.0 사이의 값으로 설정할 수 있다.
position
요소의 위치를 설정할 수 있다.
static : 기본 값이며, 마크업 순서대로 배치된다. top, left, right, bottom, z-index 값에 반응하지 않는다.
relative : 현재 위치를 기준으로 이동할 수 있다.
absolute : static 을 제외한 position 속성을 가진, 가장 가까운 부모를 기준으로 이동할 수 있다.
fixed : 마크업 순서와 무관하게 배치된다.
sticky : 스크롤 위치에 따라 relative 또는 fixed 로 전환한다. 즉, 평소엔 relative, 스크롤이 해당 요소의 위치에 오면 fixed로 전환.
z-index
요소의 깊이를 변경할 수 있다.static을 제외한 position 속성이 설정된 상태에서 사용할 수 있다. 음수가 설정될 경우 기본 요소보다도 아래 배치된다.
overflow
내부의 요소가 부모의 범위를 벗어날 때의 어떻게 처리할 지 지정할 수 있다.
vidible : 기본값으로, 넘치는 부분을 그대로 보여준다.
hidden : 넘치는 부분을 감춘다.
scroll : 스크롤을 생성한다.
auto : 상황에 맞춰 스크롤을 생성한다.
transform
요소의 위치를 옮기거나 크기를 조절하고, 회전, 왜곡 시킬 수 있다.
translate(x, y) : 지정한 값 만큼 수평, 수직 이동시킨다.
translate(x, y, z) : 지정한 값 만큼 수평, 수직, 앞뒤로 이동시킨다.
translateX(x) : 지정한 값 만큼 수평 이동시킨다.
translateY(y) : 지정한 값 만큼 수직 이동시킨다.
translateZ(z) : 지정한 값 만큼 앞뒤로 이동시킨다.
이하는 한개씩만..
scale(x, y) : 지정한 값 확대/축소한다. 음수일 경우 해당 축을 기준으로 요소를 뒤짚는다.(invert)
rotate(angle) : 지정한 각 만큼 수평, 수직방향으로 회전한다.
transition
한 스타일에서 다른 스타일로 변경한다.
시간을 조절함으로써 애니메이션 효과를 낼 수 있다.
transition: property, duration, timing-function delay
property : 트랜지션이 적용될 css 속성 (none, all, 속성이름)
duration : 트랜지션 실행시간
timing-function : 트랜지션효과의 곡선형태
- liner : 같은 속도로 진행
- ease : 느리게 시작, 점점 빨라짐, 느리게 종료 (기본값)
- ease-in : 느리게 시작
- ease-out : 느리게 종료
- ease-in-out : 느리게 시작, 느리게 종료
- cubic-bezier(n,n,n,n) : 직접 함수를 정의해서 사용
delay : 지연시간
자세한 예는 cssreferecne.io 에서...
