CSSBattle
Target #2 - Carrom
같은 요소 4개를 만들고, 4방향으로 퍼뜨리면 되는 문제다.
일단 아래와 같이 복잡하게 풀었는데.. 조금 더 쉽게 해결되는 방법이 있는지 더 생각해봐야겠다..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<style>
body {
margin: 0;
background: #62374e;
}
body > div {
display: flex;
margin: 0 -50px;
flex-direction: column;
justify-content: space-around;
height: 100%;
}
body > div > div {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
}
div > div > div {
width: 50px;
height: 50px;
background: #fdc57b;
}
</style>
끝