노마드코더 카카오톡 클론코딩 7일차

Woohyun Shin·2022년 7월 11일
0

노마드코더 HTML/CSS

목록 보기
7/7

States

1) active : 대상을 클릭하고 있는 상태
2) hover : 마우스가 대상 위에 있을 때의 상태
3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다 !
4) visited : 링크에만 적용된다. 그 링크에 방문했다면 그 안에 스타일이 적용이 된다.
5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다
즉, 위의 예시에서 form은 그 자식들인 input이 focuse가 되면 form의 모습을 바꾼다는 것이다

state들을 다른 엘리먼트와 연계해서 사용할 수도 있다
1) 부모의 state에 따라 조정

form:hover input {
background-color: slateblue;
}

즉, form이 hover일경우 input의 백그라운드 컬러가 바뀌게된다.

부모의 state에 따라 자식의 state를 조정할 수 있다.

2) 부모와 자식의 state에 따라 조정

form:hover input:focus {
background-color: teal;
}

form이 hover이면서 input이 focus된 경우에 백그라운드 컬러가 바뀌게 된다.


Transition

transition은 다른 상태로의 변화를 보여줌

  • transition: (속성) (시간) (커브종류)
  1. state가 없는 요소에 붙어야 함.
    ex) a:hover{...}에 작성되면 안됨. a{...}안에 작성해야함.
  2. transition은 변화를 보여주는 속성이기 때문에 변화시키고자 하는 요소를 꼭 반응속성 요소에 포함시켜야 함.
    a {...transition: color 5s each-in-out}을 넣어서 색변화를 잡고 싶다면 a:hover {color : black}처럼 a:hover 속성에 color 속성을 추가시켜야 함.

transition 은 상태에 따라 바뀌는 요소가 있을때 사용한다.

상태변화의 종류 : hover, active, focus, focus-within...

  • ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할
    -linear - 시작부터 끝까지 일정한 속도
    -ease-in - 시작과 끝이 빠름
    -ease-out - 시작과 끝이 느림
    -ease-in-out - 시작이 빠르고 끝이 느림
    -cubic-bezier(x, y, z, k)로 직접 설정할수도 있음 (https://matthewlein.com/tools/ceaser)

transition : all ~ : 변화 요소를 한번에 다룬다.

  • transition을 특정한 요소에 다른 속도로 주고 싶으면 ,(쉼표)를 통해 따로 따로 transition을 줄 수 있다.

ex)transition : color 1s ease-in-out, border-radius 2s ease-out;

transition은 root(기본 요소)에 들어가야 변화하고 되돌아오는 과정을 거친다.(state에 존재하면 X)


Transformation

transformation: 말 그대로 한 요소를 변형시킬 수 있음.

border-radius에 50%를 주면 원이 됨.

rotateX/Y/Z(각도deg) : 해당 요소를 3d상에서 각 축에 따라 회전
scale(숫자) : 해당 요소를 숫자배만큼 크기를 조정
translateX/Y/Z : 해당 요소를 3d상에서 각 축으로 이동

  • transformation은 한 요소를 transform(변형)시킬 수 있다.
  • border-radius에 50%를 준다면 원이 된다.
  • translate은 transformation을 적용 시키긴 하지만, 다른 형제(sibling)을 변화시키진 않는다.
    → transformation은 box element를 변형시키지 않는다.
    → margin, padding이 적용되지 않는다. 일종의 3D transformation이기 때문이다.
    → margin, padding을 위해서 translateX, translateY를 사용하지 않는다.
  • transform과 transition을 조합하면 더 역동적인 애니메이션을 만들 수 있다.
  • CSS 3D는 GPU로 돌아가므로, 3D 작업을 할 수 있다.

Animation

@keyframes 이름{} 으로 만든 후 안에 어디서부터 어디까지 애니메이션을 만들지 선택.

<style>
	@keyframes superSexyCoinFlip {
        from {
          transform: rotateX(0);
        }
        to {
          transform: rotateX(360deg);
        }
      }
</style>

from{} to{} 사용.

사용방법 : 애니메이션을 사용하고 싶은 요소 안에 animation: (애니메이션 이름) (시간) (ease-in funtion) (infinite 여부)

img {
  animation: superSexyCoinFlip 3s ease-in-out infinite;
}
  • infinite 추가시 무한으로 반복
  • from to 말고, 1,2,3,4,5...10 혹은 0% 25% 50% 75% 100% 같이 여러 단계로 나뉘어 애니매이션을 만들 수 있다.
  • 다른 property들도 애니매이션으로 만들 수 있다. 꼭 transform만 써야하는 건 아니지만, transform을 쓰는걸 권한다. 일부 property는 애니매이션이 잘 안되기 때문이다.
profile
조급함보다는 꾸준하게

0개의 댓글