타임라인 구성 요소
교육용 플랫폼용으로 설계된 복잡하고 반응형 타임라인 구성 요소로, 흙색과 완전한 다크 모드를 지원하는 깔끔하고 미니멀한 타이포그래피 중심의 디자인이 특징입니다.
HTML 코드
<div class="font-sans antialiased text-gray-800 bg-gray-50 dark:bg-gray-900 dark:text-gray-100 min-h-screen py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-4xl sm:text-5xl font-extrabold mb-12 text-center leading-tight dark:text-gray-50">
Learning Journey Timeline
</h1>
<div class="space-y-16">
<!-- Timeline Item 1 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 1</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Foundations of Web Development</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Dive into the essential building blocks of the web. Learn HTML for structuring content and CSS for styling beautiful web pages. Discover browser developer tools and basic responsive design principles.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">HTML5</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CSS3</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Responsive Design</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=1" alt="Foundations" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 40 hours
</div>
</div>
</div>
<!-- Timeline Item 2 -->
<div class="relative flex flex-col md:flex-row-reverse items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pl-8 md:text-left">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 2</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Interactive Frontend with JavaScript</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Unlock dynamic behavior using JavaScript. Master DOM manipulation, event handling, and asynchronous programming. Build interactive user interfaces and enhance user experience.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">JavaScript ES6+</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">DOM Manipulation</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">APIs (Fetch)</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=2" alt="Frontend Interactive" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 50 hours
</div>
</div>
</div>
<!-- Timeline Item 3 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 3</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Modern Frameworks: Building SPAs</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Step into the world of Single Page Applications. Learn the fundamentals of popular JavaScript frameworks like React, Vue, or Angular. Understand component-based architecture and state management.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">React/Vue/Angular</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Component Architecture</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">State Management</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=3" alt="Modern Frameworks" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 60 hours
</div>
</div>
</div>
<!-- Timeline Item 4 -->
<div class="relative flex flex-col md:flex-row-reverse items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pl-8 md:text-left">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 4</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Backend Fundamentals & Databases</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Explore server-side development. Learn to build RESTful APIs with Node.js and Express. Understand database concepts with SQL (PostgreSQL) and NoSQL (MongoDB) and connect them to your frontend.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-start">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Node.js</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Express.js</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">SQL/NoSQL DBs</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pr-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=4" alt="Backend & Databases" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-end">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 70 hours
</div>
</div>
</div>
<!-- Timeline Item 5 -->
<div class="relative flex flex-col md:flex-row items-center">
<div class="hidden md:block absolute left-1/2 -translate-x-1/2 w-0.5 bg-yellow-700 dark:bg-yellow-600 h-full -top-6 bottom-auto"></div>
<div class="hidden md:block absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10"></div>
<div class="md:flex-1 md:pr-8 md:text-right">
<p class="text-sm text-yellow-700 dark:text-yellow-600 font-semibold mb-1">Level 5</p>
<h2 class="text-2xl font-bold mb-3 text-yellow-900 dark:text-yellow-50">Deployment & DevOps Basics</h2>
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
Take your applications live. Understand deployment strategies, CI/CD pipelines, and cloud platforms like Netlify/Vercel for frontend and Heroku/AWS for backend. Learn basic version control with Git.
</p>
<div class="mt-4 flex flex-wrap gap-2 justify-center md:justify-end">
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Git & GitHub</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">CI/CD</span>
<span class="px-3 py-1 bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 text-xs font-medium rounded-full">Cloud Deployment</span>
</div>
</div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="w-5 h-5 rounded-full bg-yellow-700 dark:bg-yellow-600 border-2 border-white dark:border-gray-900 z-10 md:hidden"></div>
<div class="w-px h-16 bg-yellow-700 dark:bg-yellow-600 md:hidden my-4"></div>
<div class="md:flex-1 md:pl-8 mt-6 md:mt-0">
<img src="https://picsum.photos/400/250?random=5" alt="Deployment & DevOps" class="rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 object-cover w-full h-auto">
<div class="mt-4 text-sm text-gray-600 dark:text-gray-400 flex items-center justify-center md:justify-start">
<svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Approx. 35 hours
</div>
</div>
</div>
<!-- Example of the final step, could be a certificate or portfolio link -->
<div class="relative flex flex-col items-center justify-center mt-12">
<div class="absolute left-1/2 -ml-2.5 w-5 h-5 rounded-full bg-green-700 dark:bg-green-600 border-2 border-white dark:border-gray-900 z-10"></div>
<h2 class="text-3xl font-bold text-center text-green-700 dark:text-green-500 mt-8 mb-6">
Your Journey Completed!
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 text-center max-w-2xl mx-auto">
Congratulations on completing your full-stack web development journey! You are now equipped with the skills to build and deploy modern web applications. Continue exploring and building!
</p>
<button class="mt-8 px-6 py-3 bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 text-white font-semibold rounded-lg shadow-md transition-colors duration-300">
Explore More Courses
</button>
</div>
</div>
</div>
</div>