타겟 이미지
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 프로퍼티를 반드시 사용해야 한다는 점을 복습했다.