고정값
Coddy의 움직이는 구름 - HTML/CSS/JS 프로젝트 코스 레슨 — 18개 중 10번째.
구름을 움직여 봅시다!
챌린지
쉬움구름을 움직이기 시작하기 전에, 구름의 위치와 크기를 고정해 봅시다.
구름에 무작위 위치와 크기를 설정하는 코드를 주석 처리하세요.
JS 파일에서 cloud 요소를 타겟팅하고 다음을 수행하세요:
left스타일 속성을200px로 설정하세요.-
top스타일 속성을200px로 설정하세요. transform스타일 속성을scale(0.5)로 설정하세요.
또한, transition 스타일 속성을 "all linear 3s"로 설정하세요. 이것은 나중에 구름을 애니메이션화하는 데 도움이 될 것입니다!
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>