[CSS 06] 벤더 프리픽스(vender prefix), 애니메이션

상대 크기 em / rem
    em 단위는 상위 요소 크기의 몇배인지를 나타내는 크기(1.5em : 상위요소의 1.5배)
    rem 단위는 문서의 최상위 요소, 즉 html 요소 크기의 몇 배인지를
    나타내는 크기(1.5rem : html요소의 1.5배)

CSS 2D
    transform
        이차원 좌표에서 요소를 변형시키는 속성
        이동, 확대/축소, 회전, 경사 등을 만들 수 있음
        translate, scale, rotate, skew

벤더 프리픽스(vender prefix)
    주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때
    이전 버전의 웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사를 의미
    아직 CSS 권고안에 포함되지 않은 기능이나, 포함되어 있지만
    아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 앞에 붙여준다. 벤더 프리픽스를 사용하는 방법은 해당 속성          이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며,
    표준 문법 코드는 가장 마지막에 작성해야 한다.

linear-gradient
    background : linear-gradient(방향,색상1,색상2)
    방향은 생략이 가능하며 생략시에는 벤더 프리픽스도 생략 가능(표준화 코드 적용 가능)
    방향에 가로방향(left,right)을 작성시에는 벤더 프리픽스를 꼭 작성해 주어야 함

transition
    요소에 추가할 css 스타일의 전환효과를 설정
    추가할 전환효과나 지속될 시간도 설정

    transition:property timing-function duration delay

    property : 요소에 추가할 전환효과의 적용 속성을 설정
    timing-function : 전환효과의 변화되는 속도값을 설정
        linear  : 일정한 속도로 변환
        ease    : 전환효과가 변하면서 변환(천천히 - 빠르게 - 천천히)
        (ease-in ease-out ease-in-out)
        duration : 전환효과의 걸리는 시간 설정
        delay : 전환효과의 대기시간 설정

CSS 애니메이션
    요소의 현재 스타일을 다른 스타일로 변화
    적용할 스타일은 이전 프레임에 적용하는 것이 아니라 초기 스타일에 적용
    (ex : transform)
    @keyframes 애니메이션명{
        from 혹은 0%{
            처음에 적용할 스타일
        }
        정수%{
            중간 지점마다 적용할 스타일            
        }
        ...
        to 혹은 100%{
            마지막에 적용할 스타일
        }
    }

perspective()
    3D 환경을 만들기 위해 사용자의 관찰자 시점(투영점)을 구체화해서
    입체감을 부여하는 속성, 스크린에서 해당 px만큼 떨어진 곳에 관찰자가
    있다는 것을 근거로 구성