클라우드 I
Coddy의 움직이는 구름 - HTML/CSS/JS 프로젝트 코스 레슨 — 18개 중 4번째.
챌린지
쉬움HTML 파일에서, #container 내부에 클래스 이름이 "cloud"인 div를 생성하세요.
CSS 파일에서, 새로운 cloud div를 선택하고 다음을 설정하세요:
width를200px로 설정height를80px로 설정- 원하는 배경색(구름이라는 점을 기억하세요!)
- border radius를
40px로 설정 position을absolute로 설정 (구름의 위치를 자유롭게 조정하기 위함입니다)
또한, 다음 레슨에서 구름이 온전히 보일 수 있도록 margin을 100px 이상으로 설정하세요 (이 마진은 나중에 제거할 예정입니다).
직접 해보기
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>