CSS tips 2

1. transition

state 변화를 설정했을 때, animation 효과와 함께 변화하도록 하는 기능

a {

    color : red;

    transition: color 2s ease-in-out, border-radius 5s 5px;

}

a:hover{

    color : green;

    border-radius : 20px;

}

 

transition은 초기 root 선언에 적혀야 됨. a:hover 하위 (state)에 적히면 hover에 해당하지 않는 순간 바로 transition 취소됨.

 

ease-in-out은 변화 양상을 표현하는 속성. matthewlein.com/tools/ceaser

위 링크에 가면 시각적으로 비교해볼 수 있음.

 

2. transformation

img {

    transform : rotateY(30deg), scale(2, 2);

}

대상을 회전시키거나(3D 를 가정하기 때문에 축이 3개임), scale하거나, translate 가능함.

translate의 경우, 움직인다고 해도 다른 box element에 변형을 만들지 않음. 

 

3. animation

transition을 이용하는 것 외에 항상 animation이 동작하도록 설정하는 기능.

 

@keyframes ANIMATION_NAME {

    from{

        transform: rotateX(0);

    }

    to{

        transform: rotateX(360deg);

     }

img {

    animation: ANIMATION_NAME 5s ease-in-out infinite;

}

 

@keyframes ANIMATION_NAME {

    0%{

        transform: rotateX(0);

    }

    50%{

        transform: rotateX(360deg) translateY(100px);

    }

    100%{

        transform: rotateX(360deg) translateY(0px);

    }

}

 

4. media query

반응형으로 css style을 다르게 적용할 수 있음.

div {

   background-color : red;

}

@media screen and (min-width: 700px) and (max-width: 1500px) and (orientation: landscape){

    div {

    background-color : green;

    }

}

 

5. 크롬 에서 우클릭 후, inspect-device toolbar 에 가면 다양한 스크린 크기에서 시뮬레이션해볼 수  있음.

 

6. :not() 을 이용하면 특정 객체가 기존의 특성을 갖지 않고 따로 또 다른 특성을 갖게 할 수 있음. 일종의 예외처리 느낌

.main_header__form input:not([type="submit"]) {
border-bottom : 1px solid rgba(0, 0, 0, 0.3);
transition: border-color 0.3s ease-in-out
}

 

7. :first-child :last-child 기능을 사용할 때, 앞에 class name과 띄어쓰기 없이 붙여써야 함.

.user__column:first-child{    
    display: flex;
    background-color: tomato;
}

 

8. z-index로 서로 겹침 관계에서 우선순위를 지정할 수 있음. z-index가 클수록 더 상위에 있는 것.