CSS (3) - Position, Transform, Transition

Position

 

포지션은 말그대로 문서에서 위치를 어떻게 적용할것인가에 대한 부분이다.

 

Static

#box{

    background-color: red;
    
    top: 100px;
    left: 100px;
    
}

 

static은 position을 정하지 않았을때 디폴트 값이다. 

위와 왼쪽에 100px을 줬음에도 움직이지 않는다.

이름처럼 고정되어 있다.

 

Relative

 

position 값을 Relative로 지정해주면 본인이 있던 기존 위치를 기준으로 움직인다.

원래 있던 자리에서 위아래 100px씩 움직인 결과물이다.

 

Absolute

 

딱 처음 들었을 때 가장 이해가 안가던것이 앱솔루트였다.

앱솔루트는 원래 본인이 차지하던 블록이나 인라인에서 없는 취급을 받는다.

 

그리고 html상 본인의 부모를 기준으로 위치가 정해지는데,

만약 본인의 부모가 없거나 static 형식이라면 최상위 body태그의 위치를 기준으로 잡는다.

 

Fixed

 

Fixed는 고정이다.

스크롤을 쭉내려도 보이는 웹사이트 컨테이너를 기준으로 고정되어 있다.

 

Sticky

 

 

Sticky는 본인의 위치에 위치되어 있다가,

스크롤을 쭉내려서 본인의 위치보다 뷰가 내려가게 되면 Fixed처럼 바뀌어 계속 따라온다.

 

---

Transform

 

 

트랜스폼은 해당 요소의 크기를 키우거나 돌리거나 이동시킬 수 있다.

 

    transform: scaleY(10);

 

이런식으로 크기를 키우거나,

 

 

    transform: rotate(45deg);

 

이런식으로 돌릴 수 있다.

 

---

Transition

트랜지션은 전환을 시킬 수 있다.

웹페이지를 애니메이션으로 조금 다채롭게 효과를 만들 수 있다.

 

#box{

    background-color: red;
    transition: transform 2s;
}

#box:hover{
    
    transform: rotate(45deg);
}

 

box에 마우스를 올렸을때, transform 효과에 2초간 트랜지션을 주어서 2초동안 45도를 돌리도록 만들 수 있다.

 

#box{

    background-color: red;
    transition: all 2000ms;
}

 

특정 속성만 바꾸는게 귀찮다면 all로 해주어도 되고,

걸리는 시간도 초 대신에 밀리초를 이용해도 된다.