Daily Targets (260617)
코드
<w>
<p></p>
<p s></p>
</w>
<r></r>
<r b></r>
<r l></r>
<r r></r>
<style>
& {
background: #E8AD6D
}
w {
/* 원 테두리 */
display: grid;
place-items: center;
overflow: hidden;
width: 180;
height: 180;
margin: 40 auto;
border: 20px solid #A84A4B;
border-radius: 50%
}
p {
/* 가로 직사각형 */
grid-area: 1 / 1;
width: 100%;
height: 30;
background: #fff
}
[s] {
/* 세로 직사각형 */
rotate: 90deg
}
r {
/* 원 테두리의 상하좌우에 붙어있는 사각형 */
position: fixed;
top: 20;
left: 185;
width: 30;
height: 30;
background: #A84A4B
}
[b] {
top: 250
}
[l], [r] {
top: 135;
left: 70
}
[r] {
left: 300
}
</style>