오방색

💻 HTML 2026-01-04
수정
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2026년 오방색 해석</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            padding: 20px;
            max-width: 80%;
            margin: 0 auto;
            transition: background-color 0.3s, color 0.3s;
            position: relative;
        }
        h1, h2, h3 {
            color: inherit;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid;
            padding: 10px;
            text-align: left;
            vertical-align: middle;
        }
        blockquote {
            border-left: 4px solid;
            padding-left: 15px;
            margin: 20px 0;
            font-style: italic;
        }

        /* 색상 원 스타일 */
        .color-circle {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-left: 10px;
            vertical-align: middle;
            border: 2px solid #fff; /* 라이트 모드에서 선명하게 */
            box-shadow: 0 0 4px rgba(0,0,0,0.2);
        }

        /* 다크모드 토글 버튼 */
        #theme-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #333;
            border: none;
            font-size: 24px;
            color: white;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        #theme-toggle:hover {
            background: #555;
        }

        /* 라이트 모드 기본 */
        body.light {
            background-color: #ffffff;
            color: #333333;
        }
        body.light table th, body.light table td {
            border-color: #ddd;
        }
        body.light blockquote {
            border-left-color: #ccc;
        }
        body.light .color-circle {
            border-color: #fff;
        }

        /* 다크 모드 */
        body.dark {
            background-color: #121212;
            color: #e0e0e0;
        }
        body.dark table th, body.dark table td {
            border-color: #444;
        }
        body.dark blockquote {
            border-left-color: #555;
        }
        body.dark .color-circle {
            border-color: #000;
            box-shadow: 0 0 6px rgba(255,255,255,0.1);
        }
        body.dark #theme-toggle {
            background: #eee;
            color: #333;
        }
    </style>
</head>
<body class="light"> <!-- 기본은 라이트 -->
    <button id="theme-toggle" aria-label="다크모드 토글">🌙</button>

    <h1>전통적인 오방색(五方色)을 통해 연도를 해석하는 방법</h1>
    <p>우리 조상들이 사용하던 육십갑자(60갑자) 시스템에 기반합니다. 연도의 앞자리인 '천간(天干)'이 오행과 연결되어 색상을 결정하게 됩니다.</p>
    <p>현재 연도인 2026년을 기준으로 어떻게 해석하는지 자세히 설명드리겠습니다.</p>
    
    <h2>1. 천간(天干)과 오방색의 연결</h2>
    <p>육십갑자의 앞 글자인 10천간은 각각 상징하는 방위, 오행, 그리고 색상이 정해져 있습니다.</p>
    
    <table>
        <thead>
            <tr>
                <th>천간 (10가지)</th>
                <th>오행 (五行)</th>
                <th>오방색</th>
                <th>의미</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>갑(甲), 을(乙)</td>
                <td>목(木)</td>
                <td>청색 (푸른색)<span class="color-circle" style="background-color:#0070f3;"></span></td>
                <td>탄생, 생명, 동쪽</td>
            </tr>
            <tr>
                <td>병(丙), 정(丁)</td>
                <td>화(火)</td>
                <td>적색 (붉은색)<span class="color-circle" style="background-color:#e74c3c;"></span></td>
                <td>정열, 활력, 남쪽</td>
            </tr>
            <tr>
                <td>무(戊), 기(己)</td>
                <td>토(土)</td>
                <td>황색 (노란색)<span class="color-circle" style="background-color:#f1c40f;"></span></td>
                <td>풍요, 중심, 조화</td>
            </tr>
            <tr>
                <td>경(庚), 신(辛)</td>
                <td>금(金)</td>
                <td>백색 (하얀색)<span class="color-circle" style="background-color:#ecf0f1;"></span></td>
                <td>순결, 결실, 서쪽</td>
            </tr>
            <tr>
                <td>임(壬), 계(癸)</td>
                <td>수(水)</td>
                <td>흑색 (검은색)<span class="color-circle" style="background-color:#2c3e50;"></span></td>
                <td>지혜, 생명의 원천, 북쪽</td>
            </tr>
        </tbody>
    </table>
    
    <h2>2. 연도별 색상 계산법</h2>
    <p>연도의 마지막 숫자를 보면 해당 연도의 천간과 색상을 바로 알 수 있습니다.</p>
    <ul>
        <li>연도 끝자리 4, 5: 청색 (푸른색)<span class="color-circle" style="background-color:#0070f3;"></span> (청룡, 청마 등)</li>
        <li>연도 끝자리 6, 7: 적색 (붉은색)<span class="color-circle" style="background-color:#e74c3c;"></span> (적룡, 적마 등)</li>
        <li>연도 끝자리 8, 9: 황색 (노란색)<span class="color-circle" style="background-color:#f1c40f;"></span> (황룡, 황마 등)</li>
        <li>연도 끝자리 0, 1: 백색 (하얀색)<span class="color-circle" style="background-color:#ecf0f1;"></span> (백룡, 백마 등)</li>
        <li>연도 끝자리 2, 3: 흑색 (검은색)<span class="color-circle" style="background-color:#2c3e50;"></span> (흑룡, 흑마 등)</li>
    </ul>
    
    <h2>3. 2026년은 어떤 해인가요?</h2>
    <p>2026년을 오방색으로 해석하면 다음과 같습니다.</p>
    <ul>
        <li>천간 확인: 2026년의 끝자리는 '6'이므로 천간은 <strong>'병(丙)'</strong>에 해당합니다.</li>
        <li>색상 매칭: '병(丙)'은 오행 중 '화(火)'를 상징하며, 색상은 적색 (붉은색)<span class="color-circle" style="background-color:#e74c3c;"></span>입니다.</li>
        <li>지지 확인: 2026년은 십이지신 중 '말(午)'의 해입니다.</li>
        <li>결합: 따라서 2026년은 <strong>'병오년(丙午年)'</strong>이며, 빨간 말의 해(적마해)<span class="color-circle" style="background-color:#e74c3c;"></span>라고 부릅니다.</li>
    </ul>
    
    <blockquote>
        <p>참고: 붉은색은 예로부터 강한 생명력과 정열을 상징하며, 액운을 쫓는 색으로 여겨졌습니다. 따라서 적마(붉은 말)의 해는 매우 역동적이고 기운찬 한 해로 풀이되곤 합니다.</p>
    </blockquote>

    <script>
        const toggleButton = document.getElementById('theme-toggle');
        const body = document.body;

        // 현재 테마 확인 및 버튼 아이콘 설정
        function updateTheme() {
            if (body.classList.contains('dark')) {
                toggleButton.textContent = '☀️';
            } else {
                toggleButton.textContent = '🌙';
            }
        }

        // 토글 버튼 클릭 시
        toggleButton.addEventListener('click', () => {
            body.classList.toggle('dark');
            body.classList.toggle('light');
            updateTheme();
        });

        // 시스템 다크모드 감지
        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
        function applySystemTheme(e) {
            if (e.matches) {
                body.classList.remove('light');
                body.classList.add('dark');
            } else {
                body.classList.remove('dark');
                body.classList.add('light');
            }
            updateTheme();
        }

        mediaQuery.addEventListener('change', applySystemTheme);
        applySystemTheme(mediaQuery); // 초기 적용
    </script>
</body>
</html>
상세 정보
생성일: 2026-01-04
수정일: 2026-01-08
이 아이템이 링크하는 문서

링크된 문서가 없습니다.

이 아이템을 참조하는 문서

참조하는 문서가 없습니다.

액션
수정
공유 & 관리
복제
목록으로 메인으로
마지막 수정: 2026-01-08 12:36
이미지 URL 수정됨