index.html

Download
html 249 lines 9.3 KB 
  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>λ°˜μ‘ν˜• μ›Ή λ””μžμΈ 예제</title>
  7    <link rel="stylesheet" href="style.css">
  8</head>
  9<body>
 10    <!-- λ„€λΉ„κ²Œμ΄μ…˜ -->
 11    <nav class="navbar">
 12        <div class="logo">ResponsiveDemo</div>
 13        <button class="menu-toggle" id="menuToggle">☰</button>
 14        <ul class="nav-links" id="navLinks">
 15            <li><a href="#">Home</a></li>
 16            <li><a href="#">About</a></li>
 17            <li><a href="#">Services</a></li>
 18            <li><a href="#">Portfolio</a></li>
 19            <li><a href="#">Contact</a></li>
 20        </ul>
 21    </nav>
 22
 23    <main class="container">
 24        <h1>λ°˜μ‘ν˜• μ›Ή λ””μžμΈ 예제</h1>
 25        <p class="lead">μ°½ 크기λ₯Ό μ‘°μ ˆν•˜μ—¬ λ ˆμ΄μ•„μ›ƒ λ³€ν™”λ₯Ό ν™•μΈν•˜μ„Έμš”.</p>
 26
 27        <!-- 1. λ―Έλ””μ–΄ 쿼리 브레이크포인트 ν‘œμ‹œ -->
 28        <section class="section">
 29            <h2>1. ν˜„μž¬ 뷰포트 크기</h2>
 30            <div class="viewport-indicator">
 31                <span class="mobile">πŸ“± Mobile (&lt; 576px)</span>
 32                <span class="tablet">πŸ“± Tablet (576px - 768px)</span>
 33                <span class="small-desktop">πŸ’» Small Desktop (768px - 992px)</span>
 34                <span class="desktop">πŸ–₯️ Desktop (992px - 1200px)</span>
 35                <span class="large">πŸ–₯️ Large (&gt; 1200px)</span>
 36            </div>
 37        </section>
 38
 39        <!-- 2. λ°˜μ‘ν˜• κ·Έλ¦¬λ“œ -->
 40        <section class="section">
 41            <h2>2. λ°˜μ‘ν˜• κ·Έλ¦¬λ“œ</h2>
 42            <div class="responsive-grid">
 43                <div class="grid-item">1</div>
 44                <div class="grid-item">2</div>
 45                <div class="grid-item">3</div>
 46                <div class="grid-item">4</div>
 47                <div class="grid-item">5</div>
 48                <div class="grid-item">6</div>
 49            </div>
 50        </section>
 51
 52        <!-- 3. λ°˜μ‘ν˜• μΉ΄λ“œ -->
 53        <section class="section">
 54            <h2>3. λ°˜μ‘ν˜• μΉ΄λ“œ λ ˆμ΄μ•„μ›ƒ</h2>
 55            <div class="card-grid">
 56                <article class="card">
 57                    <div class="card-image">이미지</div>
 58                    <div class="card-content">
 59                        <h3>μΉ΄λ“œ 제λͺ© 1</h3>
 60                        <p>μΉ΄λ“œ λ‚΄μš©μ΄ 여기에 λ“€μ–΄κ°‘λ‹ˆλ‹€. λ°˜μ‘ν˜•μœΌλ‘œ λ ˆμ΄μ•„μ›ƒμ΄ λ³€κ²½λ©λ‹ˆλ‹€.</p>
 61                        <a href="#" class="btn">μžμ„Ένžˆ</a>
 62                    </div>
 63                </article>
 64                <article class="card">
 65                    <div class="card-image">이미지</div>
 66                    <div class="card-content">
 67                        <h3>μΉ΄λ“œ 제λͺ© 2</h3>
 68                        <p>λ‹€μ–‘ν•œ ν™”λ©΄ ν¬κΈ°μ—μ„œ ν…ŒμŠ€νŠΈν•΄λ³΄μ„Έμš”.</p>
 69                        <a href="#" class="btn">μžμ„Ένžˆ</a>
 70                    </div>
 71                </article>
 72                <article class="card">
 73                    <div class="card-image">이미지</div>
 74                    <div class="card-content">
 75                        <h3>μΉ΄λ“œ 제λͺ© 3</h3>
 76                        <p>λͺ¨λ°”μΌμ—μ„œλŠ” μ„Έλ‘œλ‘œ, λ°μŠ€ν¬νƒ‘μ—μ„œλŠ” κ°€λ‘œλ‘œ λ°°μΉ˜λ©λ‹ˆλ‹€.</p>
 77                        <a href="#" class="btn">μžμ„Ένžˆ</a>
 78                    </div>
 79                </article>
 80            </div>
 81        </section>
 82
 83        <!-- 4. λ°˜μ‘ν˜• νƒ€μ΄ν¬κ·Έλž˜ν”Ό -->
 84        <section class="section">
 85            <h2>4. λ°˜μ‘ν˜• νƒ€μ΄ν¬κ·Έλž˜ν”Ό</h2>
 86            <h1 class="responsive-heading">λ°˜μ‘ν˜• 제λͺ©</h1>
 87            <p class="responsive-text">
 88                이 ν…μŠ€νŠΈμ˜ ν¬κΈ°λŠ” 뷰포트 λ„ˆλΉ„μ— 따라 μžλ™μœΌλ‘œ μ‘°μ ˆλ©λ‹ˆλ‹€.
 89                <code>clamp()</code> ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜λ©΄ μ΅œμ†Œκ°’, μ„ ν˜Έκ°’, μ΅œλŒ€κ°’μ„ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
 90            </p>
 91        </section>
 92
 93        <!-- 5. λ°˜μ‘ν˜• 이미지 -->
 94        <section class="section">
 95            <h2>5. λ°˜μ‘ν˜• 이미지</h2>
 96            <div class="image-container">
 97                <img src="https://via.placeholder.com/1200x600"
 98                     alt="λ°˜μ‘ν˜• 이미지"
 99                     class="responsive-image">
100                <p class="caption">max-width: 100%둜 μ»¨ν…Œμ΄λ„ˆμ— 맞게 μ‘°μ ˆλ©λ‹ˆλ‹€.</p>
101            </div>
102        </section>
103
104        <!-- 6. λ°˜μ‘ν˜• ν…Œμ΄λΈ” -->
105        <section class="section">
106            <h2>6. λ°˜μ‘ν˜• ν…Œμ΄λΈ”</h2>
107            <div class="table-container">
108                <table class="responsive-table">
109                    <thead>
110                        <tr>
111                            <th>이름</th>
112                            <th>이메일</th>
113                            <th>μ „ν™”λ²ˆν˜Έ</th>
114                            <th>μ£Όμ†Œ</th>
115                            <th>κ°€μž…μΌ</th>
116                        </tr>
117                    </thead>
118                    <tbody>
119                        <tr>
120                            <td data-label="이름">홍길동</td>
121                            <td data-label="이메일">hong@example.com</td>
122                            <td data-label="μ „ν™”λ²ˆν˜Έ">010-1234-5678</td>
123                            <td data-label="μ£Όμ†Œ">μ„œμšΈμ‹œ 강남ꡬ</td>
124                            <td data-label="κ°€μž…μΌ">2024-01-15</td>
125                        </tr>
126                        <tr>
127                            <td data-label="이름">κΉ€μ² μˆ˜</td>
128                            <td data-label="이메일">kim@example.com</td>
129                            <td data-label="μ „ν™”λ²ˆν˜Έ">010-2345-6789</td>
130                            <td data-label="μ£Όμ†Œ">μ„œμšΈμ‹œ μ„œμ΄ˆκ΅¬</td>
131                            <td data-label="κ°€μž…μΌ">2024-01-20</td>
132                        </tr>
133                        <tr>
134                            <td data-label="이름">이영희</td>
135                            <td data-label="이메일">lee@example.com</td>
136                            <td data-label="μ „ν™”λ²ˆν˜Έ">010-3456-7890</td>
137                            <td data-label="μ£Όμ†Œ">μ„œμšΈμ‹œ μ†‘νŒŒκ΅¬</td>
138                            <td data-label="κ°€μž…μΌ">2024-02-01</td>
139                        </tr>
140                    </tbody>
141                </table>
142            </div>
143        </section>
144
145        <!-- 7. λ°˜μ‘ν˜• 폼 -->
146        <section class="section">
147            <h2>7. λ°˜μ‘ν˜• 폼</h2>
148            <form class="responsive-form">
149                <div class="form-row">
150                    <div class="form-group">
151                        <label for="firstName">이름</label>
152                        <input type="text" id="firstName" placeholder="이름">
153                    </div>
154                    <div class="form-group">
155                        <label for="lastName">μ„±</label>
156                        <input type="text" id="lastName" placeholder="μ„±">
157                    </div>
158                </div>
159                <div class="form-group">
160                    <label for="email">이메일</label>
161                    <input type="email" id="email" placeholder="example@domain.com">
162                </div>
163                <div class="form-group">
164                    <label for="message">λ©”μ‹œμ§€</label>
165                    <textarea id="message" rows="4" placeholder="λ©”μ‹œμ§€λ₯Ό μž…λ ₯ν•˜μ„Έμš”"></textarea>
166                </div>
167                <button type="submit" class="btn btn-primary">전솑</button>
168            </form>
169        </section>
170
171        <!-- 8. λ―Έλ””μ–΄ 쿼리 예제 μ½”λ“œ -->
172        <section class="section">
173            <h2>8. λ―Έλ””μ–΄ 쿼리 예제 μ½”λ“œ</h2>
174            <pre><code>/* Mobile First 접근법 */
175
176/* κΈ°λ³Έ (λͺ¨λ°”일) μŠ€νƒ€μΌ */
177.container {
178    padding: 10px;
179}
180
181/* νƒœλΈ”λ¦Ώ (576px 이상) */
182@media (min-width: 576px) {
183    .container {
184        padding: 20px;
185    }
186}
187
188/* μž‘μ€ λ°μŠ€ν¬νƒ‘ (768px 이상) */
189@media (min-width: 768px) {
190    .container {
191        max-width: 720px;
192        margin: 0 auto;
193    }
194}
195
196/* λ°μŠ€ν¬νƒ‘ (992px 이상) */
197@media (min-width: 992px) {
198    .container {
199        max-width: 960px;
200    }
201}
202
203/* 큰 ν™”λ©΄ (1200px 이상) */
204@media (min-width: 1200px) {
205    .container {
206        max-width: 1140px;
207    }
208}</code></pre>
209        </section>
210    </main>
211
212    <!-- ν‘Έν„° -->
213    <footer class="footer">
214        <div class="footer-content">
215            <div class="footer-section">
216                <h3>About</h3>
217                <p>λ°˜μ‘ν˜• μ›Ή λ””μžμΈ ν•™μŠ΅ μ˜ˆμ œμž…λ‹ˆλ‹€.</p>
218            </div>
219            <div class="footer-section">
220                <h3>Links</h3>
221                <ul>
222                    <li><a href="#">Privacy Policy</a></li>
223                    <li><a href="#">Terms of Service</a></li>
224                    <li><a href="#">Contact</a></li>
225                </ul>
226            </div>
227            <div class="footer-section">
228                <h3>Follow Us</h3>
229                <div class="social-links">
230                    <a href="#">πŸ“˜</a>
231                    <a href="#">🐦</a>
232                    <a href="#">πŸ“·</a>
233                </div>
234            </div>
235        </div>
236        <div class="footer-bottom">
237            <p>&copy; 2024 λ°˜μ‘ν˜• μ›Ή λ””μžμΈ 예제</p>
238        </div>
239    </footer>
240
241    <script>
242        // λͺ¨λ°”일 메뉴 ν† κΈ€
243        document.getElementById('menuToggle').addEventListener('click', function() {
244            document.getElementById('navLinks').classList.toggle('active');
245        });
246    </script>
247</body>
248</html>