grid.html

Download
html 240 lines 8.4 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>CSS Grid ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ</title>
  7    <link rel="stylesheet" href="style.css">
  8</head>
  9<body>
 10    <h1>CSS Grid ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ</h1>
 11
 12    <!-- 1. ๊ธฐ๋ณธ Grid ์ปจํ…Œ์ด๋„ˆ -->
 13    <section class="section">
 14        <h2>1. ๊ธฐ๋ณธ Grid ์ปจํ…Œ์ด๋„ˆ</h2>
 15        <p><code>display: grid</code>์™€ <code>grid-template-columns</code>์œผ๋กœ ์—ด์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.</p>
 16
 17        <div class="grid-container basic-grid">
 18            <div class="grid-item">1</div>
 19            <div class="grid-item">2</div>
 20            <div class="grid-item">3</div>
 21            <div class="grid-item">4</div>
 22            <div class="grid-item">5</div>
 23            <div class="grid-item">6</div>
 24        </div>
 25    </section>
 26
 27    <!-- 2. grid-template-columns -->
 28    <section class="section">
 29        <h2>2. grid-template-columns</h2>
 30
 31        <h3>๊ณ ์ • ํฌ๊ธฐ: 100px 200px 100px</h3>
 32        <div class="grid-container columns-fixed">
 33            <div class="grid-item">1</div>
 34            <div class="grid-item">2</div>
 35            <div class="grid-item">3</div>
 36        </div>
 37
 38        <h3>๋น„์œจ: 1fr 2fr 1fr</h3>
 39        <div class="grid-container columns-fr">
 40            <div class="grid-item">1fr</div>
 41            <div class="grid-item">2fr</div>
 42            <div class="grid-item">1fr</div>
 43        </div>
 44
 45        <h3>repeat(4, 1fr)</h3>
 46        <div class="grid-container columns-repeat">
 47            <div class="grid-item">1</div>
 48            <div class="grid-item">2</div>
 49            <div class="grid-item">3</div>
 50            <div class="grid-item">4</div>
 51        </div>
 52
 53        <h3>minmax(100px, 1fr)</h3>
 54        <div class="grid-container columns-minmax">
 55            <div class="grid-item">1</div>
 56            <div class="grid-item">2</div>
 57            <div class="grid-item">3</div>
 58        </div>
 59
 60        <h3>auto-fill vs auto-fit</h3>
 61        <p>์ฐฝ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•ด๋ณด์„ธ์š”.</p>
 62        <p><strong>auto-fill:</strong> ๋นˆ ๊ณต๊ฐ„ ์œ ์ง€</p>
 63        <div class="grid-container columns-auto-fill">
 64            <div class="grid-item">1</div>
 65            <div class="grid-item">2</div>
 66            <div class="grid-item">3</div>
 67        </div>
 68        <p><strong>auto-fit:</strong> ๋นˆ ๊ณต๊ฐ„ ์ฑ„์›€</p>
 69        <div class="grid-container columns-auto-fit">
 70            <div class="grid-item">1</div>
 71            <div class="grid-item">2</div>
 72            <div class="grid-item">3</div>
 73        </div>
 74    </section>
 75
 76    <!-- 3. grid-template-rows -->
 77    <section class="section">
 78        <h2>3. grid-template-rows</h2>
 79
 80        <div class="grid-container rows-example">
 81            <div class="grid-item">100px</div>
 82            <div class="grid-item">200px</div>
 83            <div class="grid-item">100px</div>
 84        </div>
 85    </section>
 86
 87    <!-- 4. gap -->
 88    <section class="section">
 89        <h2>4. gap (๊ฐ„๊ฒฉ)</h2>
 90
 91        <h3>gap: 20px</h3>
 92        <div class="grid-container gap-example">
 93            <div class="grid-item">1</div>
 94            <div class="grid-item">2</div>
 95            <div class="grid-item">3</div>
 96            <div class="grid-item">4</div>
 97        </div>
 98
 99        <h3>row-gap: 30px, column-gap: 10px</h3>
100        <div class="grid-container gap-separate">
101            <div class="grid-item">1</div>
102            <div class="grid-item">2</div>
103            <div class="grid-item">3</div>
104            <div class="grid-item">4</div>
105        </div>
106    </section>
107
108    <!-- 5. ์•„์ดํ…œ ๋ฐฐ์น˜: grid-column, grid-row -->
109    <section class="section">
110        <h2>5. ์•„์ดํ…œ ๋ฐฐ์น˜: grid-column, grid-row</h2>
111
112        <div class="grid-container placement-example">
113            <div class="grid-item span-col-2">col: 1 / 3 (2์นธ)</div>
114            <div class="grid-item">3</div>
115            <div class="grid-item span-row-2">row: 2 / 4 (2์นธ)</div>
116            <div class="grid-item">5</div>
117            <div class="grid-item">6</div>
118            <div class="grid-item span-both">2x2</div>
119        </div>
120    </section>
121
122    <!-- 6. grid-template-areas -->
123    <section class="section">
124        <h2>6. grid-template-areas</h2>
125        <p>์˜์—ญ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜์—ฌ ์ง๊ด€์ ์œผ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.</p>
126
127        <div class="grid-container areas-example">
128            <header class="grid-item area-header">Header</header>
129            <nav class="grid-item area-sidebar">Sidebar</nav>
130            <main class="grid-item area-main">Main Content</main>
131            <footer class="grid-item area-footer">Footer</footer>
132        </div>
133    </section>
134
135    <!-- 7. justify-items, align-items -->
136    <section class="section">
137        <h2>7. justify-items, align-items</h2>
138
139        <h3>justify-items: center, align-items: center</h3>
140        <div class="grid-container items-center">
141            <div class="grid-item small">1</div>
142            <div class="grid-item small">2</div>
143            <div class="grid-item small">3</div>
144            <div class="grid-item small">4</div>
145        </div>
146
147        <h3>justify-items: stretch (๊ธฐ๋ณธ๊ฐ’)</h3>
148        <div class="grid-container items-stretch">
149            <div class="grid-item">1</div>
150            <div class="grid-item">2</div>
151            <div class="grid-item">3</div>
152            <div class="grid-item">4</div>
153        </div>
154    </section>
155
156    <!-- 8. justify-content, align-content -->
157    <section class="section">
158        <h2>8. justify-content, align-content</h2>
159        <p>Grid ์ปจํ…Œ์ด๋„ˆ ๋‚ด์—์„œ ์ „์ฒด ๊ทธ๋ฆฌ๋“œ์˜ ์œ„์น˜๋ฅผ ์กฐ์ •ํ•ฉ๋‹ˆ๋‹ค.</p>
160
161        <div class="grid-container content-center">
162            <div class="grid-item small">1</div>
163            <div class="grid-item small">2</div>
164            <div class="grid-item small">3</div>
165            <div class="grid-item small">4</div>
166        </div>
167    </section>
168
169    <!-- 9. ๊ฐœ๋ณ„ ์•„์ดํ…œ ์ •๋ ฌ -->
170    <section class="section">
171        <h2>9. justify-self, align-self (๊ฐœ๋ณ„ ์ •๋ ฌ)</h2>
172
173        <div class="grid-container self-example">
174            <div class="grid-item" style="justify-self: start;">start</div>
175            <div class="grid-item" style="justify-self: center;">center</div>
176            <div class="grid-item" style="justify-self: end;">end</div>
177            <div class="grid-item" style="align-self: start;">top</div>
178            <div class="grid-item" style="align-self: center;">middle</div>
179            <div class="grid-item" style="align-self: end;">bottom</div>
180        </div>
181    </section>
182
183    <!-- 10. ์‹ค์ „ ์˜ˆ์ œ: ๊ฐค๋Ÿฌ๋ฆฌ -->
184    <section class="section">
185        <h2>10. ์‹ค์ „ ์˜ˆ์ œ: ์ด๋ฏธ์ง€ ๊ฐค๋Ÿฌ๋ฆฌ</h2>
186
187        <div class="gallery">
188            <div class="gallery-item large">1 (large)</div>
189            <div class="gallery-item">2</div>
190            <div class="gallery-item">3</div>
191            <div class="gallery-item tall">4 (tall)</div>
192            <div class="gallery-item">5</div>
193            <div class="gallery-item wide">6 (wide)</div>
194            <div class="gallery-item">7</div>
195            <div class="gallery-item">8</div>
196        </div>
197    </section>
198
199    <!-- 11. ์‹ค์ „ ์˜ˆ์ œ: ๋Œ€์‹œ๋ณด๋“œ -->
200    <section class="section">
201        <h2>11. ์‹ค์ „ ์˜ˆ์ œ: ๋Œ€์‹œ๋ณด๋“œ ๋ ˆ์ด์•„์›ƒ</h2>
202
203        <div class="dashboard">
204            <header class="dash-header">Header</header>
205            <nav class="dash-nav">Navigation</nav>
206            <main class="dash-main">
207                <div class="widget">Widget 1</div>
208                <div class="widget">Widget 2</div>
209                <div class="widget">Widget 3</div>
210                <div class="widget wide-widget">Widget 4 (wide)</div>
211            </main>
212            <aside class="dash-aside">Sidebar</aside>
213            <footer class="dash-footer">Footer</footer>
214        </div>
215    </section>
216
217    <!-- 12. ๋ฐ˜์‘ํ˜• Grid -->
218    <section class="section">
219        <h2>12. ๋ฐ˜์‘ํ˜• Grid</h2>
220        <p>์ฐฝ ํฌ๊ธฐ๋ฅผ ์กฐ์ ˆํ•˜๋ฉด ์—ด ์ˆ˜๊ฐ€ ์ž๋™์œผ๋กœ ๋ณ€๊ฒฝ๋ฉ๋‹ˆ๋‹ค.</p>
221
222        <div class="grid-container responsive-grid">
223            <div class="grid-item">1</div>
224            <div class="grid-item">2</div>
225            <div class="grid-item">3</div>
226            <div class="grid-item">4</div>
227            <div class="grid-item">5</div>
228            <div class="grid-item">6</div>
229            <div class="grid-item">7</div>
230            <div class="grid-item">8</div>
231        </div>
232    </section>
233
234    <footer>
235        <p>&copy; 2024 CSS Grid ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ</p>
236        <p><a href="flexbox.html">โ† Flexbox ๋ ˆ์ด์•„์›ƒ ์˜ˆ์ œ ๋ณด๊ธฐ</a></p>
237    </footer>
238</body>
239</html>