[CSS Battle - 4] 1-3. Push Button

타겟 이미지

 

 

z-index를 써서 해결하면 되지 않을까..?

 

내 코드

<div class="all box"></div>
<div class="all circle L"></div>
<div class ="all circle M"></div>
<div class ="all circle S"></div>
<style>
   body {
    margin: 0;
    background: #6592CF;
  }
  .all {
    position: absolute;
  }
  .box {
    z-index: 1;
    width: 300;
    height: 150;
    background: #243D83;
 	margin-top: 75;
    margin-left: 50;
  }
  .circle {
    border-radius: 50%;
  }
  .L {
    z-index: 2;
    width: 250;
    height: 250;
    background: #6592CF;
    margin-top: 25;
    margin-left: 75
  }
  .M {
    z-index: 3;
    width: 150;
    height: 150;    
    background: #243D83;
    margin-top: 75;
    margin-left: 125;
  }
  .S {
    z-index: 4;
    width: 50;
    height: 50;    
    background: #EEB850;
    margin-top: 125;
    margin-left: 175;    
  }
</style>

 

아웃풋

 

결과

Score: 600.21 {792}, 100% match

 

정리

1등은 무려 108byte..

반복 등장하는 속성을 단축하는 방법이 있는 듯하다.

byte를 최대한 줄이기 위해 all 이라는 클래스를 만들어 position을 넣어봤다.

 

z-index를 사용해서 element들을 겹쳐서 완성했다.

z-index를 사용하기 위해서는 position 프로퍼티를 반드시 사용해야 한다는 점을 복습했다.