transform, transition, animation, 미디어쿼리 (CSS3)

CSS3에 사용되는 속성들!

1. transform

: rotate(45deg) -> 평면적인 회전

: scale(2, 3)      -> 비율 조정

: skew(10deg, 20deg)   -> x축, y축 기준으로 각도만큼 비틂 (3차원적인 회전!)

:translate(100px, 200px)   -> 오브젝트의 위치를 x축, y축만큼 이동

prefix 접두사 -> 다른 버전의 부라우저에서 실행할 경우 (CSS3는 최신버전에 특화된 것이기 때문에 그 이전의 브라우저에서 사용할 경우 붙이기!) 브라우저의 하이버전으로 사용하고 싶을 경우 사용.

마지막에 작성된 transform만 적용이 됨, 뒤에 작성된 것으로 덮여씌워진 셈!

 

2. transition

갑자기 휙휙 바뀌는 것이 아니라 변화하는 과정을 보여주고자 할 때 사용

transition-property : width (변화하고자 하는 과정을 어디서 보여주고 싶은지

transition-duration: 변화하는 데 소요되는 시간

transition-timing-function : linear; (효과의 속도의 성격)

transition-delay: 1s; (클릭하고 색이 바로 바뀌는 게 아니라 1s후에 바뀌길 원할 때)

-> transition: 하나로 네 가지 한번에 작성 가능 (duration 먼저 delay 순서!)

: hover {width: 300px;} (css에서 미리 만들어 놓은 클래스에 마우스를 올렸을 때 라는 조건)

 

3. animation

예. 웹사이트에 들어가자마자 실행되는 

animation-name : changeWidth; (개발자가 임의로 작성가능)

animation-duration

animation-timing-function

animation-delay

animation-iteration-count: 6; (애니메이션 반복횟수) (infinite는 무한)

animation-direction: alternate(시작 -> 끝 -> 시작), normal(시작 -> 끝, 시작 -> 끝) , reverse (끝 -> 시작, 끝 -> 시작)

악어와 악어새처럼 따라오는 @keyframes (실제 동작되는 결과값)

@keyframes changeWidth {

  from { width: 300px; } to { width: 600px; }

}

prefix 접두사 사용 가능!

단, prefix 사용시 모든 코드에 붙여넣어야 한다!

.box1 {
        width: 300px;
        height: 300px;
        background-color: red;    
        
        -webkit-animation: rotation 1500ms linear infinite alternate;
    }
    
    @-webkit-keyframes rotation {
        from { -webkit-transform : rotate(-10deg); }
        to { -webkit-transform : rotate(10deg); }
    }

animation에 -webkit-을 달아줬으면 keyframes에도 쌍으로 달아줘야 한다!

transform도 CSS3에 등장한 신조어이기 때문에 transform에도 달아줘야 한다! keyframes에만이 아니라 각각으로도 따로 달아줘야 한다는 점!

 

**번외

margin: 0 auto; (명확한 크기를 갖고 있는 블록요소에서 사용가능한 방식) (x축으로 중앙정렬이 됨)

 

 

미디어쿼리!

미디어쿼리 안에서도 .media로 선택해서 지정하기

.media {
    width: 500px;
    height: 500px;
    background-color: red;
}
@media (min-width: 320px) and (max-width: 800px) {
    .media{
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
}

미디어쿼리 내부의 CSS가 단지 추가되는 것이지, 외부의 CSS가 없어지는 건 아니다.

미디어쿼리 외부 영역에 있는 CSS 속성을 상속받지 않고 실행하지 않으려면 속성값을 none으로 입력

(background-color: none;)

 

meta 코드는 반드시 들어가야 함! (미디어쿼리 사용시 태블릿이나 모바일에서 잘 작동될 수 있음)

모바일이나 태블릿은, 미리 설정되어 있는 viewport로 인해 미디어쿼리가 제대로 작동하지 않을 수 있기 때문!

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