01

1. Transform

<style>
    .transition {
        transfrom: rotate(45deg); /* 회전 */
        transform: scale(2,3); /* 확대 축소 */
    }
</style>

rotate(angle): 입력한 각도만큼 회전, 음수입력가능
scale(x, y): width가로 x배, height세로 y배만큼 변경

<style>
    .transition {
        transform: skew(10deg, 20deg); /* 각도 변경 */
        transform: translate(100px; 200px); /* 위치 변경 */
    }
</style>

skew(x, y): x축, y축을 기준으로 입력한 각도만큼 비튼다.
translate(x, y): 선택한 오브젝트의 좌표를 x,y 변경

<style>
    .transition {
        -webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
        -mox-transform: translate(100px, 200px); /* 파이어폭스 */
        -ms-transform: translate(100px, 200px ; /* 익스플로러 9.0 */
        -o-transform: translate(100px, 200px); /* 오페라 */
    }
</style>

transform은 최신CSS 버전에서만 가능하지만, prefix를 추가하면 하위버전의 브라우저에서도 실행 가능 ex) IE

2. Transition

<style>
    .transition {
        transition-property: width;
        transition-duration: 2s;
    }
</style>

property: 속성값
duration: 효과가 나타나는데 걸리는 시간

<style>
    .transition {
        transition-timing-function: linear;
        transition-delay: 1s;
    }
</style>

timing-function: 효과의 변화 속도, linear:일정하게
delay: 특정 조건 하에서 발동, 1s: 1초후

<style>
    .transition:hover { width: 300px; }
</style>

:hover: css에서 미리 만들어놓은 클래스이다.
마우스를 올렸을때 나타나는 효과
태그, id, class는 실제로 html에 존재

<style>
    .transition {
        transition: width 2s linear 1s;
    }
    .transition:hover { width: 300px; }
</style>

종합예시.
보통 shorthand방식으로 많이 쓴다고 한다.
앞에나오는 숫자가 무조건 duration, 뒤에나오는게 delay
앞에께 조건, 뒤에께 실제 애니메이션 결과값

3. Animation

/* 조건 */
.animation {
    animation-name: changeWidth; /* 애니매이션 이름 */
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
}
/* 실제 결과값 */
@keyframes changeWidth {
    from { width: 300px; }
    to {width: 600px; ]
}

name은 임의로 설정하면 된다.
duration, timing-funciton, delay는 transition에서와 같다.
iteration-count: 반복횟수
direction: 애니메이션 진행방향
1) alternate: from -> to -> from
2) normal: from -> to, from -> to
3) reverse: to -> from, from -> to

4. 애니메이션 응용

.box1 {
    animation: rotation 1500ms linear infinite alternate;
}

@keyframes rotation {
    from { transform: rotate(-10deg); }
    to { transform: rotate(10deg); }
}

먼저나오는숫자가 duration, 나중에 나오는 숫자가 delay

.box1 {
    -webkit-animation: rotation 3s linear 1s 6 alternate;
}

@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(-10deg); }
    to {-webkit-transform: rotate(10deg); }

prefix 같은거끼리 연동됨

02

1. 미디어쿼리

.media {
    width: 500px;
    height: 500px;
    background-color: red;
}

/* 미디어쿼리 */
@media (min-width: 320px) and (max-width: 800px) {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

min-width, max-width: 브라우저 가로폭 최소, 최대

2. 미디어쿼리 사용시 주의사항

<meta name-"viewport" content="width=device-width, initial-scale=1.0">

head 안에 viewport 넣어야함
viewport: 디지털기기의 화면상에 표시되는 영역, 너비와 배율을 설정해야함
width=device-width: viewport의 가로 = 디바이스의 가로
initial-scale=1.0: 비율은 항상 1.0

미디어쿼리 외부 영역에 있는 CSS 속성 상속받음, 상속안받으려면 none

pc버전에서 제목 width50%, nav바 width 50%라면 모바일버전에서는 각각 100%로 조정한다.

여러 선택자를 한번에 사용할때

    #footer .copyright p,
    #footer .address p {
        width: 100%;
    }