클라우드 III

Coddy의 움직이는 구름 - HTML/CSS/JS 프로젝트 코스 레슨 — 18개 중 6번째.

챌린지

쉬움

HTML 파일에서, cloud div (.cloud, 하나 더 만드세요!) 내부에 클래스 이름이 "cloudBubble2"인 div를 생성하세요.

CSS 파일에서, 새로운 div를 선택하고 다음을 설정하세요:

width를 60px로 설정
height를 60px로 설정
background color를 cloud div와 동일하게 설정
border radius를 30px로 설정
position을 absolute로 설정
top을 -30px로 설정
right를 30px로 설정

마지막으로, .cloud div에서 margin을 제거하세요.

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>

움직이는 구름 - HTML/CSS/JS 프로젝트의 모든 레슨

1소개

4JS로 놀아보기

2컨테이너

5구름 움직이기

3클라우드

클라우드 III

6수많은 구름