Daily Targets (260305)
코드
<p><p b><p b s>
<style>
&>*{
background:#983C50
}
/* 모든 p: 화면 중앙 고정, 검은 원 표현 */
p {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180;
height: 180;
box-sizing: border-box;
margin: 0;
background: #000;
border-radius: 50%
}
/* b 속성 가진 p: 더 큰 원, 흰색 테두리
clip-path로 아래쪽 반원만 표시 → 반원 테두리 효과 */
[b] {
width: 240;
height: 240;
border: solid #fff;
border-width: 0 30 30;
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%)
}
/* s 속성 가진 p: 가장 작은 원 */
[s] {
width: 140;
height: 140;
}
</style>