편집토론문서 역사

연습장:General/202504300032: 두 판 사이의 차이

시각위키텍스트
잔글편집 요약 없음
잔글편집 요약 없음
 
(같은 사용자의 중간 판 12개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<div style="position: relative; width: 800px; height: 800px; margin: 0 auto; background: black;">
<div style="position: relative; width: 90vw; height: 90vw; max-width: 800px; max-height: 800px; margin: 20px auto; background: radial-gradient(ellipse at center, #000814 0%, #001D3D 40%, #000814 100%); border-radius: 50%; box-shadow: inset 0 0 100px rgba(0, 119, 190, 0.3), inset 0 0 50px rgba(0, 180, 216, 0.2), 0 0 50px rgba(0, 119, 190, 0.5), 0 0 100px rgba(0, 180, 216, 0.3); border: 3px solid transparent; background-clip: padding-box;">
<!-- 중심 항성 -->
<div style="position: absolute; width: 102%; height: 102%; border: 2px solid rgba(144, 224, 239, 0.3); border-radius: 50%; top: -1%; left: -1%; z-index: 0;"></div>
<div style="position: absolute; width: 40px; height: 40px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;"></div>
<div style="position: absolute; width: 104%; height: 104%; border: 1px solid rgba(72, 202, 228, 0.2); border-radius: 50%; top: -2%; left: -2%; z-index: 0;"></div>
<!-- 동심원들 (z-index를 낮게 설정) -->
<div style="position: absolute; width: 4%; min-width: 20px; max-width: 40px; height: 4%; min-height: 20px; max-height: 40px; background: radial-gradient(circle, #FFEB3B 0%, #FFC107 70%, #FF9800 100%); box-shadow: 0 0 30px #FDB813, 0 0 60px #FFA000; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100;"></div>
<div style="position: absolute; width: 100px; height: 100px; border: 2px solid white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 12.5%; height: 12.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 200px; height: 200px; border: 2px solid white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 25%; height: 25%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 300px; height: 300px; border: 2px solid white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 37.5%; height: 37.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 400px; height: 400px; border: 2px solid white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 50%; height: 50%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 500px; height: 500px; border: 2px solid white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 62.5%; height: 62.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 600px; height: 600px; border: 2px solid white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 75%; height: 75%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 700px; height: 700px; border: 2px solid white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<div style="position: absolute; width: 87.5%; height: 87.5%; border: 2px dotted rgba(255,255,255,0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;"></div>
<!-- 행성들 (z-index를 높게 설정) -->
<div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #FFE4B5; box-shadow: 0 0 5px #FFE4B5; border-radius: 50%; top: 50%; left: calc(50% + 6.25%); transform: translate(-50%, -50%); z-index: 50;">[[금성|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(50px); z-index: 50;">[[행성1|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: linear-gradient(135deg, #1E90FF 0%, #4169E1 50%, #228B22 100%); box-shadow: 0 0 5px #4169E1; border-radius: 50%; top: 50%; left: calc(50% + 12.5%); transform: translate(-50%, -50%); z-index: 50;">[[지구|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(100px); z-index: 50;">[[행성2|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #DC143C; box-shadow: 0 0 5px #DC143C; border-radius: 50%; top: 50%; left: calc(50% + 18.75%); transform: translate(-50%, -50%); z-index: 50;">[[화성|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(150px); z-index: 50;">[[행성3|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: linear-gradient(0deg, #CD853F 0%, #F0E68C 25%, #DEB887 50%, #F0E68C 75%, #CD853F 100%); box-shadow: 0 0 5px #DAA520; border-radius: 50%; top: 50%; left: calc(50% + 25%); transform: translate(-50%, -50%); z-index: 50;">[[목성|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(200px); z-index: 50;">[[행성4|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #FAEBD7; box-shadow: 0 0 5px #F0E68C; border-radius: 50%; top: 50%; left: calc(50% + 31.25%); transform: translate(-50%, -50%); z-index: 50;">[[토성|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(250px); z-index: 50;">[[행성5|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #00CED1; box-shadow: 0 0 5px #00CED1; border-radius: 50%; top: 50%; left: calc(50% + 37.5%); transform: translate(-50%, -50%); z-index: 50;">[[연습장:General/202504300032/ㅇㅇㅇ|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(300px); z-index: 50;">[[행성6|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 1.5%; min-width: 8px; max-width: 12px; height: 1.5%; min-height: 8px; max-height: 12px; background: #4682B4; box-shadow: 0 0 5px #4682B4; border-radius: 50%; top: 50%; left: calc(50% + 43.75%); transform: translate(-50%, -50%); z-index: 50;">[[해왕성|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
<div style="position: absolute; width: 15px; height: 15px; background: white; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) translateX(350px); z-index: 50;">[[행성7|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]]</div>
</div>
</div>

2025년 5월 24일 (토) 09:04 기준 최신판