[HTML5/CSS3] HTML/CSS 12일차

HTML / CSS

✔ Preview

input type, 애니메이션 작성 방법 정리

---

✍ Summary

Input

: <input> 태그는 사용자로부터 정보를 받아올 때 사용되는 태그로서, type이라는 속성을 통해 다양한 입력 방식으로 설정할 수 있다.

* button, checkbox, color, date 등 다양한 type이 있으니 w3schools를 통해 확인하며 사용(https://www.w3schools.com/html/html_form_input_types.asp)

 

 

Animation (애니메이션)

: CSS를 통해 요소에 적용되는 스타일을 정의할 수 있다. 기존에는 자바스크립트를 통해 애니메이션을 정의했지만 CSS를 이용하면 좀 더 간단하고 효율적으로 애니메이션을 적용할 수 있다.

 

• keyframe을 이용한 애니메이션 정의

@keyframes abc { /* 이름을 abc로 정의 */
	from { /* 애니메이션의 시작 상태 */
		margin-left: 50%; /* 부모의 50%를 margin으로 사용 */
		width: 50%;
	}
	to { /* 애니메이션의 끝 상태 */
		margin-left: 0%;
		width: 50%;
	}
}

 

• HTML에 애니메이션 적용

h3 {
	animation-name: abc; /* keyframes를 통해 정의한 애니메이션 이름 사용 */
	animation-duration: 2s; /* 속도 숫자가 커질수록 느려짐 */
}