[CSS] 몽글이(강아지) 그리기

0. 목표

 - 강아지 그리기

 - Flow Chart

1. HTML

<div class="dog">
  <div class="face">
    <div class="face1"></div>
    <div class="face2"></div>      
  </div>
  <div class="eye">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="face_sub"></div>
  <div class="nose">
    <div class="nose1"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="month"></div>
  <div class="ear">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

2. CSS

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  background: #A5C2F4;
}

.dog {
  position: relative;
  margin: 50px auto;
  width: 400px;
  height: 400px;
}

.dog .face .face1{ 
  position: absolute; 
  top: 220px;
  left: 25px;
  width: 400px; 
  height: 300px; 
  border-radius: 20%;
  background: #FFFFFF;
}

.dog .face .face2{ 
  position: absolute; 
  top: 150px;
  left: 25px;
  width: 400px; 
  height: 200px; 
  border-radius: 100%;
  background: #FFFFFF;
}

.dog .eye .left{ 
  position: absolute; 
  top: 320px;
  left: 140px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #000000;
}

.dog .eye .right{ 
  position: absolute; 
  top: 320px;
  left: 270px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #000000;
}

.dog .face_sub{ 
  position: absolute; 
  top: 360px;
  left: 25px;
  width: 400px; 
  height: 100px; 
  border-radius: 100%;
  background: #FFFFFF;
}

.dog .nose .nose1{ 
  position: absolute; 
  top: 400px;
  left: 200px;
  width: 60px; 
  height: 60px; 
  border-radius: 100%;
  background: #434343;
}

.dog .nose .left{ 
  position: absolute; 
  top: 420px;
  left: 205px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.dog .nose .right{ 
  position: absolute; 
  top: 420px;
  left: 235px;
  width: 20px; 
  height: 20px; 
  border-radius: 100%;
  background: #000000;
}

.dog .month{ 
  position: absolute; 
  top: 470px;
  left: 215px;
  width: 30px; 
  height: 10px; 
  border-radius: 10%;
  background: #000000;
}

.dog .ear .left{ 
  position: absolute; 
  top: 220px;
  left: -10px;
  width: 100px; 
  height: 200px; 
  border-radius: 100%;
  background: #F3F3F3;
}

.dog .ear .right{ 
  position: absolute; 
  top: 220px;
  left: 360px;
  width: 100px; 
  height: 200px; 
  border-radius: 100%;
  background: #F3F3F3;
}

3. 결과