/* in4u static heading CSS blog=37 generated=2026-05-22T16:42:12+00:00 v3.1.1 */
/* WordPress Additional CSS (static heading) */ /* GeneratePress Site CSS */ .auto-width.gb-query-loop-wrapper { flex: 1; } @media (min-width: 768px) { .sticky-container > .gb-inside-container,.sticky-container { position: sticky; top: 80px; } #right-sidebar .inside-right-sidebar { height: 100%; } } select#wp-block-categories-1 { width: 100%; } /* End GeneratePress Site CSS */ /* 제목 꾸미기 시작 */ /* H1 태그 스타일링 */ .site-main h1, .entry-content h1 { margin: 1em 0 0.5em 0; font-weight: bold; font-size: 36px; line-height: 1.3; font-family: 'Muli', sans-serif; text-align: center; animation: h1ColorChange 8s ease-in-out infinite; } @keyframes h1ColorChange { 0%, 100% { color: #8e44ad; } /* 진한 보라색 */ 25% { color: #16a085; } /* 청록색 */ 50% { color: #d35400; } /* 진한 주황색 */ 75% { color: #2980b9; } /* 진한 파란색 */ } /* H2 태그 스타일링 */ .entry-content h2 { margin: 1.5em 0 0.8em 0; font-weight: bold; position: relative; font-size: 28px; line-height: 1.4; padding: 15px 20px; font-family: 'Muli', sans-serif; overflow: hidden; background: transparent; } /* H2 테두리 애니메이션 */ .entry-content h2::before, .entry-content h2::after { content: ''; position: absolute; left: -50%; right: -50%; height: 2px; background: linear-gradient( to right, #3498db, #2ecc71, #e74c3c, #f39c12, #9b59b6, #3498db, #2ecc71, #e74c3c, #f39c12, #9b59b6 ); background-size: 200% 100%; animation: borderMove 10s linear infinite; } .entry-content h2::before { top: 0; } .entry-content h2::after { bottom: 0; } @keyframes borderMove { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } /* H3 태그 스타일링 */ .entry-content h3 { padding: 10px 15px; margin: 35px 0 25px 0; font-size: 1.3em; font-weight: 700; position: relative; overflow: hidden; background: transparent; } /* H3 밑줄 애니메이션 */ .entry-content h3::after { content: ""; position: absolute; left: -50%; bottom: 0; height: 3px; width: 200%; background: linear-gradient( to right, #3498db, #2ecc71, #e74c3c, #f39c12, #9b59b6, #3498db, #2ecc71, #e74c3c, #f39c12, #9b59b6 ); background-size: 200% 100%; animation: underlineMove 10s linear infinite; } @keyframes underlineMove { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } } /* H4 태그 스타일링 */ .entry-content h4 { padding: 10px 15px; margin: 30px 0 20px 0; font-size: 1.2em; font-weight: 700; position: relative; overflow: hidden; background: transparent; } /* H4 밑줄 애니메이션 */ .entry-content h4::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient( to right, #3498db, #2ecc71, #e74c3c, #f39c12, #9b59b6 ); animation: h4UnderlineMove 4s linear infinite; } @keyframes h4UnderlineMove { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* 헤딩 텍스트 공통 스타일 (깜박이는 애니메이션) - H2, H3, H4에 적용 */ .entry-content h2, .entry-content h3, .entry-content h4 { animation: textColorChange 5s linear infinite; } @keyframes textColorChange { 0%, 100% { color: #2c3e50; } /* 진한 남색 */ 25% { color: #3498db; } /* 밝은 블루 */ 50% { color: #2ecc71; } /* 연한 그린 */ 75% { color: #e74c3c; } /* 밝은 레드 */ } /* 다크 모드 스타일 */ @media (prefers-color-scheme: dark) { .site-main h1, .entry-content h1 { animation: h1ColorChangeDark 8s ease-in-out infinite; } @keyframes h1ColorChangeDark { 0%, 100% { color: #9b59b6; } /* 밝은 보라색 */ 25% { color: #1abc9c; } /* 밝은 청록색 */ 50% { color: #e67e22; } /* 밝은 주황색 */ 75% { color: #3498db; } /* 밝은 파란색 */ } .entry-content h2, .entry-content h3, .entry-content h4 { animation: textColorChangeDark 5s linear infinite; } @keyframes textColorChangeDark { 0%, 100% { color: #ecf0f1; } /* 밝은 회색 */ 25% { color: #3498db; } /* 밝은 블루 */ 50% { color: #2ecc71; } /* 연한 그린 */ 75% { color: #e74c3c; } /* 밝은 레드 */ } } /* 제목 꾸미기 끝 */ /* 사용된 색상 팔레트: H1: 1. #8e44ad - 진한 보라색 2. #16a085 - 청록색 3. #d35400 - 진한 주황색 4. #2980b9 - 진한 파란색 H2, H3, H4: 1. #3498db - 밝은 블루 2. #2ecc71 - 연한 그린 3. #e74c3c - 밝은 레드 4. #f39c12 - 주황색 5. #9b59b6 - 보라색 텍스트 색상: - 라이트 모드 기본: #2c3e50 (진한 남색) - 다크 모드 기본: #ecf0f1 (밝은 회색) 애니메이션 설정: - H1 텍스트 색상 변경: 8초 주기 - H2, H3, H4 텍스트 색상 변경: 5초 주기 - 테두리/밑줄 이동: H2, H3는 10초 주기, H4는 4초 주기 수정 시 주의사항: 1. 색상 변경: 위의 색상 코드를 원하는 색상으로 교체하세요. 2. 애니메이션 속도 조절: animation 속성의 시간(초)을 변경하세요. 3. 폰트 크기 및 여백 조정: font-size, margin, padding 값을 수정하세요. 4. 다크 모드 비활성화: @media (prefers-color-scheme: dark) 부분을 삭제하거나 주석 처리하세요. */ /* 배너 이미지 설정 */ .top-bar .widget { margin: 0; padding: 0; width: 100%; height: 100%; }