클라우드 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>

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

1소개

4JS로 놀아보기

2컨테이너

5구름 움직이기

3클라우드

클라우드 I

6수많은 구름

직접 연습해 보세요: Web 플레이그라운드