Html + CSS

[CSS] 11. Graphic (background, filter, transform)

개발자 뭄뭄 2022. 12. 25. 15:10
반응형

1. background

  • 참고자료 :
background - CSS: Cascading Style Sheets | MDN
CSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.
https://developer.mozilla.org/ko/docs/Web/CSS/background
  • default
    background-image: none
background-position : 0% 0%
background-size: auto auto -> cover : 너비에 꽉 차게, contain : 이미지 full, 여백 있음
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll -> scroll 값에 따라 image가 sticky처럼 변화한다.
background-color: transparent
    • shorthand로 작성할 수 있음 background : color, url, repeat, attachment, position

2. filter

  • 이미지에 필터를 씌우는 기능
  • blur, grayscale 등 다양한 기능이 있다.
  • cf) 종종 구글링할 때 접두사가 붙은 것을 볼 수 있는 데 작동하는 브라우저에 따라 붙이는 것이라고 한다.
    l  -webkit- : 구글, 사파리 브라우저에 적용
l  -moz- : 파이어폭스 브라우저에 적용
l  -ms- : 익스플로러에 적용, 보통 생략합니다.
l  -o- : 오페라 브라우저에 적용

3. transform

  • 회전, 비틀기, 크기조정
  • transform : scaleX → X축으로 n배 변형 ex) scaleY(0.5) 혹은 scale(0.5, 0.5)처럼 x,y축을 동시에 작성할 수도 있다.

4. transition

  • 전환, 상태변환 할 때 부드럽게 넘어가기 위해 처리
  • transtition-property : transition 효과를 줄 속성 (주로 all)
  • transiton-duration : 속성이 변화하는 데 걸리는 시간
    • shorthand로 작성가능하다 transition : transform 0.1s, fontsize 1s
    • 위와 같은 예시처럼 다양한 속성을 걸리는 시간을 따로따로 적용도 가능하다.
  • transition-delay : 효과가 바로 시작하지 않고 딜레이 시간을 거친 후 시작
  • transition timing function : ease → 선형적으로 변화하지 않아 더 자연스럽다. 주로 많이 쓰인다.

Uploaded by N2T

반응형