[CSS] 쿼카 그리기

1. 자료수집

2. 스케치

3. html

<div class="quokka">  
  <div class="ear">
    <div class="left">
      <div class="ear1"></div>
      <div class="ear2"></div>
    </div>
    <div class="right">
      <div class="ear1"></div>
      <div class="ear2"></div>
    </div>
  </div>
  
  <div class="face">
    <div class="face1"></div>
    <div class="face2"></div>
  </div>
  
  <div class="cheek">
    <div class="left"></div>
    <div class="right"></div>
  </div>
  
  <div class="tongue"></div>
  
  <div class="philanthropy">
    <div class="left">
      <div class="philanthropy1"></div>
      <div class="philanthropy2"></div>
    </div>
    <div class="right">
      <div class="philanthropy1"></div>
      <div class="philanthropy2"></div>
    </div>
  </div>
  
  <div class="nose"></div>
  
  <div class="eye">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

4. css

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

body {
  background: #FFFFFF;
}

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

.quokka .ear .left .ear1{ 
  position: absolute; 
  top: 80px;
  left: 55px;
  width: 120px; 
  height: 120px; 
  border-radius: 100%;
  background: #FFD967;
}

.quokka .ear .left .ear2{ 
  position: absolute; 
  top: 90px;
  left: 75px;
  width: 90px; 
  height: 90px; 
  border-radius: 100%;
  background: #F9CB9C;
}

.quokka .ear .right .ear1{ 
  position: absolute; 
  top: 80px;
  left: 245px;
  width: 120px; 
  height: 120px; 
  border-radius: 100%;
  background: #FFD967;
}

.quokka .ear .right .ear2{ 
  position: absolute; 
  top: 90px;
  left: 255px;
  width: 90px; 
  height: 90px; 
  border-radius: 100%;
  background: #F9CB9C;
}

.quokka .face .face1{ 
  position: absolute; 
  top: 120px;
  left: 25px;
  width: 400px; 
  height: 400px; 
  border-radius: 100%;
  background: #FFD967;
}

.quokka .face .face2{ 
  position: absolute; 
  top: 230px;
  left: 10px;
  width: 430px; 
  height: 300px; 
  border-radius: 100%;
  background: #FFD967;
}

.quokka .cheek .left{ 
  position: absolute; 
  top: 350px;
  left: 55px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #F4CCCC;
}

.quokka .cheek .right{ 
  position: absolute; 
  top: 350px;
  left: 295px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #F4CCCC;
}

.quokka .tongue{ 
  position: absolute; 
  top: 390px;
  left: 200px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #E16666;
}

.quokka .philanthropy .left .philanthropy1{ 
  position: absolute; 
  top: 370px;
  left: 175px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #000000;
}

.quokka .philanthropy .left .philanthropy2{ 
  position: absolute; 
  top: 363px;
  left: 175px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #FFD967;
}

.quokka .philanthropy .right .philanthropy1{ 
  position: absolute; 
  top: 370px;
  left: 225px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #000000;
}

.quokka .philanthropy .right .philanthropy2{ 
  position: absolute; 
  top: 363px;
  left: 225px;
  width: 50px; 
  height: 50px; 
  border-radius: 100%;
  background: #FFD967;
}

.quokka .nose{ 
  position: absolute; 
  top: 300px;
  left: 175px;
  width: 100px; 
  height: 100px; 
  border-radius: 100%;
  background: #000000;
}

.quokka .eye .left{ 
  position: absolute; 
  top: 280px;
  left: 130px;
  width: 30px; 
  height: 30px; 
  border-radius: 100%;
  background: #000000;
}

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

5. 결과