## 프로젝트 개요
모던 웹 앱에서 자주 사용되는 뉴스 피드 UI를 Tailwind CSS와 HTML로 구현하고, 반응형 디자인과 확장성을 고려한 실용적인 예제입니다. 뷰포트 크기에 따라 레이아웃을 자동 조정하는 기능과, 다양한 콘텐츠 유형을 지원할 수 있도록 설계했습니다.
## 주요 기능
- 반응형 뉴스 피드 레이아웃 (모바일/태블릿/데스크탑)
- 스크롤 시 애니메이션 효과 적용
- 다양한 콘텐츠 타입(텍스트, 이미지, 동영상) 지원
- CSS 변수를 활용한 테마 변환 기능
- 사용자 지정 레이아웃 확장 포인트 제공
## 사용 방법
1. HTML 파일에 Tailwind CSS CDN을 추가합니다.
2. 본 예제의 CSS와 HTML 코드를 복사하여 붙여넣습니다.
3. 브라우저에서 실행해보세요.
4. `theme-toggle` 버튼을 눌러 테마를 변경할 수 있습니다.
## 확장 가능성
- 이미지/동영상 콘텐츠 유형 추가
- 사용자 프로필 섹션 도입
- 뉴스 피드 무한 스크롤 기능 구현
🎨 Tailwind CSS로 반응형 뉴스 피드 구현 및 확장성 설계
CSS 예제
중급
난이도
예제
타입
11/11
등록일
Tailwind CSS로 반응형 뉴스 피드 구현 및 확장성 설계
중급태그
코드 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS 뉴스 피드</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root {
--theme-color: #3b82f6;
}
.dark {
--theme-color: #93c5fd;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white">
<div class="container mx-auto px-4 py-8">
<button
id="theme-toggle"
class="mb-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
테마 전환
</button>
<div id="news-feed" class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<!-- 뉴스 항목 예시 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition-transform hover:-translate-y-1">
<h2 class="text-xl font-bold mb-2">제목 1</h2>
<p class="mb-4">이것은 뉴스 피드의 첫 번째 항목입니다. 반응형 디자인을 고려한 텍스트입니다.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-400">2023년 10월 1일</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded">
읽기
</button>
</div>
</div>
<!-- 뉴스 항목 예시 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transition-transform hover:-translate-y-1">
<h2 class="text-xl font-bold mb-2">제목 2</h2>
<p class="mb-4">이것은 뉴스 피드의 두 번째 항목입니다. 반응형 디자인을 고려한 텍스트입니다.</p>
<div class="flex justify-between items-center">
<span class="text-sm text-gray-500 dark:text-gray-400">2023년 10월 2일</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded">
읽기
</button>
</div>
</div>
</div>
</div>
<script>
const themeToggle = document.getElementById('theme-toggle');
const newsFeed = document.getElementById('news-feed');
themeToggle.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
// 테마 색 변경을 위한 CSS 변수 업데이트 (필요시 추가)
});
</script>
</body>
</html>
등록일: 2025년 11월 11일 02:37
언어 정보
언어
CSS
카테고리
Web
인기도
#9
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요