Css

회전 크기 기울이기 이동효과를 부여크기scale 문단의 박스 크기는 그대로 가지고 있지만 item의 크기가 바뀐다..scale 사용 시 가로 세로 사이즈가 0.5로 변경scale을 1로 사용시에는 원래 크기로 변경앞쪽의 인자가 x축 뒷쪽의 인자가 y축x축만 늘릴고 싶을

회전단위45도는 deg == 45deg로 사용turn은 바퀴의 단위 1turn이면 1바퀴를 뜻한다.양수 일때는 시계방향으로 움직인다. (90deg == 0.25turn)rotate의 인자 값의 타입은 number이기 때문에 양수 음수 소수점등이 올 수 있다.양수일때는

transform translate 이동

기울기첫번째 인자가 x각, 두번째 인자가 y각한개에 인자만 쓰면 x각만 이동skewX 프로퍼티 사용 시 x값으로 기울이고 skewY 프로퍼티는 Y값만 기울기

기준점 변경원점의 기준을 웹페이지의 가로 50% 세로의 50%가 아닌 다른 곳으로 원점의 기준을 변경 원점의 기준을 bottom,left,top,right, px,%등으로 사용 가능원점의 기준이 어디냐에 따라 완전히 다른 결과를 볼 수 있다. top left뿐만 아니라

무엇을 변경할 것인가?얼마 만큼의 시간을 가지고 css를 변경한 것인가?단위를 가지고 있으며 단위는 seconds(s) or milliseconds(ms)hover는 찰나의 순간에만 css가 바뀐것을 볼 수 있지만 transition은 시간을 조절하여 자세하게 확인 할

트랜지션을 지연css가 적용되면서 가지는 중간과정을 차례대로 보여줄 건지 빠르게 넘기던지 느리게 넘기던지 설정css hover를 사용하여 css에 변화를 주면 바로 적용이 되지만 transition-delay를 사용하면 바로 변화주지 않고 설정한 시간 후에 적용되는 것

animination animation과 transition의 차이점 transition은 유저의 액션이나 어떤 행위로 인해 변화하지만 애니메이션은 유저의 액션이 없어도 요소가 스타일 자동으로 변경

애니메이션의 반복 횟수 설정따로 설정하지 않으면 1번만 재생애니메이션을 앞으로 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부 설정normal 정방향reverse매 사이클마다 역방향으로 재생 alternate매 사이클마다 각 주기의 방향을 뒤집으며, 첫번째 반복은 정방향

running계속 재생되고 있는 상태paused애니메이션의 일시정지현재 상태는 box1의 마우스를 hover하면 애니메이션이 재생 그렇지 않다면 애니메이션이 정지된 상태애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정none기존 스타일을 가지고 있고 k

컨테이너안에 item들이 있어야 하는 즉, 부모와 자식간의 관계를 가지고 있어야 성립2차원의 평면이 아닌 1차원의 요소들을 정렬하기 위해 나온 개념felx containeritem의 부모felx item부모의 자식간의 관계에서 자식의 해당 main axis행의 축, 주

플렉스 또는 그리드 컨테이너안에서 현재 요소의 배치를 순서를 지정참고논리적인 순서나 탭 순서와는 상관 없이 화면에 보이는 순서에만 영향item들의 값은 0이기때문에 1을 넣으면 맨 오른쪽으로 이동 왼쪽으로 이동 시에는 -를 사용\-flex-item요소가, flex-co

주축을 기준으로 아이탬들을 어떻게 정렬할 것인지를 설정flex-direction:columjustify-content:flex-endflex-direction:rowjustify-content:centerjustify-cotent:space-between전체 컨테이너