3. 그래픽

3.1 배경(background)

https://www.w3schools.com/css/css_background.asp

background-color : red
background-image : url("bg.png")
background-repeat : repeat, no-repeat, repeat-x, repeat-y
background-attachment : scroll, fixed
background-position : left top or x% y% or x y
background-size : 100px 100px or cover or contain

https://www.w3schools.com/css/css_background.asp

3.2 필터 (fillter)

filter : 기존에 포토샵 등을 통해서 이미지나 텍스트에 필터효과를 줬던 것을 코드화한 기능

3.3 변형 (transform)

transform: 엘리먼트의 크기, 위치, 모양을 변경하는 속성
여러 속성을 쓰고 싶으면 한 줄에 이어서 쓴다

• transform-origin : 중심축을 중앙이 아닌 곳으로 변경하고 transform한다

3.4 트랜지션 (transition)

https://poiemaweb.com/css3-transition

• transition-duration : 트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다
• transition-property : 트랜지션의 대상이 되는 CSS 프로퍼티를 지정한다
• transition-delay : 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정한다
• transition-timing-function : 장면 전환때 속도를 균일하지 않게
• transition : 모든 트랜지션 프로퍼티를 한번에 지정한다 (shorthand syntax)

3.5 혼합(blend)

blend : 이미지와 이미지를 혼합하는 기능

• background-blend-mode : 배경과 배경(이미지, 색깔 등)을 혼합

• rgba(a는 투명도 0~1 지정), hover등과 조합 가능

• mix-blend-mode : 컨텐트와 배경을 혼합