CSS 그래픽

jsleeg98·2020년 5월 21일
0

CSS

목록 보기
6/12

background

배경을 설정하는 기능

  • background-color : tomato;
  • background-image : url(' ');
  • background-repeat : repeat; - 기본값으로 반복된다.
  • background-repeat : no-repeat; - 반복하지 않는다.
  • background-repeat : repeat-x; - x축 반복
  • background-repeat : repeat-y; - y축 반복
  • background-attachment : scroll; - 기본값 시크롤 됨
  • background-attachment : fixed; - 스크롤 안됨, 고정
  • background-size : 500px 100px; - 가로세로 크기 설정
  • background-size : cover; - 화면을 꽉 채우지만 이미지 짤림
  • background-size : contain; - 이미지를 다 사용하지만 화면은 빈다.

background-repeat : no-repeat; 일 때

  • background-position : right top; - 오른쪽 위
  • background-position : left bottom; - 왼쪽 아래
  • background-position : center center; - 가운데

background 축약형

  • background : tomato url(' ') no-repeat fixed center;

filter

  • 코드를 통해서 편집을 할 수 있다.
  • 동적인 특성을 가지게 할 수 있다.
  • text, video, iframe에 적용할 수 있다.
  • 참고 사이트 : codepen

기능

  • filter : grayscale(100%); - 흑백 설정
  • filter : blur(1px); - 흐리기 설정

blend

background-blend-mode

background와 background를 혼합시켜서 만드는 효과

mix-blend-mode

background와 content를 혼합시켜서 만드는 효과

transform

이미지 변형시키는 기능

  • transform : scaleX(2); - x축 2배로 변형
  • transform : scaleY(0.5); - y축 0.5배로 변형

한줄씩 작성하면 마지막 설정만 적용된다. 그래서 하나의 tranform에 넣어주어야 동시 적용된다.

  • tranform : scaleX(0.5) scaleY(0.5);

SVG 벡터 이미지

bitmap이미지와 차이점은 확대를 했을 때 bitmap은 깨지지만 vector는 깨지지 않는다는 것이다.

0개의 댓글