Animation

grace_eun·2022년 2월 4일

CSS

목록 보기

1/1

Input Animation

input을 클릭하면 label이 움직이는 animation

transition 사용

valid 선택자 : input에 글을 써도 label이 위로 올라간 상태 유지

ie는 10부터 적용

<기준점>
static : 기준 없음(배치 불가능/기본값)
relative : 요소 자기 자신을 기준으로 배치
absolute : 부모(조상) 요소를 기준으로 배치
fixed : 뷰포트 기준으로 배치
stickey : 스크룰 영역 기준으로 배치

<속성을 이용해 요소 이동>
top : 위쪽에서의 거리 설정
bottom : 아래쪽에서
left : 왼쪽에서
right : 오른쪽에서

relative
위치 이동하면서 다른 요소에 영향을 주지 않음
문서 상 원래 위치가 그대로 유지됨

absolute
조상 중 position을 가진 요소가 없다면 body를 기준으로 삼음
(static을 제외한 값)
문서 상 원래 위치를 잃어버림

코린이