📅 2025-09-09

➡️ CSS Transition, Transform, Flex에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리 + 🤔❓

---

🔎 학습 리마인드

---

📌 Transition 속성

• CSS의 속성을 변경할 때 적용시킬 애니메이션 속도 조절

linear	처음부터 끝까지 일정한 속도	로봇 같은 균일한 움직임
ease	천천히 시작 → 빠르게 → 천천히 끝	자연스러운 기본값 (많이 사용됨)
ease-in	처음은 천천히, 끝은 빠르게	스르륵 나타남
ease-out	처음은 빠르게, 끝은 천천히	미끄러지듯 멈춤
ease-in-out	천천히 시작하고, 중간에 빠르게, 다시 천천히 끝	부드러운 시작과 마무리

• ❗ display, visibility 같은 속성은 transition 안됨

---

📌 Transform 속성

• 요소(element)를 변형시켜주는 CSS 속성
  • 회전, 이동, 크기 조절, 기울이기 등

2D 변형 속성들

1. translate : 요소를 이동시킴 (현재 위치 기준)

   /*
   	transform : translate(x, y)
   */
   transform: translate(50px, 20px); /* 오른쪽 50px, 아래 20px 이동 */
   transform: translateX(100px);    /* X축만 이동 */
   transform: translateY(-30px);    /* Y축만 이동 */

2. scale : 요소의 크기를 배율로 조절 (기본값 1)

   /*
   	transform : scale( x, y ) 
   */
   transform: scale(1.2);       /* 가로, 세로 모두 1.2배 */
   transform: scaleX(1.5);      /* 가로만 1.5배 */
   transform: scaleY(0.7);      /* 세로만 0.7배 */

3. rotate : 요소를 회전

   • angle : 회전시킬 각도
     • deg : 도 단위 (360deg == 1바퀴)
     • grad : 그라디언트 (400grad == 1바퀴)
     • rad : 라디안
     • turn : 턴

   /*
   	transform : rotate(angle)
   */
   
   transform: rotate(45deg);     /* 시계방향 45도 회전 */
   transform: rotate(-90deg);    /* 반시계 방향 90도 회전 */

4. skew

   • 요소를 기울임

---

📌 Flex 고급 속성

요소가 넘칠 때: flex-wrap

• nowrap : flex-item을 한 줄에 배치 (기본값)
• wrap : flex-item이 flex-container 크기를 넘어서게 되면, item을 다음 줄로 넘김
• wrap-reverse : wrap을 반대로 배치

요소 늘려서 채우기: flex-grow

• flex item에게 적용되는 속성

• flex-container의 공간이 남을 때, 누가 얼마나 크기를 늘릴지 결정하는 요소

• flex-grow: 0 : 늘려서 채우지 않음 (기본값)
  

• flex-grow: 1 : 늘려서 여백만큼을 전부 채움
  

• flex-grow: 1을 두 요소에 적용하면, 남은 공간을 1 : 1 비율로 나눠서 채움
  

• flex-grow를 두 요소에 다른 수치로 적용하면, 해당 수치만큼 비율을 계산하여 나눠서 채움
  

요소 줄여서 채우기: flex-shrink

• flex-container의 공간이 적을 때, 누가 얼마나 줄어들지를 결정하는 요소
  
• flex-shrink: 1 : 요소를 줄여서 배치 (기본값)
• flex-shrink: 0 : 크기를 줄이지 않음
• flex-shrink 값이 클수록 상대적으로 더 많이 줄어듬

flex-item의 크기 조절 : flex-basis

• flex-item의 기본 크기 결정
• flex 컨테이너의 방향(main axis)에 따라 적용
  • flex-direction: row → flex-basis는 가로 너비
  • flex-direction: column → flex-basis는 세로 높이
• flex-basis: auto : 콘텐츠 크기나 width/height 값에 따라 결정 (기본값)
• flex-basis: 0 : 콘텐츠 크기 무시, 남은 공간을 전부 flex-grow 비율대로 분배

---

🐸 flex 연습 : Flexbox Froggy

---

🌊 Deep Dive

🤔 cubic-bezier란 뭘까?

• cubic-bezier(x1, y1, x2, y2) : 속도 곡선을 직접 지정할 수 있는 함수 (베지어 곡선)
• transition-timing-function : CSS transition/animation의 속도 변화를 정의하는 속성

  /* 기본 제공되는 타이밍 함수들 */
  transition-timing-function: linear;        /* cubic-bezier(0,0,1,1) */
  transition-timing-function: ease;          /* cubic-bezier(0.25,0.1,0.25,1) */
  transition-timing-function: ease-in;       /* cubic-bezier(0.42,0,1,1) */
  transition-timing-function: ease-out;      /* cubic-bezier(0,0,0.58,1) */
  transition-timing-function: ease-in-out;   /* cubic-bezier(0.42,0,0.58,1) */

  ➡️ 기본 제공값도 cubic-bezier로 표현됨
  

---

📎 https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/cubic-bezier

📎 https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function