애니메이션
@keyframes < 애니메이션이 바뀌는 지점
@keyframes ani1(이름) {from{background-color: red; to{background-color: blue;}}
animation 축약 속성으로 쓸 때 시간단위 들어간건 무조건 앞에 있는게 duration
애니메이션은 가상선택자 없어도 쓸 수 있음animation – 속성
- delay지연시간
- direction 종료 후 처음부터 시작하지 역방향으로 진행할지
- duration실행시간
- fill-mode(애니메이션이 종료되었거나 지연되어 애니메이션이 실행되지 않는 상태일 때 요소 스타일 지정)
- iteration-count반복횟수
= name @keyframes로 지정한 중간단계 이름을 지정- play-state멈추거나 다시시작
- timing-function 속도 곡선
필터 속성
filter: blur(5px) 블러
hover 했을 때 효과 주기#test:hover{filter: blur(0) brightness(150%) drop-shadow(3px 3px 5px ); transition: filter 0.5s;}블러 밝기
#test2:hover{/* filter: grayscale(100%); */filter: hue-rotate(90deg);}색상환 바꾸기
등 다양한 필터 속성 있다~
white space : 공백처리 속성
nomal :자동줇바꿈(기본값)
nowrap : 자동 줄바꿈 안 됨★
pre : 자동 줄 바꿈 안 됨 space와 enter는 적용됨 (공백 엔터 인식)
pre-wrap: 자동 줄바꿈 됨, space와 enter도 적용됨
pre-line : 자동줄바꿈 됨/ enter 적용 / space만 적용안됨
<pre>enter와 space가 적용이 되는 태그 그러나 잘 안 씀
width : 300px
white-space: nowrap
overflow: hidden;
text-overflow: ellipsis < width 영역 벗어난 부분 뒤에 내용 더 있다고 말줄임표 넣어줌 (ellipsis 는 생략,생략부호 라는 뜻)
