index.html

Download
html 251 lines 8.7 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>DOM ์กฐ์ž‘๊ณผ ์ด๋ฒคํŠธ ์˜ˆ์ œ</title>
  7    <style>
  8        body {
  9            font-family: 'Segoe UI', Tahoma, sans-serif;
 10            max-width: 900px;
 11            margin: 0 auto;
 12            padding: 20px;
 13            background: #f5f5f5;
 14        }
 15        h1 { text-align: center; color: #333; }
 16        h2 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
 17        .section {
 18            background: white;
 19            padding: 20px;
 20            margin: 20px 0;
 21            border-radius: 8px;
 22            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 23        }
 24        button {
 25            background: #3498db;
 26            color: white;
 27            border: none;
 28            padding: 10px 20px;
 29            border-radius: 4px;
 30            cursor: pointer;
 31            margin: 5px;
 32        }
 33        button:hover { background: #2980b9; }
 34        .demo-box {
 35            padding: 20px;
 36            margin: 10px 0;
 37            border: 2px dashed #ddd;
 38            border-radius: 8px;
 39            min-height: 100px;
 40        }
 41        .highlight { background: #f1c40f; }
 42        .output {
 43            background: #2c3e50;
 44            color: #2ecc71;
 45            padding: 15px;
 46            border-radius: 4px;
 47            font-family: monospace;
 48            margin: 10px 0;
 49        }
 50        input, select {
 51            padding: 10px;
 52            margin: 5px;
 53            border: 1px solid #ddd;
 54            border-radius: 4px;
 55        }
 56        .event-log {
 57            max-height: 200px;
 58            overflow-y: auto;
 59            font-size: 0.9em;
 60        }
 61        .card {
 62            display: inline-block;
 63            width: 100px;
 64            height: 100px;
 65            margin: 10px;
 66            background: #3498db;
 67            color: white;
 68            display: flex;
 69            align-items: center;
 70            justify-content: center;
 71            border-radius: 8px;
 72            cursor: pointer;
 73            transition: transform 0.3s, background 0.3s;
 74        }
 75        .card:hover { transform: scale(1.1); }
 76        .card.selected { background: #e74c3c; }
 77        #dragContainer {
 78            display: flex;
 79            gap: 20px;
 80            min-height: 150px;
 81        }
 82        .drop-zone {
 83            flex: 1;
 84            min-height: 120px;
 85            border: 3px dashed #bdc3c7;
 86            border-radius: 8px;
 87            padding: 10px;
 88            display: flex;
 89            flex-wrap: wrap;
 90            align-content: flex-start;
 91        }
 92        .drop-zone.drag-over {
 93            border-color: #3498db;
 94            background: #ecf0f1;
 95        }
 96        .draggable {
 97            width: 60px;
 98            height: 60px;
 99            background: #9b59b6;
100            color: white;
101            display: flex;
102            align-items: center;
103            justify-content: center;
104            border-radius: 8px;
105            cursor: move;
106            margin: 5px;
107        }
108    </style>
109</head>
110<body>
111    <h1>DOM ์กฐ์ž‘๊ณผ ์ด๋ฒคํŠธ ์˜ˆ์ œ</h1>
112
113    <!-- 1. ์š”์†Œ ์„ ํƒ -->
114    <div class="section">
115        <h2>1. ์š”์†Œ ์„ ํƒ</h2>
116        <div id="selectDemo">
117            <p id="uniqueId">ID๋กœ ์„ ํƒ๋œ ์š”์†Œ</p>
118            <p class="myClass">ํด๋ž˜์Šค๋กœ ์„ ํƒ 1</p>
119            <p class="myClass">ํด๋ž˜์Šค๋กœ ์„ ํƒ 2</p>
120            <div class="container">
121                <span data-info="test">data ์†์„ฑ์œผ๋กœ ์„ ํƒ</span>
122            </div>
123        </div>
124        <button onclick="demoSelection()">์„ ํƒ ํ…Œ์ŠคํŠธ</button>
125        <div class="output" id="selectOutput"></div>
126    </div>
127
128    <!-- 2. ์š”์†Œ ์ƒ์„ฑ ๋ฐ ์ถ”๊ฐ€ -->
129    <div class="section">
130        <h2>2. ์š”์†Œ ์ƒ์„ฑ ๋ฐ ์ถ”๊ฐ€</h2>
131        <input type="text" id="newItemInput" placeholder="์ƒˆ ํ•ญ๋ชฉ ์ž…๋ ฅ">
132        <button onclick="addItem()">ํ•ญ๋ชฉ ์ถ”๊ฐ€</button>
133        <button onclick="addItemBefore()">๋งจ ์•ž์— ์ถ”๊ฐ€</button>
134        <button onclick="clearItems()">์ „์ฒด ์‚ญ์ œ</button>
135        <ul id="itemList" class="demo-box">
136            <li>๊ธฐ์กด ํ•ญ๋ชฉ 1</li>
137            <li>๊ธฐ์กด ํ•ญ๋ชฉ 2</li>
138        </ul>
139    </div>
140
141    <!-- 3. ์Šคํƒ€์ผ ๋ฐ ํด๋ž˜์Šค ์กฐ์ž‘ -->
142    <div class="section">
143        <h2>3. ์Šคํƒ€์ผ ๋ฐ ํด๋ž˜์Šค ์กฐ์ž‘</h2>
144        <div id="styleBox" class="demo-box" style="transition: all 0.3s;">
145            ์Šคํƒ€์ผ ์กฐ์ž‘ ๋Œ€์ƒ
146        </div>
147        <button onclick="changeColor()">์ƒ‰์ƒ ๋ณ€๊ฒฝ</button>
148        <button onclick="toggleHighlight()">ํ•˜์ด๋ผ์ดํŠธ ํ† ๊ธ€</button>
149        <button onclick="addBorder()">ํ…Œ๋‘๋ฆฌ ์ถ”๊ฐ€</button>
150        <button onclick="resetStyle()">์ดˆ๊ธฐํ™”</button>
151    </div>
152
153    <!-- 4. ์†์„ฑ ์กฐ์ž‘ -->
154    <div class="section">
155        <h2>4. ์†์„ฑ ์กฐ์ž‘</h2>
156        <img id="demoImage" src="https://via.placeholder.com/200x100?text=Image+1" alt="๋ฐ๋ชจ ์ด๋ฏธ์ง€" style="border-radius: 8px;">
157        <br><br>
158        <button onclick="changeImage(1)">์ด๋ฏธ์ง€ 1</button>
159        <button onclick="changeImage(2)">์ด๋ฏธ์ง€ 2</button>
160        <button onclick="changeImage(3)">์ด๋ฏธ์ง€ 3</button>
161        <br>
162        <input type="text" id="altInput" placeholder="alt ํ…์ŠคํŠธ ์ž…๋ ฅ">
163        <button onclick="changeAlt()">alt ๋ณ€๊ฒฝ</button>
164        <p>ํ˜„์žฌ alt: <span id="currentAlt"></span></p>
165    </div>
166
167    <!-- 5. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ -->
168    <div class="section">
169        <h2>5. ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ</h2>
170        <div id="eventBox" class="demo-box" style="cursor: pointer; user-select: none;">
171            ์ด ์˜์—ญ์—์„œ ๋‹ค์–‘ํ•œ ์ด๋ฒคํŠธ๋ฅผ ํ…Œ์ŠคํŠธํ•˜์„ธ์š”.
172            <br>ํด๋ฆญ, ๋”๋ธ”ํด๋ฆญ, ๋งˆ์šฐ์Šค ์ด๋™, ํ‚ค๋ณด๋“œ ์ž…๋ ฅ ๋“ฑ
173        </div>
174        <div class="output event-log" id="eventLog"></div>
175        <button onclick="clearEventLog()">๋กœ๊ทธ ์ดˆ๊ธฐํ™”</button>
176    </div>
177
178    <!-- 6. ์ด๋ฒคํŠธ ์œ„์ž„ -->
179    <div class="section">
180        <h2>6. ์ด๋ฒคํŠธ ์œ„์ž„ (Event Delegation)</h2>
181        <p>๊ฐœ๋ณ„ ์š”์†Œ์— ์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•˜์ง€ ์•Š๊ณ , ๋ถ€๋ชจ์—์„œ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.</p>
182        <div id="cardContainer" class="demo-box">
183            <div class="card" data-id="1">1</div>
184            <div class="card" data-id="2">2</div>
185            <div class="card" data-id="3">3</div>
186            <div class="card" data-id="4">4</div>
187            <div class="card" data-id="5">5</div>
188        </div>
189        <p>์„ ํƒ๋œ ์นด๋“œ: <span id="selectedCard">์—†์Œ</span></p>
190        <button onclick="addCard()">์นด๋“œ ์ถ”๊ฐ€</button>
191    </div>
192
193    <!-- 7. ํผ ์ด๋ฒคํŠธ -->
194    <div class="section">
195        <h2>7. ํผ ์ด๋ฒคํŠธ</h2>
196        <form id="demoForm">
197            <input type="text" id="nameInput" placeholder="์ด๋ฆ„" required>
198            <input type="email" id="emailInput" placeholder="์ด๋ฉ”์ผ" required>
199            <select id="countrySelect">
200                <option value="">๊ตญ๊ฐ€ ์„ ํƒ</option>
201                <option value="kr">ํ•œ๊ตญ</option>
202                <option value="us">๋ฏธ๊ตญ</option>
203                <option value="jp">์ผ๋ณธ</option>
204            </select>
205            <button type="submit">์ œ์ถœ</button>
206        </form>
207        <div class="output" id="formOutput">ํผ ๋ฐ์ดํ„ฐ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
208    </div>
209
210    <!-- 8. ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ -->
211    <div class="section">
212        <h2>8. ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ</h2>
213        <input type="text" id="keyInput" placeholder="์—ฌ๊ธฐ์— ํƒ€์ดํ•‘ํ•˜์„ธ์š”" style="width: 300px;">
214        <div class="output" id="keyOutput">ํ‚ค ์ •๋ณด๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
215    </div>
216
217    <!-- 9. ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ -->
218    <div class="section">
219        <h2>9. ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ</h2>
220        <div id="dragContainer">
221            <div class="drop-zone" id="zone1">
222                <div class="draggable" draggable="true" id="drag1">1</div>
223                <div class="draggable" draggable="true" id="drag2">2</div>
224                <div class="draggable" draggable="true" id="drag3">3</div>
225            </div>
226            <div class="drop-zone" id="zone2"></div>
227        </div>
228    </div>
229
230    <!-- 10. ์Šคํฌ๋กค ์ด๋ฒคํŠธ -->
231    <div class="section">
232        <h2>10. ์Šคํฌ๋กค ์ด๋ฒคํŠธ</h2>
233        <div id="scrollBox" style="height: 200px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px;">
234            <div style="height: 600px;">
235                <p>์Šคํฌ๋กคํ•˜์„ธ์š”!</p>
236                <p style="position: sticky; top: 0; background: #3498db; color: white; padding: 10px;">
237                    ์Šคํฌ๋กค ์œ„์น˜: <span id="scrollPosition">0</span>px
238                </p>
239                <p>Lorem ipsum dolor sit amet...</p>
240                <p>๋” ๋งŽ์€ ์ฝ˜ํ…์ธ ...</p>
241                <p>๊ณ„์† ์Šคํฌ๋กค...</p>
242                <p>๊ฑฐ์˜ ๋...</p>
243                <p style="margin-top: 400px;">๋!</p>
244            </div>
245        </div>
246    </div>
247
248    <script src="script.js"></script>
249</body>
250</html>