Chap 6. 그래픽(Graphic)

* 배경

특정 배경을 컬러나 사진 지정

그 외에도 반복이나 높이, 사이즈 등 다양한 요소들을 결정할 수 있다

.container{
background-color: "컬러";
background-image: url('인터넷 url/ directory');
background-repeat : no-repeat; 
/* (repeat-x / reapeat -y) 어느 축 반복할 건지 결정 */ 

background-attachment : fixed; /*스크롤 내려도 이미지 고정 */
background-size : 폭 높이;
background-size: cover/contain; /* conatin은 다들어가게, cover는 이미지가 화면에 차게 */
background-position: right top; /* 위치 이동 가능 */
/* background: 축약형으로도 사용 가능! */ 
}

* 필터(filter)

이미지나 배경 등에 여러 가지 효과를 줄 수 있음

css filter playground 검색!

여러개의 필터를 조합할 수도 있음

폰트, iframe에도 필터 적용 가능(폰트는 px 단위로 적용)

비교적 최신 기술이라 webkit과 o를 써서 가져와야 함!

img{
    -webkit-filter: grayscale(50%);
    -o-filter: grayscale(50%);
    filter: grayscale(50%);
}

h1{
    -webkit-filter: blur(3px);
    -o-filter: blur(3px);
    filter:blur(3px):
}

* 변형(Transform)

(참조 : https://codepen.io/vineethtr/pen/XKKEgM)

Element 회전, 비틀기 등의 기능을 사용할 수 있음!

(Transform은 Element가 block이거나 inline-block일 때만 사용가능)

.container{
    transform:scaleX(1); /* X축의 크기를 변형하겠다 */
    transform:rotate(45deg); /* 45도로 돌리겠다 */ 
}

등 다양한 Transform 활용이 가능함!

* 전환(Transition) 

간단히 표현하면 애니메이션처럼 어떤 변화가 이루어질 때 자연스럽게 이루어지도록 여러 가지 옵션을 처리할 수 있음!

a{
    transition-property: all;
    transition-duration: 1s; /* 1초 동안 장면전환 일어남 */
    transition-delay: 1s; /* 1초 후에 장면전환!!! */ 
    transition-timing-function: /* 시간함수로 다양하게 갑자기 빨라지든지 등의 형태 구현가능 */
}

a:active{
    transform:translate(20px, 20px);
}