Notice
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
관리 메뉴

Jade_o.o

[css] position 실습 - 애벌레 만들기 본문

CSS

[css] position 실습 - 애벌레 만들기

by jade 2024. 1. 13. 12:49

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position 실습문제 - 애벌레 만들기</title>
    <link rel="stylesheet" href="./css_test14.css">
</head>
<body>
    <div class="container">
        <div class="bug1">
            <div class="item1">
                <div class="item2"></div>
            </div>
        </div>
        <div class="bug2"></div>
        <div class="bug3"></div>
        <div class="bug4"></div>
        <img src="./img/grass.png" alt="grass">
        <div class="bug5"></div>
    </div>


</body>
</html>

ver1. html 코드

 

.container{
    position: relative;
    width: 500px;
    height: 300px;
}
.bug1{
    width: 50px;
    height: 50px;
    background-color: green;
    border-radius: 50%;
    position: relative;
    top:150px;
    left: 155px;
    z-index: 1;
}

.bug2{
    width: 50px;
    height: 50px;
    background-color: yellowgreen;
    border-radius: 50%;
    position: relative;
    left:185px;
    top: 125px;
    z-index: 2;
}
.bug3{
    width: 50px;
    height: 50px;
    background-color: greenyellow;
    border-radius: 50%;
    position: relative;
    left:205px;
    top: 100px;
    z-index: 3;
}
.bug4{
    width: 50px;
    height: 50px;
    background-color: rgb(177, 207, 117);
    border-radius: 50%;
    position: relative;
    top: 75px;
    left: 210px;
    z-index: 4;
}
.bug5{
    width: 50px;
    height: 50px;
    background-color: rgb(206, 233, 152);
    border-radius: 50%;
    position: relative;
    top:50px;
    left: 230px;
    z-index: 6;
}
div img{
    position: absolute;
    z-index: 5;
}
.bug1>.item1{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    top:10px;
    left:8px;
}
.bug1>.item1>.item2{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    position: relative;
    top:5px;

}

ver2. css 코드

 

코드 실행 시 결과창

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>position 실습문제 - 애벌레 만들기</title>
    <link rel="stylesheet" href="./css_test14_2.css">
</head>
<body>
    <div class="body body1">
        <div class="eye-white">
          <div class="eye-black"></div>
        </div>
      </div>
      <div class="body body2"></div>
      <div class="body body3"></div>
      <div class="body body4"></div>
      <div class="body body5"></div>
      <div class="body body6"></div>
        <img class="grass" src="./img/grass.png" alt="grass">
</body>
</html>

ver2. html 코드

 

.container{
    position: relative;
    width: 500px;
    height: 300px;
}
.bug1{
    width: 50px;
    height: 50px;
    background-color: green;
    border-radius: 50%;
    position: relative;
    top:150px;
    left: 155px;
    z-index: 1;
}

.bug2{
    width: 50px;
    height: 50px;
    background-color: yellowgreen;
    border-radius: 50%;
    position: relative;
    left:185px;
    top: 125px;
    z-index: 2;
}
.bug3{
    width: 50px;
    height: 50px;
    background-color: greenyellow;
    border-radius: 50%;
    position: relative;
    left:205px;
    top: 100px;
    z-index: 3;
}
.bug4{
    width: 50px;
    height: 50px;
    background-color: rgb(177, 207, 117);
    border-radius: 50%;
    position: relative;
    top: 75px;
    left: 210px;
    z-index: 4;
}
.bug5{
    width: 50px;
    height: 50px;
    background-color: rgb(206, 233, 152);
    border-radius: 50%;
    position: relative;
    top:50px;
    left: 230px;
    z-index: 6;
}
div img{
    position: absolute;
    z-index: 5;
}
.bug1>.item1{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    position: relative;
    top:10px;
    left:8px;
}
.bug1>.item1>.item2{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    position: relative;
    top:5px;

}

ver2. css 코드

 

코드 실행 시 결과창

저작자표시 비영리 변경금지

'CSS' 카테고리의 다른 글

[css] background 실습 - 프로필 만들기  (1) 2024.01.13
[css] Flexbox 실습 - header 만들기  (0) 2024.01.13
[css] attr 실습6 - flex-direction, flex-wrap, align-content  (0) 2024.01.13
[css] attr 실습5 - 배경 적용하기  (1) 2024.01.13
[css] attr 실습4 - 요소 쌓임 순서 및 z-index  (0) 2024.01.12
'CSS' Related Articles more