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 폴더주소 만들폴더명