본문 바로가기

웹/HTML & CSS27

[CSS] Animation 애니메이션(Animation) animation-name 애니메이션 이름 animation-duration 애니메이션 시간 animation-timing-function 애니메이션 타이밍 함수 animation-delay 애니메이션 지연시간 animation-direction 애니메이션 종료 후, 진행 (순/역)방향 animation-iteration-count 애니메이션 반복 횟수 (infinite: 무한반복) animation-play-state 애니메이션 재생/일시정지 설정 animation-fill-mode 애니메이션 시작 전/종료 후 키프레임 설정 (forwards: 유지) 애니메이션 정의@keyframes 애니메이션 이름 { form{ }to{ }} 2019. 1. 21.
[CSS] Transition Transition transition-property : 트랜지션 속성css속성 중 어떤 속성에 트랜지션을 적용할 것인지 선택하는 것입니다. transition-duration : 트랜지션 시간 transition-timing-function : 트랜지션 타이밍 함수트랜지션 효과의 시작과 중간, 그리고 끝에서의 속도 곡선을 선택합니다.- ease : 처음에는 천천히 시작, 점점 빨라지다 마지막 천천히- linear : 시작부터 끝까지 똑같은 속도- ease-in : 시작을 느리게- ease-out : 느리게 끝남- ease-in-out : 느리게 시작하고 느리게 끝남- cubic-bezier(n,n,n,n) - 직접 bezier 함수를 정의해서 사용 transition-delay : 트랜지션 지연시간 .. 2019. 1. 21.
[CSS] 2D Transforms (rotate, scale, translate, skew) 2D 트랜스폼(Transform) 회전rotateX(angle)rotateY(angle)rotate(angle) 크기scaleX()scaleY()scale(x, y) 이동translateX()translateY()translate(x, y) 비틈skewX()skewY()skew(x, y) 중심축 바꿔주기 transform-origin: 0% 0%; 중심축을 바꿔줌 2019. 1. 21.
[HTML] 텍스트 관련 태그들 윗첨자 요소 - Superscript 아래첨자 요소 - Subscript 축약 요소 - abbreviation 시간 요소 더 이상 관련이 없거나 더 이상 정확하지 않은 요소 - Strikethrough 관련 참조 목적의 하이라이트된 글자 요소 - Marking 저작권, 법적 텍스트, 주석 및 작은 글씨 요소 2019. 1. 15.