position

1. static position

2. relative position

• 원래 있어야할 위치를 기준으로 좌표를 지정할 수 있음.
• 이대 원래 있어야할 요소 위치는 그대로 존재함

3. absolute position

• 가장 가까운 위치에 있는 position 속성이 relative인 부모 요소를 기준으로 ⬅➡⬆⬇ 값으로 요소를 위치
• position 속성이 relative인 부모 요소가 없으면 body 요소를 기준으로 위치
• 문서 일반적인 흐름에 포함 X -> 페이지 레이아웃 공간도 배정 X
  • 다른 요소가 먼저 위치를 점유해도 덮어 씌울 수 있다.

4. fixed position

overflow

property 값	설명
visible	부모 영역을 벗어난 부분을 표시
hidden	부모 영역을 벗어난 부분을 잘라냄
scroll	부모 영역을 벗어난 부분이 없어도 스크롤 표시
auto	부모 영역을 벗어난 부분이 있을 때맘 표시

transition

• 값 변경시 값 변화가 일정시간에 걸쳐 일어나도록 해주는 기능

  property 값	설명
  transition-property	트랜지션 대상이 되는 CSS property 지정
  transition-duration	트랜지션이 일어나는 일정 시간을 s 또는 ms로 지정
  transition-timing-function	특별한 함수를 통해 시간별 트갠지션 속도 지정
  transition-delay	언제 트랜지션을 시작할지 s 또는 ms로 지정
  transition	모든 트랜지션 값을 한번에 지정하는 단축 property

div{
	transition-property : opacity, width, height, background-color;
    transition-duration : 3s, 2s, 2s, 2s;
}

timing-function

• cubic-bezier() 함수를 이해할 필요가 있음
• p0, p1, p2, p3과 같이 네개의 값을 기반으로 표현되는 곡선, 각 값은 0~1 사이의 값
• ease : 느리게 빠르게 느리게
  linear : 동일한 속도
  ease-in : 느리게 동일한 속도
  ease-out : 느리게 급빠르게 느리게
  ease-in-out : 느리게 조금빠르게 느리게
  step-start : 시작하자마자 끝
  step-end : 일정 시간 후 바로 끝
  steps(n, start|end) : n단계로 나누어 변화
  cubic-bezier(n, n, n, n) : 베지어 곡선, n은 0~1값 참조사이트

단축 property

transition : property duration function delay
transition : margin 2s ease-in 1s;

animation

• transition은 최종 스타일만 지정하지만 animation은 중간에 변경되는 스타일을 세밀하게 지정할 수 있다.
• CSS 스타일과 중간상태를 나타내는 키프레임(@keyframes)으로 이루어져 있다.
• JS animation보다 성능이 뛰어난데 브라우저에서 안보이는 요소를 알 수 있어서, 애니메이션 엡데이트 주기를 최적화하기 때문에 이를 알기 어려운 JS보다 성능이 좋다.
• 가벼운 효과는 CSS 애니메이션
  세밀한 제어는 JS 애니메이션

  property 값	설명	기본값
  animation-name	@keyframes 애니메이션 이름 지정
  animation-duration	한 싸이클의 애니메이션에 소요되는 시간을 s또는 ms로 지정	0S
  animation-timing-function	transition과 같이 애니메이션 속도 설정을 위한 함수 지정	ease
  animation-delay	애니메이션 시작 전, 대기시간을 s또는 ms초로 지정	0S
  animation-iteration-count	애니메이션 재생 횟수 지정	1
  animation-direction	애니메이션 종료 후 반복될 때 진행방향 지정	normal
  animation-fill-mode	애니메이션 종료 또는 대기 시의 요소 스타일 지정
  animation-play-state	애니메이션 재생 상태 지정	running
  animation	애니메이션 단축 property

keyframes 문법

• from 또는 0%에 설정한 스타일에서 출발해서, to또는 100%까지, 도 그 중간 시점을 %로 표기하여, 각 시점에 설정한 스타일로 변경되는 스타일을 설정할 수 있다.

@keyframes ball{
	0% {
    	top : 0;
    }
    50% {
    	top : 100px;
    }
    100% {
    	top : 300px
    }
}

• 애니메이션 요소 설정
  • animation-name에 정의한 @keyframes이름 넣기
  • animation-duration에 한 싸이틀의 애니메이션에 소요되는 시간을 s 또는 ms로 지정
  • animation-interation-count에 애니메이션 반복횟수 넣기

.클래스 이름{
	position : absolute;
    width : 100px;
    height: 100px;
    border : 2px soild #F4B441;
    background: #F2D541;
    border-radius:10px;
    animation-name : ball;
    animation-duration: 5s;
    animation-interation-count : infinite;
}

animation-fill-mode

• none : 처음 스타일 -> 0% -> 100% -> 처음 스타일
  forwards : 처음 스타일 -> 0% -> 100% -> 100%
  backwards : 0% -> 0% -> 100% -> 처음 스타일
  both : 0% -> 0% -> 100% -> 100%

animation-plat-state

• paused : 중지상태
  running : 실행상태

animation 단축 property

animation : name duration timing-function dalay iteration-count direction fill-mode
            play-state
            
animation : ball 2s ease-in 4s infinite reverse both paused;

transform

• 요소의 회전, 크기조절, 기울이기, 이동효과를 부여하는 함수를 제공

  transform 함수	설명	transform 함수 인자 값
  translate(x,y)	요소 ㅊ위치를 가로로 x, 세로로 y만큼 만큼 이동	CSS 기본 단위(px, %, em등)
  scale()	요소 크기를 가로로 x배, 세로로 y배 확대 또는 축소	0 또는 양수(1보다 크면 확대 0~1은 축소)
  skew(x-angle, y-angle)	요소를 가로로 x도, 세로로 y도 만금 기울임	+-각도(deg)
  roate(andgle)	요소를 주어진 각도만큼 회전	+-각도(deg)

transform-origin property

참고 문서

float

• 수평정렬과 이미지와 함께 텍스트를 배치하기위해 고려됨.
• float 값을 준 요소는 기본적으로 display 설정을 block으로 바꿔버림 (flex라고 명시되어있는 경우 제외) 이때 width값은 content만큼의 크기를 부여하여 마치 inline-block 특성처럼 보임.
• float는 복잡하고 특별한 룰셋을 갖고 있어서 기본 동작과 달라보이는 다양한 케이스가 나타날 수 있다.
• 그래서 최근에는 flexbox, grid를 많이 사용하고 있다.

float property

• none : 요소를 떠 있지 않게 함
  right : 요소를 오른쪽으로 이동
  left : 요소를 왼쪽으로 이동

clear

• none : 양쪽 float를 사용할 수 있다.
  right : 왼쪽 float 사용해제
  left : 오른쪽 float 사용해제

clearfix

• 통상 clearfix라고 명명하고 clearfix::after 속성을 줘서 dom 구조가 완성 된 후 after 속성으로 높이를 인지하여 float를 clear해주는 방식으로 사용했다. 하지만 이 방법은 FM은 아니고 살짜 야매다.