[css] 레이아웃, 인터렉션 한줄 정리

jini.choi·2024년 2월 13일
0

CSS

목록 보기
5/5

position

  • static: default, 유일하게 top, right , bottom, left, z-index 속성에 영향을 받지 않음
  • relative: 문서의 흐름에 따라 엘리먼트 배치
  • absolute: 부모에 대해 상대적으로 배치
  • fixed: 특정 위치에 고정
  • sticky: 스크롤이 특정 위치에 왔을때 요소 고정

flex

  • flex-direction: 메인축 방향 설정
  • justify-content: 메인축 방향 정렬
  • align-items: 수직축 방향 정령
  • flex-wrap: 줄넘김 여부
  • flex-flow: flex-direction, flex-wrap 같이 쓸 수 있는 속성

오뎅꼬치: https://studiomeal.com/archives/197


전환(Transitions) & 변환(Transforms)

transform

  • rotate: 회전
  • transrate: 중심축 잡기
  • scale: 크기 확대 및 축소

transition

  • 애니메이션 부드럽게 움직이게 할때 사용
    ex) transition: all 1s ease;

전환(Transitions) & 변환(Transforms)정리: https://velog.io/@jjinichoi/속성-전환Transitions-변환Transforms


animations

  • @keyframes 으로 설정된 애니메니션의 개별 속성들을 제어할 때 사용

animation정리: https://velog.io/@jjinichoi/속성-animations

profile
개발짜🏃‍♀️

0개의 댓글