CSS 프레임워크 활용

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 카드 예시</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">카드 제목</h5>
                        <p class="card-text">이것은 Bootstrap 프레임워크를 사용하여 만든 간단한 카드 컴포넌트입니다. 미리 정의된 클래스로 쉽게 스타일링할 수 있습니다.</p>
                        <a href="#" class="btn btn-primary">자세히 보기</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">또 다른 카드</h5>
                        <p class="card-text">Bootstrap의 그리드 시스템을 사용하여 컬럼으로 배치된 다른 카드입니다.</p>
                        <a href="#" class="btn btn-success">구매하기</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

<!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.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
        @theme {
            --color-brand: #3498db;
        }
    </style>
</head>
<body>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="p-6">
                    <h3 class="text-xl font-semibold mb-2 text-gray-900">카드 제목</h3>
                    <p class="text-gray-700 text-base mb-4">이것은 Tailwind CSS 유틸리티 클래스를 조합하여 만든 카드 컴포넌트입니다. CSS를 직접 작성하지 않고 HTML에서 스타일링합니다.</p>
                    <button class="bg-brand hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">
                        더 읽기
                    </button>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="p-6">
                    <h3 class="text-xl font-semibold mb-2 text-gray-900">또 다른 카드</h3>
                    <p class="text-gray-700 text-base mb-4">Tailwind는 높은 자유도를 제공하며, 컴포넌트가 아닌 유틸리티 클래스들의 조합으로 스타일을 구성합니다.</p>
                    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md">
                        구매하기
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 반응형 레이아웃 실습</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <style>
        /* 실습을 위한 간단한 커스텀 스타일 (선택 사항) */
        body {
            background-color: #f8f9fa;
        }
        .header-section {
            background-color: #343a40;
            color: white;
            padding: 40px 0;
            text-align: center;
            margin-bottom: 30px;
        }
        .content-box {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            margin-bottom: 20px;
        }
        .footer-section {
            background-color: #343a40;
            color: white;
            padding: 20px 0;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">내 사이트</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="메뉴 열기">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">서비스</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">포트폴리오</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">문의</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <header class="header-section">
        <div class="container">
            <h1 class="display-4">CSS 프레임워크를 활용한 빠른 개발</h1>
            <p class="lead">Bootstrap의 그리드와 컴포넌트를 사용하여 반응형 웹 페이지를 만들어봅시다.</p>
            <a href="#" class="btn btn-primary btn-lg mt-3">더 알아보기</a>
        </div>
    </header>

    <main class="container">
        <div class="row">
            <div class="col-12 col-md-8">
                <div class="content-box">
                    <h3>메인 콘텐츠 제목</h3>
                    <p>이 영역은 주된 내용이 들어가는 공간입니다. Bootstrap의 반응형 그리드 시스템을 사용하여 다양한 화면 크기에 맞춰 레이아웃이 자동으로 조절됩니다. <code>col-12</code>는 모든 화면에서 12열(꽉 채움)을 의미하며, <code>col-md-8</code>은 중간(md) 화면 크기 이상에서 8열을 차지하도록 합니다.</p>
                    <p>화면 크기를 조절하며 어떻게 레이아웃이 변화하는지 확인해보세요. 작은 화면에서는 사이드바가 아래로 내려올 것입니다.</p>
                    <button class="btn btn-info">정보 버튼</button>
                </div>

                <div class="row">
                    <div class="col-12 col-sm-6">
                        <div class="content-box">
                            <h5>서브 섹션 1</h5>
                            <p>여기서는 <code>row</code> 안에 다시 <code>col-12 col-sm-6</code>을 사용하여 2개의 컬럼을 만들었습니다. 이는 중첩된 그리드 사용 예시입니다.</p>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6">
                        <div class="content-box">
                            <h5>서브 섹션 2</h5>
                            <p>모바일 화면에서는 이 두 컬럼이 세로로 쌓이고, 작은 태블릿 화면 이상에서는 가로로 배치됩니다.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-md-4">
                <div class="content-box">
                    <h4>사이드바</h4>
                    <ul class="list-group">
                        <li class="list-group-item">항목 1</li>
                        <li class="list-group-item">항목 2</li>
                        <li class="list-group-item">항목 3</li>
                    </ul>
                </div>

                <div class="content-box">
                    <h4>최신 소식</h4>
                    <p>프레임워크를 사용하면 디자인과 기능 구현에 드는 노력을 크게 줄일 수 있습니다.</p>
                    <span class="badge bg-primary">새로운 기능</span>
                </div>
            </div>
        </div>
    </main>

    <footer class="footer-section">
        <p>&copy; 2026 CSS 프레임워크 실습. All rights reserved.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>