CSS state / Transition

CSS State

크롬 개발자도구에서 element를 선택하고 :hov를 클릭하면 states를 확인할 수 있다.

박스:hover 박스 위에 뭔가 올라가면(hover), property들이 적용된다. 박스:active 박스를 클릭할 때 property들이 적용된다. 박스:focus 폼이나 링크를 선택하거나 활성화시키면 property들이 적용된다.

 

 

 

Transition

Transition은 아래의 효과들이 자연스럽게 동작할 수 있게 부드럽게 처리해주는 기능이다. 

 

transition-property: all;        → 어떤 효과에 대한 장면전환을 할 지 결정한다. all은 모든 그래픽 효과들이 동작하게 한다. 

transition-duration: 1s;        → 장면전환이 1초에 거쳐 일어난다.

 

아래와 같이 한줄에 코딩할 수도 있다. 

 

transition-delay: 1s;            → 시간을 지연시키는 효과가 있다. 

transition-timing-function:    장면을 전환할 때 장면전환의 속도가 균일할 수도 있지만, 경우에 따라 균일하지 않게 장면전활을 시키고 싶을때도 있을 수 있다. 장면전환을 customizing할 수 있는 기능이다. 기본값은 ease이다. 

 

transition-timing-function 좀 더 알아보기

1. transform

transform 속성은 block level 혹은 inline-block element 일 때만 동작한다.

 

<style>

.box{

background-color: red;

width: 200px;

height: 200px;

transform: rotate(20deg);

transition: transform 0.5s ease-in-out;

}

.box:hover{

transform: rotate(160deg);

}

</style>

 

transform: rotate(20deg) 는 해당 박스모델을 20도 회전시키겠다는 의미이다. 

transform에는 rotate뿐만 아니라 matrix, translate, translateX, translateY, scale, skew 등이 있다.

transform과 transition을 중복하여 다양한 효과를 표현할 수 있다. 

 

** scaleX와 scaleY 등 transform을 중복해서 사용하고 싶다면 한 줄에 같이 코딩해야한다.

 

Css3 Transform

위 사이트에 가면 여러가지 tranform 값에 따른 변화를 확인할 수 있다. 

2. ease-in-out

 

<style>

.box{

background-color: red;

color:white;

font-size: 60px;

display: block;

margin: 150px;

transition:margin-right 2s ease-in-out;

}

.box:hover{

background-color: green;

margin: 100px;

}

</style>

 

ease-in-out은 스르륵 적용되는 애니메이션이다.  이제 .box에 hover되면 5초 후에 천천히 배경색이 변한다.

배경색 뿐만 아니라 1개 이상의 설정값을 변경하고 싶다면 background-color 대신 all을 써주고, 새로 설정값을 적용시켜주면 된다.

transition은 어떤 state가 바뀔 때 적용되는 것으로, state에는 hover, active, focus, visited가 있다. 

 

 

3. animation

tranform, transition 등의 효과를 state와 무관하게 계속 발생시키고 싶다면 animation을 사용하면 된다.

@keyframes 는 CSS에게 애니메이션을 생성했음을 알려준다. @keyframes 뒤에 애니메이션의 이름을 적어주면 된다.

그리고 from과 to 사이에 초기 property와 애니메이션을 적용할 property 값을 입력하면 된다. 

만약 애니메이션을 계속 반복하고 싶다면 'infinite'를 삽입하면 된다.

 

<style>

.box{

background-color: red;

width: 200px;

height: 200px;

animation: 1.5s identifier ease-in-out;

}

@keyframes identifier {

from{

transform:none;

}

to{

transform: rotate(2turn) scale(.5, .5);

}

}

</style>

 

 

@keyframes identifier {

0%{

transform:none;

}

50%{

transform: rotate(2turn) scale(.5, .5);

}

100%{

transform: none;

}

}

 

이처럼 코드를 작성하면 0~50%  사이에는 커져서 회전하고, 50~100% 사이에는 다시 원래 모습으로 돌아갔다가 다시 변화하면서 계속 반복된다.

 

 

4. media Query

 

미디어 쿼리의 문법

 

@media not | only 미디어 타입 and (미디어 특징) {

CSS 소스코드;

}

 

 

미디어 타입

all : 모든 장치의 타입에 적용

screen : 컴퓨터, 태블릿, 스마트 폰 등에 적용

speech : 스크린 리더기에 적용

print : 프린터기에 적용

 

 

미디어 특징

min-device-width : 출력 장치 자체의 너비 하한선을 설정

min-color : 출력 장치의 색상 구성요소 당 비트의 수의 하한선을 설정

orientation : 화면이 세로 모드 인지, 가로 모드인지 설정

 

 

min-width: (number)      number이상이면 효과가 적용된다.

max-width: (number)     number이하이면 효과가 적용된다.

 

@media screen and (max-width:320px) {

body{

background-color: red;

}

}

 

위 코드에 따르면 화면의 너비는 최소 320px에서 최대 640px이다.

 

*** 미디어쿼리는 화면이 작을수록 아래에 위치해야 우선순위가 높아져 화면에 적용된다.