CSS - 5. 그래픽

그래픽

배경(background)

background-color - 배경색 지정

background-image: url() - 배경 이미지 지정

background-repeat: repeat(default), no-repeat, repeat-x, repeat-y

background-attach: fixed(background image는 스크롤 되지 않음)

background-size - 배경 이미지 크기 지정: cover(화면 전체를 이미지로 덮음, 여백이 없음), contain(화면 크기에 이미지가 들어갈 수 있도록, 여백 생길수 있음)

background-position - 배경 위치 조정 가능.

background(축약형)

필터(filter)

image, iframe, video에 흑백, 반전, 블러 등 필터 효과 적용 가능.

변형(transform)

transform을 이용하여 scale, rotate 등 여러 변형 적용 가능.

element가 block-level element일 때 적용.

참고: css transform

전환(transition)

transition-property(장면 전환 대상)

transition-duration(장면 전환 지속 시간)

transition-delay(지연 시간을 주고 전환)

transition-timing-function: ease(default)

transition: 축약형

참고: css transition