CSS 4 (투명도, 위치 고정, 전환, 변형, 그림자)

alpha channel vs. Opacity

value : 0(transparent)~1(opaque)

rgba

• 해당 요소의 배경 영역에만 적용 (텍스트 제외)

opacity

• 자손 요소까지 전체 영역에 적용

---

position

static

• 위치 고정

relative

• 문서의 흐름 안에서 현 위치 대비 상대적 위치 적용

absolute

• 문서의 흐름에서 제외
• 가까이 위치한 조상 or body tag를 기준으로 상대적 위치 적용

fixed

• 문서의 흐름에서 제외
• 초기 블록의 상대적 위치 적용
• 스크롤 변화해도 고정

---

Transition

상태 전환 방법 설정

transition : property_name | duration | timing_function | delay

property name 전환 요소 지정 (여러 요소 중 선택 요소만 전환 가능)

duration 전환 지속 시간

timing function 전환 효과

• linear 동일 속도로
• ease-in 느렸다 빨랐다
• ease-out 빨랐다 느렸다
• steps(n, end) 단계 별로 끊어서

delay 전환 대기 시간

---

Transform

요소 변형 : 모든 요소 적용 가능

rotate() 회전(deg)

• transform-origin 축 위치 설정

scale() 크기 변화 (배수)

• scaleX() 가로 적용
• scaleY() 세로 적용

translate() 위치 이동 (px,%)

• translateX()
• translateY()

skew() 기울기(deg)

• skewX()
• skewY()

---

box-shadow

요소 테두리 밖 그림자 설정

box-shadow : offset-x | offset-y | blur-radius | spread-radius | color ;

offset-x 요소 대비 가로 거리

offset-y 요소 대비 세로 거리

blur-radius 흐림 정도

spread-radius 번짐 정도

color 그림자 색