잔글편집 요약 없음 |
잔글편집 요약 없음 |
||
| 2번째 줄: | 2번째 줄: | ||
<!-- 중심 항성 (태양 - 밝은 노란색 + 광채 효과) --> | <!-- 중심 항성 (태양 - 밝은 노란색 + 광채 효과) --> | ||
<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: 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: 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: 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: 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: 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> | ||
| 10번째 줄: | 10번째 줄: | ||
<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: 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: 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> | <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> | ||
<!-- 행성들 | <!-- 행성들 --> | ||
<!-- 금성 (밝은 베이지) --> | <!-- 금성 (첫 번째 궤도 - 밝은 베이지) --> | ||
<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% + | <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;">[[금성| ]]</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% + | <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;">[[지구| ]]</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% + | <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;">[[화성| ]]</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% + | <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;">[[목성| ]]</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% + | <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;">[[토성| ]]</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% + 43.75%); transform: translate(-50%, -50%); z-index: 50;">[[ | <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;">[[천왕성| ]]</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;">[[해왕성| ]]</div> | |||
</div> | </div> | ||