index.html

Download
html 241 lines 8.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>CSS 기초 예제</title>
  7    <link rel="stylesheet" href="style.css">
  8</head>
  9<body>
 10    <h1>CSS 기초 예제</h1>
 11
 12    <!-- 1. μ„ νƒμž -->
 13    <section class="section">
 14        <h2>1. CSS μ„ νƒμž</h2>
 15
 16        <!-- μš”μ†Œ μ„ νƒμž -->
 17        <p>이것은 p νƒœκ·Έμž…λ‹ˆλ‹€. (μš”μ†Œ μ„ νƒμž)</p>
 18
 19        <!-- 클래슀 μ„ νƒμž -->
 20        <p class="highlight">클래슀 μ„ νƒμžλ‘œ μŠ€νƒ€μΌ 적용 (.highlight)</p>
 21        <p class="highlight warning">μ—¬λŸ¬ 클래슀 적용 (.highlight .warning)</p>
 22
 23        <!-- ID μ„ νƒμž -->
 24        <p id="unique">ID μ„ νƒμžλ‘œ μŠ€νƒ€μΌ 적용 (#unique)</p>
 25
 26        <!-- μžμ† μ„ νƒμž -->
 27        <div class="parent">
 28            <p>λΆ€λͺ¨ μ•ˆμ˜ <span>μžμ† span</span> μš”μ†Œ</p>
 29            <div>
 30                <p>더 κΉŠμ€ <span>μžμ† span</span> μš”μ†Œ</p>
 31            </div>
 32        </div>
 33
 34        <!-- μžμ‹ μ„ νƒμž -->
 35        <div class="container-child">
 36            <p>직접 μžμ‹ p (μžμ‹ μ„ νƒμž)</p>
 37            <div>
 38                <p>μ†μž p (μžμ‹ μ„ νƒμž 미적용)</p>
 39            </div>
 40        </div>
 41
 42        <!-- 인접 ν˜•μ œ μ„ νƒμž -->
 43        <h3>제λͺ© λ‹€μŒ 단락</h3>
 44        <p>인접 ν˜•μ œ μ„ νƒμžλ‘œ μŠ€νƒ€μΌ 적용 (h3 + p)</p>
 45        <p>두 번째 단락 (인접 ν˜•μ œ μ•„λ‹˜)</p>
 46
 47        <!-- 속성 μ„ νƒμž -->
 48        <input type="text" placeholder="ν…μŠ€νŠΈ μž…λ ₯">
 49        <input type="email" placeholder="이메일 μž…λ ₯">
 50        <a href="https://example.com" target="_blank">μ™ΈλΆ€ 링크</a>
 51        <a href="/internal">λ‚΄λΆ€ 링크</a>
 52    </section>
 53
 54    <!-- 2. 가상 클래슀 -->
 55    <section class="section">
 56        <h2>2. 가상 클래슀</h2>
 57
 58        <button class="btn">ν˜Έλ²„ 효과 λ²„νŠΌ</button>
 59        <a href="#" class="link">링크 (λ°©λ¬Έ μ „/ν›„ 색상 닀름)</a>
 60
 61        <ul class="pseudo-list">
 62            <li>첫 번째 ν•­λͺ© (:first-child)</li>
 63            <li>두 번째 ν•­λͺ©</li>
 64            <li>μ„Έ 번째 ν•­λͺ©</li>
 65            <li>λ„€ 번째 ν•­λͺ©</li>
 66            <li>λ‹€μ„― 번째 ν•­λͺ© (:last-child)</li>
 67        </ul>
 68
 69        <ul class="nth-list">
 70            <li>1 (:nth-child(odd))</li>
 71            <li>2 (:nth-child(even))</li>
 72            <li>3</li>
 73            <li>4</li>
 74            <li>5</li>
 75            <li>6</li>
 76        </ul>
 77
 78        <input type="text" class="form-input" placeholder="ν¬μ»€μŠ€ν•˜λ©΄ ν…Œλ‘λ¦¬ λ³€κ²½">
 79    </section>
 80
 81    <!-- 3. 가상 μš”μ†Œ -->
 82    <section class="section">
 83        <h2>3. 가상 μš”μ†Œ</h2>
 84
 85        <p class="quote">이것은 μΈμš©λ¬Έμž…λ‹ˆλ‹€.</p>
 86        <p class="first-letter-example">첫 κΈ€μžκ°€ 크게 ν‘œμ‹œλ©λ‹ˆλ‹€. λ‚˜λ¨Έμ§€ ν…μŠ€νŠΈλŠ” 일반 ν¬κΈ°μž…λ‹ˆλ‹€.</p>
 87        <p class="first-line-example">
 88            첫 번째 쀄이 ꡡ게 ν‘œμ‹œλ©λ‹ˆλ‹€.
 89            두 번째 쀄은 일반 μŠ€νƒ€μΌμž…λ‹ˆλ‹€.
 90            μ°½ 크기λ₯Ό μ‘°μ ˆν•΄λ³΄μ„Έμš”.
 91        </p>
 92    </section>
 93
 94    <!-- 4. λ°•μŠ€ λͺ¨λΈ -->
 95    <section class="section">
 96        <h2>4. λ°•μŠ€ λͺ¨λΈ</h2>
 97
 98        <div class="box-demo">
 99            <div class="box content-box">
100                <strong>content-box</strong><br>
101                width = μ½˜ν…μΈ λ§Œ<br>
102                padding, border 별도
103            </div>
104            <div class="box border-box">
105                <strong>border-box</strong><br>
106                width = 전체<br>
107                padding, border 포함
108            </div>
109        </div>
110
111        <div class="box-model-visual">
112            <div class="margin-area">
113                margin
114                <div class="border-area">
115                    border
116                    <div class="padding-area">
117                        padding
118                        <div class="content-area">content</div>
119                    </div>
120                </div>
121            </div>
122        </div>
123    </section>
124
125    <!-- 5. 색상 -->
126    <section class="section">
127        <h2>5. 색상 ν‘œν˜„ 방법</h2>
128
129        <div class="color-demo">
130            <div class="color-box" style="background-color: red;">red (ν‚€μ›Œλ“œ)</div>
131            <div class="color-box" style="background-color: #ff6347;">#ff6347 (HEX)</div>
132            <div class="color-box" style="background-color: rgb(100, 149, 237);">rgb(100,149,237)</div>
133            <div class="color-box" style="background-color: rgba(255, 0, 0, 0.5);">rgba(255,0,0,0.5)</div>
134            <div class="color-box" style="background-color: hsl(120, 100%, 40%);">hsl(120,100%,40%)</div>
135            <div class="color-box" style="background-color: hsla(240, 100%, 50%, 0.7);">hsla(240,100%,50%,0.7)</div>
136        </div>
137    </section>
138
139    <!-- 6. ν…μŠ€νŠΈ μŠ€νƒ€μΌλ§ -->
140    <section class="section">
141        <h2>6. ν…μŠ€νŠΈ μŠ€νƒ€μΌλ§</h2>
142
143        <p class="text-font">font-family: 'Georgia', serif</p>
144        <p class="text-size">font-size: 1.5em</p>
145        <p class="text-weight">font-weight: bold</p>
146        <p class="text-style">font-style: italic</p>
147        <p class="text-decoration">text-decoration: underline</p>
148        <p class="text-transform-upper">text-transform: uppercase</p>
149        <p class="text-transform-capital">text-transform: capitalize this sentence</p>
150        <p class="text-spacing">letter-spacing: 2px, word-spacing: 10px</p>
151        <p class="text-shadow">text-shadow 효과</p>
152        <p class="text-align-center">text-align: center</p>
153        <p class="text-line-height">
154            line-height: 2<br>
155            쀄 간격이 λ„“μŠ΅λ‹ˆλ‹€.
156        </p>
157    </section>
158
159    <!-- 7. display 속성 -->
160    <section class="section">
161        <h2>7. display 속성</h2>
162
163        <div class="display-demo">
164            <span class="display-block">span을 block으둜</span>
165            <span class="display-block">span을 block으둜</span>
166        </div>
167
168        <div class="display-demo">
169            <div class="display-inline">divλ₯Ό inline으둜</div>
170            <div class="display-inline">divλ₯Ό inline으둜</div>
171        </div>
172
173        <div class="display-demo">
174            <div class="display-inline-block">inline-block 1</div>
175            <div class="display-inline-block">inline-block 2</div>
176            <div class="display-inline-block">inline-block 3</div>
177        </div>
178
179        <div class="display-demo">
180            <span class="display-none">이 ν…μŠ€νŠΈλŠ” 보이지 μ•ŠμŠ΅λ‹ˆλ‹€ (display: none)</span>
181            <span>λ³΄μ΄λŠ” ν…μŠ€νŠΈ</span>
182        </div>
183    </section>
184
185    <!-- 8. μœ„μΉ˜ 지정 -->
186    <section class="section">
187        <h2>8. position 속성</h2>
188
189        <div class="position-demo">
190            <div class="pos-relative">relative (top: 20px, left: 20px)</div>
191        </div>
192
193        <div class="position-demo position-parent">
194            λΆ€λͺ¨ (position: relative)
195            <div class="pos-absolute">absolute μžμ‹</div>
196        </div>
197
198        <div class="pos-fixed-demo">fixed (우츑 ν•˜λ‹¨ κ³ μ •)</div>
199
200        <div class="position-demo sticky-container">
201            <p>μŠ€ν¬λ‘€ν•˜λ©΄ sticky μš”μ†Œκ°€ κ³ μ •λ©λ‹ˆλ‹€.</p>
202            <div class="pos-sticky">sticky μš”μ†Œ</div>
203            <p>Lorem ipsum dolor sit amet...</p>
204            <p>더 λ§Žμ€ μ½˜ν…μΈ ...</p>
205        </div>
206    </section>
207
208    <!-- 9. overflow -->
209    <section class="section">
210        <h2>9. overflow 속성</h2>
211
212        <div class="overflow-demo">
213            <div class="overflow-visible">
214                <strong>overflow: visible</strong><br>
215                λ‚΄μš©μ΄ μƒμž λ°–μœΌλ‘œ λ„˜μΉ©λ‹ˆλ‹€.
216                Lorem ipsum dolor sit amet.
217            </div>
218            <div class="overflow-hidden">
219                <strong>overflow: hidden</strong><br>
220                λ„˜μΉ˜λŠ” λ‚΄μš©μ΄ μž˜λ¦½λ‹ˆλ‹€.
221                Lorem ipsum dolor sit amet.
222            </div>
223            <div class="overflow-scroll">
224                <strong>overflow: scroll</strong><br>
225                μŠ€ν¬λ‘€λ°”κ°€ 항상 ν‘œμ‹œλ©λ‹ˆλ‹€.
226                Lorem ipsum dolor sit amet.
227            </div>
228            <div class="overflow-auto">
229                <strong>overflow: auto</strong><br>
230                ν•„μš”ν•  λ•Œλ§Œ μŠ€ν¬λ‘€λ°” ν‘œμ‹œ.
231                Lorem ipsum dolor sit amet consectetur adipisicing elit.
232            </div>
233        </div>
234    </section>
235
236    <footer>
237        <p>&copy; 2024 CSS 기초 예제</p>
238    </footer>
239</body>
240</html>