(2023/06/09) 공부 일지!

seumomo_TAEILKIM·2023년 6월 9일
0

공부일지

목록 보기
35/87

HTML

요소

스크립팅

  • defer
    => 스크립트를 바디의 해석이 끝난 이후에 실행되도록 한다

CSS

BOX

overflow

  • hidden
    => 탭했을 때 선택되는 박스 영역이 보이지 않을 수 있다

그레디언트

그라데이션 색깔 조합으로 배경 만들기

  • 멀티로 배경을 지정할 때는 뒤에 배치할 배경의 코드를 밑에 위치한다

애니메이션

자바스크립트를 이용한 애니메이션에 비해 성능이 좋다

  • @keyframes
    => 애니메이션이 적용될 특정 시점(백분율)과 애니메이션 정보를 지정
  • animation-name(필수 속성)
    => @keyframes에서 지정한 이름 할당
  • animation-duration(필수 속성)
    => 지속 시간
  • animation-fill-mode
    => 실행 이전이나 이후에 효과를 표시할지 여부 지정
  • animation-delay
    => 실행을 지연시킨다
  • animation-play-state
    => 애니메이션을 켜고 끌 수 있게 한다(paused | running)
  • 이동효과를 줄 때 상대적으로 transform이 리플로우를 덜 발생시킨다

positioning

  • z-index
    => 겹친 요소 중 위로 올라오게 할 때 설정

트랜지션

지정한 속성이 점진적으로 전이되는 과정을 구현

  • transition-property(필수 속성)
    => 지정된 속성 값이 전이된다
  • transition-duration(필수 속성)

선택자

  • .선택자.선택자
    => 두 클래스가 모두 지정된 요소 선택

트랜스폼

  • transform-origin
    => 회전이 될 지점 지정

flex

  • flex-direction
    => row | row-reverse | column | column-reverse
  • justify-content
    => 주축 정렬
    => flex-start | center | flex-end
    => space-between | space-around | space-evenly
  • align-content(items)
    => 교차축 정렬
  • align-items
    => 기본값은 stretch이며, item들을 개별적으로 배치한다
    => flex-start | center | flex-end | baseline | stretch
  • flex-grow
    => 기본값은 0이며, 1을 줄 경우 부모의 박스의 너비를 자식들이 동일하게 나눠 갖는다
  • flex-shrink
    => 기본값은 1이며, 0을 줄 경우 부모 크기와 상관없이 고유의 너비를 가질 수 있다
  • flex-basis
    => 너비의 초기값을 지정한다.
    => 다른 flex 속성에 따라 너비가 영향을 받는다.
  • 단축 표기법
    => flex: grow shrink basis;
    => flex-flow: direction wrap;

GIT

.git을 제외하고 원하는 폴더만 복사할 때

=> degit 폴더주소 만들폴더명

profile
어제의 나보다 1% 발전하기💪

0개의 댓글