[코딩온] 프론트엔드 입문 Day 21 (CSS 변환, 전환, 애니메이션, 미디어쿼리)

오늘은 CSS의 Transform, Transition 속성과 미디어쿼리에 대해서 배웠다. 오늘 배운 속성들도 예전에 배워서 일부는 알고 있었음에도 다양한 기능들을 한번에 배우다보니 헷갈리는 것들이 많아서, 블로그에 기록하면서 개념을 확실하게 정리하려고 한다.

---

CSS 속성 - Transform (변환)

요소에 확대, 축소, 회전, 이동 등 효과를 추가하는 속성이다. 여러가지 효과를 한번에 주고 싶은 경우에는 띄어쓰기로 구분하여 입력한다.

img:hover {
  transform: skew(30deg, 30deg);
  transform: skewX(30deg);
  /* 요소 기울이기 */
  
  transform: scale(0.5, 2);
  transform: scaleY(2);
  /* 요소 확대와 축소 */
  
  transform: translateX(-10px);
  transform: translate(-10px, 30px);
  transform: perspective(20px) translateZ(10px);
  transform: perspective(20px) translate3d(-10px, 30px, 10px);
  /* 요소 이동하기 */
  
  transform: rotate(30deg);
  transform: perspective(30px) rotateX(30deg);
  /* 요소 회전하기 */
}

• skew - 원하는 각도만큼 요소를 기울이는 속성. 단위는 deg.
  그냥 입력하면 X-Y축 순서로 설정할 수 있고, X축과 Y축을 따로 지정할 수도 있다.
• scale - 지정한 비율만큼 요소를 늘이거나 줄일 수 있는 속성.
  1보다 큰 값은 해당 배수만큼 확대, 0~1 사이의 값은 해당 배수만큼 축소시킨다.
• rotate - 요소를 회전시키는 속성. 단위 deg.
  그냥 입력하면 시계방향으로 회전하고, X축과 Y축을 따로 지정할 수 있다.
  rotate3d라고 입력하면 Z축까지 단축속성으로 한번에 지정할 수 있다.
• translate - 지정한 축을 기준으로 요소를 이동시키는 속성. 음수도 입력할 수 있다.
  X는 좌우로, Y는 상하로 이동한다. translate3d는 Z축까지 이동시킨다.

💡 여기서 주의할 점!
rotate에서 특정 축을 기준으로 회전시킬 때, translate에서 Z축을 지정했을 때에는 반드시 원근거리를 지정하는 속성 'perspective'도 함께 작성해야 효과가 제대로 구현된다. perspective는 단위로 지정한다.

• backface-visibility - 입체적으로 변환되어 회전한 요소의 뒷면을 보여줄지 여부를 결정한다.
  기본값은 visible이고, 숨기려면 hidden.

---

CSS 속성 - Transition (전환)

요소에 변화가 일어날 때 사용하는 (or 전/후 상태를 보여주는) 속성으로, 요소에 애니메이션 효과를 준 것처럼 자연스럽게 변화시킬 수 있다. 도형에 상→하로 움직이는 transition을 주며 실험해본 결과, 해당 속성을 부모 요소에 입력해야 아래에서 위로 돌아갈 때도 자연스럽게 움직였다.

box1:hover {
  transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease-in;
  transition-delay: 0.5s;
  
  /* 단축속성 작성 순서 중요! */
  /* property, duration, function, delay */
  transition: width 1s ease-in 0.5s;
}

 

• transition-property - 변화가 일어날 요소의 속성을 지정한다.
  예를 들어, 작은 정사각에 너비만 늘리는 효과를 주고 싶다면 속성값을 'width'라고 입력한다.
  기본값은 all (=효과가 일어날 수 있는 모든 속성에 효과가 일어난다.)
• transition-duration - 변화가 얼마나 지속될 것인지 시간 설정. 단위는 s(초)
  → 다른 속성을 전부 생략한다고 해도 지속시간은 반드시 작성해야 한다!
• transition-timing-function - 어떤 속도를 가진 효과를 사용할 것인지, 변화 시간별 속도를 지정한다.
  • ease - 천천히 시작해서 빨라졌다가 느려진다.
  • linear - 일정한 속도로 움직이는 효과라서, 실무에서 자주 사용한다.
  • ease-in - 천천히 시작해서 정상 속도가 된다.
  • ease-out - 정상 속도에서 천천히 끝난다.
  • ease-in-out - 천천히 시작해서 정상속도가 됐다가 천천히 끝난다.
• transition-delay - 효과가 몇 초 후에 시작될 것인지 지연시간. 단위 s(초).

---

CSS 속성 - Animation

요소에 애니메이션을 추가하는 속성으로, 전환(transition)보다 복잡한 효과를 만들 때 사용한다. @keyframes로 상세한 효과를 지정하고, 효과가 일어날 요소에 animation 속성을 부여해서 사용한다.

ball {
  animation-name: bounce;
  animation-duration: 3s;
  animation-delay: 0.5s;
  animation-iteration-count: 2;
  animation-timing-function: linear;
  animation-direction: alternate;
}

@keyframes bounce {
  to {top: 0px}
  from {top: 300px}
}

• @keyframes - CSS의 애니메이션 효과를 개발자가 직접 지정하는 기능.
  원하는 지점마다 속성값을 넣어서 세밀하게 조정할 수 있다. 설정값은 from~to 혹은 0~100%
• animation-name - 애니메이션의 이름. 원하는대로 지정할 수 있다.
• animation-duration - 효과를 얼마동안 보여줄지 지속시간 설정.
• animation-delay - 효과를 몇 초 이후에 보여줄지 지연시간 설정.
• animation-iteration-count - 효과를 반복하는 횟수 지정.
• animation-timing-function - 효과를 반복하는 형태.
• animation-direction - 애니메이션의 방향 설정.
  * normal - 기본값. 순환할 때마다 시작 상태로 재설정되어 다시 시작.
  * reverse - 순환할 때마다 종료 상태로 재설정되어 다시 시작.
  애니메이션 단계가 거꾸로 수행되고 timing-function도 반대로 진행된다.
  * alternate - 순환할 때마다 정방향과 반대방향이 교차하며 진행, 정방향부터 시작.
  * alternate-reverse - 순환할 때마다 정방향과 반대방향이 교차하며 진행, 반대방향부터 시작.

단축속성으로 작성할 경우에는 name, duration, iteration-count는 필수로 작성해야 한다.

---

CSS 미디어 쿼리(Media query)

화면(viewport)의 크기에 따라 컨텐츠의 크기도 조절되는 반응형 웹 페이지 만드는 방법.

반응형과 적응형의 차이는 수업 첫날에도 나왔던 내용이라 생략하고, 미디어 쿼리에 대해 설명하겠다.

우선 미디어 쿼리 작성법은 아래 코드와 같다.

@media screen and (max-width: 500px) {
  apple {
    background-color: red;
    height: 200px;
  }
}

@media screen and (orientation: landscape) {
/* 가로 모드인 경우의 미디어쿼리 설정 */ }

@media screen and (orientation: portrait) {
/* 세로 모드인 경우의 미디어쿼리 설정 */ }

1. @media 뒤에 미디어의 유형을 적어야한다. all은 전부, print는 인쇄, screen은 화면을 의미한다.
2. 괄호 안에 들어가는 크기는, 일반적으로 너비에 따른 차이가 크기 때문에 너비를 더 많이 사용한다.
그래서 위 코드의 의미는 → 화면 너비가 500px 이하일 때, apple 태그를 가진 요소의 높이와 배경이 바뀐다.
★ min/max가 헷갈릴 수 있는데, "min은 ~부터, max는 ~까지" 라고 이해하면 쉽다.
★ 크기 대신에 orientation을 입력하여 가로/세로 모드인 경우의 설정도 가능하다.

---

미디어 쿼리를 이용해서 반응형 웹 페이지를 만들기 위해서는 Breakpoint(중단점)을 아는게 중요하다.

• Breakpoint - 미디어 쿼리가 적용되는 지점을 의미한다.
  실무에서는 breakpoint를 정해놓고, breakpoint마다 레이아웃을 변경한다.
  반드시 그런건 아니지만 대체로 480px 이하는 모바일, 768~1024px은 태블릿, 1600px 이상은 컴퓨터이다.

---

미디어 쿼리까지 배웠으니, 이제 CSS가 막바지에 접어든 것 같다. CSS가 끝나면 다음은 JavaScript 일텐데, JS는 예전에 내일배움카드로 공부할 때도 HTML이나 CSS보다 어렵다고 느꼈던 언어라서, JS를 배우기 시작하면 지금보다 더 머리가 아파지겠구나 싶다.😅

왠지 모를 두려움이 느껴지지만, 힘을 내보자!