CSS - Transition/애니메이션/flexbox/반응형 디자인

✅ Transition

css 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다.

1️⃣ transition-property, transition-duration

• transition-property
  • 전환 효과를 적용할 css 속성을 설정 합니다.
    • all : 가지고 있는 모든 속성을 변경한다.
    • none : 변경하지 않는다.
    • 특정 속성 변경(ex:margin-right, color 등 한번에 변경 가능)
• transition-duration
  • 얼만큼의 시간 간격을 두고 변경할 지 정하는 속성 입니다.
    • 단위 : ms(1000ms가 1초), s(초)
    • 사용 예시

transition-duration: 2s;
transition-property: margin-right, color;

사용 예시

만약 hover에 적용하게 된다면 마우스를 빼는 순간 transition이 끊기니 주의!

2️⃣ transition-delay, transition-timing-function

• transition-delay
  • transition이 되기 전에 지연(딜레이)을 가지게 됩니다.

사용 예시

• transition-timing-function
  • 위 사용 예시를 보면 배경 컬러가 변경 될 때, 두 가지 색이 섞이면서 변하는 걸 볼 수 있는데
    이 중간 과정 시간을 순차적으로 보일건지, 앞부분과 뒷부분을 어떻게 변경할 지 정하는 속성 입니다.
  • ease, ease-in, ease-out, ease-in-out, linear, cubic-bezier()을 사용합니다.

사용 예시

3️⃣ transition shorthand

/* 한 개 기재 */
transition: property | duration;

/* 두 개 기재 */
transition: property | duration | delay;

/* 세 개 기재 */
transition: property | duration | easing function;

/* 전부 기재 */
transition: property | duration | easing function | delay;

---

✅ 애니메이션

유저의 액션이 없어도 스타일이 자동으로 변경됩니다.

1️⃣ @keyframes

• 중간 중간 특정 지점을 거칠 수 있는 키프레임들을 설정하여 css의 애니메이션 중간 절차를 설정할 수 있습니다.

사용 예시

@keyframes name{
0% {변경할 속성}
30% {변경할 속성}
60% {변경할 속성}
100% {변경할 속성}
}

from, to로 정의할 수도 있습니다.(2개 이상 작성 시 위 예제처럼 작성)

@keyframes name{
from {변경할 속성}
to {변경할 속성}
}

keyfram을 작성하여 만든 후 적용할 클래스에 animation: name;을 작성해주시면 됩니다.

2️⃣ animation-name, animation-duration

• animation-name
  • name 부분은 어떤 키프레임을 사용할 건지를 작성하는 부분입니다.(키프레임 이름 적기)
  • 애니메이션 이름은 정해져있는 규칙에 맞게 작성합니다.
    • 대소문자 a를 구분하는 문자( ) z, 숫자 ( 0) 9, 밑줄( _) 및/또는 대시( -)의 조합으로 구성, 첫 번째 문자는 문자여야 함. 식별자 시작 부분에 두 개의 대시를 사용할 수 없음.
• animation-duration
  • 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.
  • ms, s로 값을 작성합니다.
  • 음수 값은 유효하지 않습니다.

2️⃣ animation-delay, animation-timing-function

• animation-delay
  • 애니메이션이 시작할 시점을 지정합니다.(시작 즉시, 잠시 후, 일부 진행한 시점)
  • ms,s로 값을 작성합니다.
  • 음수 값을 지정하면 애니메이션이 즉시 시작되지만 시퀀스의 1초 지점부터 시작합니다.(이미 앞부분은 시작되어 안 보이는 것 처럼 됨)
• animation-timing-function
  • transition-timing-function 과 동일한 값을 작성합니다.

3️⃣ animation-iteration-count, animation-direction

• animation-iteration-count

  • 애니메이션 시퀀스를 재생하는 휫수를 설정합니다.
  • 사용법은 animation-iteration-count: 1;

• animation-direction

  • 애니메이션이 번갈아 재생되어야하는지 여부를 지정합니다.(앞뒤, 앞으로, 뒤로)
  • normal(정방향 재생), reverse(역방향 재생), alternate(앞뒤 반복, 첫 반복은 정방향), alternate-reverse(앞뒤 반복, 첫 반복은 역방향)로 값을 사용합니다.

4️⃣ animation-play-state

• running(기본값/재생), paused(일시정지) 두가지 값을 사용 가능합니다.

5️⃣ animation-fill-mode

• 실행 전과 후에 스타일을 어떻게 적용할 것인지 지정합니다.
• none(기본값), forwards(애니메이션이 끝난 후 키프레임에 설정한 값을 유지), backwards(키프레임에 설정한 값을 유지후 시작)

6️⃣ animation shorthand

/* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

---

✅ flexbox

기존의 레이아웃보다 세련된 방식의 레이아웃입니다.(css3에서 등장함)
요소의 크기가 확장되거나, 동적으로 변할 떄에도 유연하게 사용할 수 있습니다.
1차원적 레이아웃이라 간단하게 사용이 가능합니다.(IE에서는 지원하지 않습니다.)

• 가로 혹은 세로로 요소를 정렬하기 위해 사용
• display: inline-block 을 사용해서 정렬을 하지 않아도 됩니다.

1️⃣ 용어

flexbox를 사용할 때 알아야 하는 용어

• flex container

  • flex 정렬을 할 요소를 담고 있는 컨테이너
  • 일차 자식 요소가 flex 항목이 됨

• flex item

  • flex container 내부에 담긴 정렬될 요소
  • 부모 자식간의 관계를 정확히 이해해야 헷갈리지 않고 사용이 가능함

• main axis

  • 중심이 되는 축
  • 기본값은 중심 축이 가로(왼쪽에서 오른쪽)으로 설정됩니다.

• cross axis

  • 교차되는 축
  • 중심축과 수직방향인 축을 의미합니다.
  • 기본값은 교차축이 세로(위에서 아래)로 설정됩니다.

2️⃣ container - display

• 앞뒤 요소와의 관계 또는 내부 아이템의 레이아웃을 정의하는 속성
• 디스플레이를 지정할 경우, 외부와 내부는 다른 개념으로 해석됨

3️⃣ container - flex-direction

container 내 아이템을 배치할 때 사용할 주축 및 방향을 지정합니다.

• direction을 사용하면 주출을 기본 가로에서 세로로 변경(방향 변경도 가능)
• value
  • row(기본값) : 주축이 가로 방향, 주축의 시작점과 끝점이 콘텐츠 방향과 동일
  • row-revers : row와 동일하게 동작하지만, 시작점과 끝점이 반대
  • column : 주축이 세로 방향, 시작점과 끝점이 동일
  • column-revers : column과 동일하게 작동하지만, 시작점과 끝점이 반대

4️⃣ contatiner - flex-wrap, flex-flow(shorthand)

• flex-wrap
  • 요소들이 강제로 한줄에 배치될 것인지, 여러행으로 나누어 표현할 것인지 정하는 속성
  • 배치 영역에서 벗어나지 않고 여러 행으로 나누는게 목적
  • value
    • nowrap(기본값) : 부모 요소 영역을 벗어나도 한 줄에 배치된다.
    • wrap : 여러 행에 걸쳐서 배치된다.
    • wrap-revers : wrap과 동일하지만 역방향 이다.
• flex-flow(shorthand)
  • flex-direction 과 flex-wrap 의 단축 속성
  • 띄어쓰기로 구분하여 작성 flex-flow: flex-direction flex-wrap;

5️⃣ item - order

• 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정하는 속성
• 정렬 순서는 오름차순이다.
• 같은 값일 경우 소스 코드의 순서대로 정렬됨
• 탭 순서와 상관 없이 화면에 보이는 순서에만 영향을 준다.(비시각적 매체는 사용 금지)
• 직접적인 HTML 요소의 순서를 바꾸지 않는다.

6️⃣ item - flex-grow

• item 요소가 container 요소 내부에서 할당 가능한 공간의 정도를 지정합니다.
• 음수 값은 입력하지 못합니다.(숫자값만 사용 가능)
• 형제 item 요소들이 동일한 flex-grow 값을 가지면 container 내부에서 동일한 공간을 할당 받습니다.
• 늘어난 영역을 item 요소가 나누어 갖습니다.
• flex-shrink 와 flex-basis 속성과 함께 사용합니다.

7️⃣ item - flex-shrink

• item 요소가 너무 커서 container에 담기지 않을 경우에 사용합니다.
• flex-grow와 반대 개념

8️⃣ item - flex-basis

• 아이템 요소의 초기 크기를 지정합니다.
• box-sizing을 지정하지 않는 다면 콘텐츠 박스 크기를 변경합니다.

9️⃣ item - flex(shorthand)

/* flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

---

✅ 반응형 디자인

스마트폰, PC, 태블릿 등 다양한 환경에서 사용자에게 편안한 환경을 제공하기 위해 탄생한 것이 반응형 디자인 입니다.

1️⃣ Media Query

뷰포트가 특정 조건을 만족했을 때, css를 적용시키는 문법

• @media 를 사용하여 선언합니다.

위 코드는 div의 크기가 300px 아래로 작아졌을 때 색상이 변합니다.

이런 식으로 모바일이나 태블릿등 다양한 환경에서 메뉴의 배치를 바꾼다던지, 콘텐츠의 사이즈가 변경된다던지 여러가지로 변경이 가능합니다.

2️⃣ breakpoint - 분기 처리

모바일, 태블릿, 데스크탑 기준으로 분기 처리를 가장 자주합니다.
대응하려는 디바이스가 많아질수록 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가 되는 것 입니다.
너무 많은 조건을 나누어 제작하는 것은 지양하는 편이 좋습니다.