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

in_coding·2023년 7월 25일
0

HTML/CSS

목록 보기
7/9

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 그림자 색

profile
내가 이해하려고 정리 중

0개의 댓글