[CSS] 멍멍이 그리기

0. 목표

 - 멍멍이 그리기

 - Flow Chart

1. HTML

<div class="dog">
  <div class="face">
    <div class="face1"></div>
    <div class="face2"></div>      
  </div>
  <div class="nose">
    <div class="nose1"></div>
    <div class="nose2"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="tongue"></div>
  <div class="eye">
    <div class="left"></div>
    <div class="right"></div>
  </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: 120px;
  left: 25px;
  width: 400px; 
  height: 400px; 
  border-radius: 100%;
  background: #FFFFFF;
}

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

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

.dog .nose .nose2{ 
  position: absolute; 
  top: 410px;
  left: 225px;
  width: 10px; 
  height: 40px;
  background: #434343;
}

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

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

.dog .tongue{ 
  position: absolute; 
  top: 430px;
  left: 205px;
  width: 50px; 
  height: 60px; 
  border-radius: 100%;
  background: #E16666;
}

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

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

.dog .ear .left{
  position: absolute; 
  top: 120px;
  left: 30px;
  width: 0px;height: 0px;
  border-bottom: 110px solid #D9D9D9;
  border-left: 110px solid transparent;
  background: #A5C2F4;
  transform:rotate(5deg);
  border-radius: 20%;
}

.dog .ear .right{
  position: absolute; 
  top: 120px;
  left: 310px;
  width: 0px;height: 0px;
  border-bottom: 110px solid #D9D9D9;
  border-right: 110px solid transparent;
  background: #A5C2F4;
  transform:rotate(-5deg);
  border-radius: 20%;
}

3. 결과