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는 깨지지 않는다는 것이다.

• SVG 이미지 참고 사이트 : thenounproject