css 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.
transition-property
transition-duration
transition-duration: 2s;
transition-property: margin-right, color;
사용 예시
만약
hover
에 적용하게 된다면 마우스를 빼는 순간 transition이 끊기니 주의!
transition-delay
사용 예시
transition-timing-function
사용 예시
/* 한 개 기재 */
transition: property | duration;
/* 두 개 기재 */
transition: property | duration | delay;
/* 세 개 기재 */
transition: property | duration | easing function;
/* 전부 기재 */
transition: property | duration | easing function | delay;
유저의 액션이 없어도 스타일이 자동으로 변경됩니다.
사용 예시
@keyframes name{
0% {변경할 속성}
30% {변경할 속성}
60% {변경할 속성}
100% {변경할 속성}
}
from, to로 정의할 수도 있습니다.(2개 이상 작성 시 위 예제처럼 작성)
@keyframes name{
from {변경할 속성}
to {변경할 속성}
}
keyfram을 작성하여 만든 후 적용할 클래스에
animation: name;
을 작성해주시면 됩니다.
animation-name
animation-duration
animation-delay
animation-timing-function
transition-timing-function
과 동일한 값을 작성합니다.animation-iteration-count
animation-iteration-count: 1;
animation-direction
/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
기존의 레이아웃보다 세련된 방식의 레이아웃입니다.(css3에서 등장함)
요소의 크기가 확장되거나, 동적으로 변할 떄에도 유연하게 사용할 수 있습니다.
1차원적 레이아웃이라 간단하게 사용이 가능합니다.(IE에서는 지원하지 않습니다.)
display: inline-block
을 사용해서 정렬을 하지 않아도 됩니다.flexbox를 사용할 때 알아야 하는 용어
flex container
flex item
main axis
cross axis
container 내 아이템을 배치할 때 사용할 주축 및 방향을 지정합니다.
direction
을 사용하면 주출을 기본 가로에서 세로로 변경(방향 변경도 가능)flex-wrap
flex-flow(shorthand)
flex-direction
과 flex-wrap
의 단축 속성flex-flow: flex-direction flex-wrap;
flex-shrink
와 flex-basis
속성과 함께 사용합니다.flex-grow
와 반대 개념/* flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
스마트폰, PC, 태블릿 등 다양한 환경에서 사용자에게 편안한 환경을 제공하기 위해 탄생한 것이 반응형 디자인 입니다.
뷰포트가 특정 조건을 만족했을 때, css를 적용시키는 문법
@media
를 사용하여 선언합니다.위 코드는 div의 크기가 300px 아래로 작아졌을 때 색상이 변합니다.
이런 식으로 모바일이나 태블릿등 다양한 환경에서 메뉴의 배치를 바꾼다던지, 콘텐츠의 사이즈가 변경된다던지 여러가지로 변경이 가능합니다.
모바일, 태블릿, 데스크탑 기준으로 분기 처리를 가장 자주합니다.
대응하려는 디바이스가 많아질수록 breakpoint가 늘어나게 됩니다.
아래 예제를 보고 더욱 빠르게 이해해보세요.
/* 모바일*/
@media screen and (min-width: 480px) {
body {
background-color: lightpink;
}
}
/* 태블릿 */
@media screen and (min-width: 768px) {
body {
background-color: orangered;
}
}
/* 데스크탑 */
@media screen and (min-width: 1024px) {
body {
background-color: slateblue;
}
}
위 예제를 보면 모바일, 태블릿, 테스크탑 3개 각각 너비의 조건을 넣어 작성하였습니다.
위 3가지의 조건 하나 하나가 breakpoint가 되는 것 입니다.
너무 많은 조건을 나누어 제작하는 것은 지양하는 편이 좋습니다.