Sticky Navigation 구성 요소

<header class="sticky top-0 z-50 py-4 shadow-skeuomorphic-light dark:shadow-skeuomorphic-dark bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <nav class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4 md:px-6 lg:px-8">
    <!-- Logo/Site Title -->
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl lg:text-3xl font-extrabold text-gray-800 dark:text-gray-100 uppercase tracking-widest leading-none">
        <span class="text-red-600 dark:text-red-500">NEWS</span>CAST
      </a>
    </div>

    <!-- Navigation Links -->
    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 lg:space-x-6 items-center flex-grow justify-center">
      <a href="#" class="nav-button">
        <span class="button-text">Latest</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Politics</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Business</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Tech</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Sports</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Opinion</span>
      </a>
    </div>

    <!-- Search and Theme Toggle -->
    <div class="flex items-center space-x-4 mt-4 md:mt-0">
      <!-- Search Button -->
      <button class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <svg class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <span class="sr-only">Search</span>
      </button>

      <!-- Theme Toggle Button -->
      <button id="theme-toggle" class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <!-- Moon icon for light mode (default) -->
        <svg id="theme-toggle-dark-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
        </svg>
        <!-- Sun icon for dark mode -->
        <svg id="theme-toggle-light-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.121-7.778l.707-.707a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm3.657 5.657l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM10 18a1 1 0 01-1 1v1a1 1 0 112 0v-1a1 1 0 01-1-1zm-4.95-2.121l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zm-2.121-7.778l-.707-.707a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414z"></path>
        </svg>
        <span class="sr-only">Toggle theme</span>
      </button>
    </div>
  </nav>
</header>

<!-- Placeholder Content to Demonstrate Stickiness and give page height for scrolling -->
<div class="h-[1200px] bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-8 flex items-center justify-center">
  <p class="text-4xl font-light opacity-30">Scroll down to see the sticky header in action.</p>
</div>

<style>
  /* Skeuomorphic styles using custom properties for easy theme switching */
  .shadow-skeuomorphic-light {
    box-shadow: 
      inset 2px 2px 5px rgba(255, 255, 255, 0.7),
      inset -3px -3px 8px rgba(0, 0, 0, 0.2),
      5px 5px 15px rgba(0, 0, 0, 0.1), 
      -5px -5px 15px rgba(255, 255, 255, 0.8);
  }

  .dark .shadow-skeuomorphic-light, html.dark .shadow-skeuomorphic-light {
     box-shadow: none; /* Remove light shadows in dark mode */
  }

  .shadow-skeuomorphic-dark {
    box-shadow: 
      inset 5px 5px 10px rgba(0, 0, 0, 0.4),
      inset -5px -5px 10px rgba(255, 255, 255, 0.05),
      5px 5px 15px rgba(0, 0, 0, 0.4),
      -5px -5px 15px rgba(255, 255, 255, 0.08);
  }

  .light .shadow-skeuomorphic-dark, html.light .shadow-skeuomorphic-dark {
    box-shadow: none; /* Remove dark shadows in light mode */
  }

  /* Nav Button Base */
  .nav-button {
    @apply relative flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full shadow-skeuomorphic-button-light dark:shadow-skeuomorphic-button-dark transition-all duration-200;
    @apply bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-950;
  }

  /* Nav Button Text */
  .nav-button .button-text {
    @apply text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200;
  }

  /* Nav Button Hover/Active State */
  .nav-button:hover {
    @apply text-red-600 dark:text-red-500;
    @apply shadow-skeuomorphic-button-inset-light dark:shadow-skeuomorphic-button-inset-dark;
    @apply bg-gradient-to-tr from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
  }

  .shadow-skeuomorphic-button-light {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.1),
      -3px -3px 6px rgba(255, 255, 255, 0.6);
  }

  .shadow-skeuomorphic-button-dark {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.6),
      -3px -3px 6px rgba(255, 255, 255, 0.08);
  }

  .shadow-skeuomorphic-button-inset-light {
    box-shadow:
      inset 2px 2px 5px rgba(0, 0, 0, 0.15),
      inset -2px -2px 5px rgba(255, 255, 255, 0.7);
  }

  .shadow-skeuomorphic-button-inset-dark {
    box-shadow:
      inset 3px 3px 7px rgba(0, 0, 0, 0.8),
      inset -3px -3px 7px rgba(255, 255, 255, 0.05);
  }

  /* Media queries for responsiveness of buttons within the grid */
  @media (min-width: 768px) {
    .md\:flex-row > .nav-button {
      padding-left: 1rem; /* px-4 */
      padding-right: 1rem; /* px-4 */
    }
  }
  @media (min-width: 1024px) {
    .lg\:space-x-6 > .nav-button {
      margin-left: 1.5rem; /* space-x-6 */
      margin-right: 0; /* Override default margin from flex-row */
    }
    .lg\:space-x-6 > .nav-button + .nav-button {
      margin-left: 1.5rem; /* Re-apply margin between siblings */
    }
  }

</style>

<script>
  // Simple JS for theme toggle (Tailwind doesn't handle this automatically)
  document.addEventListener('DOMContentLoaded', () => {
    const themeToggleBtn = document.getElementById('theme-toggle');
    const htmlElement = document.documentElement;

    // Function to set theme based on localStorage or system preference
    const setTheme = (theme) => {
      if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        htmlElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      } else {
        htmlElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      }
    };

    // Initial theme setting
    setTheme(localStorage.getItem('theme'));

    // Toggle theme on button click
    themeToggleBtn.addEventListener('click', () => {
      if (htmlElement.classList.contains('dark')) {
        setTheme('light');
      } else {
        setTheme('dark');
      }
    });
  });
</script>