알면 좋은 유용한 CSS속성들1 - (알파채널, Opacity(불투명도),transitions,Transform)
안녕하세요 이번 포스팅은 알면 좋은 유용한 CSS속성들에 대해 포스팅 해보겠습니다.
필수는 아니고 그냥 알아두면 좋을 정도라고 생각됩니다!
먼저 알파채널과 Opacity(불투명도)입니다.
2. position(위치특성)
static
디폴트임
기본 위치 특성
relative
현 위치와 상대적 위치로 오프셋을 줄 수 있음
top , left등을 사용하면 오프셋임됨 ⇒ 위치가 변경이 된다.
문서에 원래 위치가 있지만 오프셋으로 위치가 설정이 가능함
absolute
문서의 일반적인 흐름에서 요소가 제거되고 공간도 배정되지 않음
최고 부모 루트에 상대적인 위치
⇒ relative로 조상을 설정해줄 수 있음
fixed
일반 문서흐름에서 제거되고 제일 초기 조상 요소에 상대적인 위치이다.
⇒ 네비게이션 바를 만들 때 사용된다.
스크롤을 내려도 그대로 같이 따라간다.
3. transitions
한 특성에서 다른 특성으로 넘어가는 애니메이션 효과를 줄 수 있다.
이벤트를 주기 전 css 적용
transition : 1s 1s;
두번째 시간은 이벤트 작용하기 전까지 걸리는 시간을 적어두는 것
타이밍기능에 대한 MDN 설명
transition-timing-function - CSS: Cascading Style Sheets | MDN
The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
developer.mozilla.org
타이밍 기능의 차트를 보여주는 사이트
Easing Functions Cheat Sheet
Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.
easings.net
4. Transform
사물회전 , 늘리기등 여러가지 효과를 줄 수 있다.
요소 변형들 MDN에서 많은 예제와 형식을 알 수 있다.
transform - CSS: Cascading Style Sheets | MDN
The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
developer.mozilla.org
간단한 기능 몇가지
이상으로 알면 좋은 유용한 CSS속성들1 포스팅을 마치겠습니다.