๋กœ์ผ“๐Ÿพ
article thumbnail

https://www.youtube.com/watch?v=_GxpmQ54aqg

 

์›น ๊ฐœ๋ฐœ์ž๋ถ„๋“ค์ด๋ผ๋ฉด DOM ์ด๋ผ๋Š” ๋‹จ์–ด ํ•œ๋ฒˆ์ •๋„๋Š” ๋“ค์–ด๋ณด์…จ์„ ๊ฒ๋‹ˆ๋‹ค. ์ € ์—ญ์‹œ DOM์— ๋Œ€ํ•ด ๋งŽ์ด ๋“ค์–ด๋ดค์ง€๋งŒ ์ •ํ™•ํžˆ ๊ทธ๊ฒŒ ๋ฌด์—‡์ธ์ง€๋Š” ์ž˜๋ชฐ๋ž์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๊ถ๊ธˆํ•œ ๊ฒƒ์— ๋Œ€ํ•ด ๊ทธ๋ƒฅ ๋„˜์–ด๊ฐ€๋ฉด ์•ˆ๋˜๊ธฐ์— DOM์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด๋ดค์Šต๋‹ˆ๋‹ค.

 

Aldev๋‹˜, Code Playground๋‹˜, WIT๋ธ”๋กœ๊ทธ์˜ ๊ณ ์šฐ์˜๋‹˜์˜ ์ž๋ฃŒ๋ฅผ ํ† ๋Œ€๋กœ ์ œ๊ฐ€ ์ดํ•ดํ•œ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ •๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค. ํ‹€๋ฆฐ ๋ถ€๋ถ„์ด ์žˆ์œผ๋ฉด ์–ธ์ œ๋“  ์ง€์ ํ•ด์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฐธ๊ณ ํ•œ ๋ธ”๋กœ๊ทธ๋“ค์— ๋Œ€ํ•ด์„œ๋Š” ํ•˜๋‹จ์— ์ฃผ์†Œ๋ฅผ ๋‚จ๊น๋‹ˆ๋‹ค.

 

 

l BOM ๊ณผ DOM

 

 

์›น์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์›น ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ์„œ๋น„์Šค ๋ฉ๋‹ˆ๋‹ค. ํฌ๋กฌ, ์‚ฌํŒŒ๋ฆฌ, ์ต์Šคํ”Œ๋กœ์–ด ๋“ฑ์ด ๋ฐ”๋กœ ์›น ๋ธŒ๋ผ์šฐ์ € ์ž…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” html ์ฝ์–ด๋“ค์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ธŒ๋ผ์šฐ์ €์™€ ๊ด€๋ จ๋œ ๊ฐ์ฒด๋“ค์˜ ์ง‘ํ•ฉ์„ ๋ธŒ๋ผ์šฐ์ € ๊ฐ์ฒด ๋ชจ๋ธ ์ฆ‰, BOM(Browser Object Model) ์ž…๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” BOM ์„ ์ด์šฉํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์˜ ๊ธฐ๋Šฅ๋“ค์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๊ทธ๋ ‡๋‹ค๋ฉด DOM์€ ๋ฌด์—‡์ผ๊นŒ์š”?

 

DOM์€ BOM์˜ ํ•˜์œ„ ๊ฐ์ฒด๋กœ์จ DOM์€ Document Object Model์˜ ์•ฝ์ž์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ์ง์—ญํ•˜๊ฒŒ ๋˜๋ฉด ๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์—ฌ๊ธฐ์„œ ๋ฌธ์„œ ๊ฐ์ฒด๋ž€ ๋ฌด์—‡์ผ๊นŒ์š”?(๋ฐ‘์—์„œ ๋” ์ž์„ธํžˆ ๋‹ค๋ฃน๋‹ˆ๋‹ค)

 

์›๋ณธ html ๋ฌธ์„œ์˜ <html>, <body>, <div> ๋“ฑ์ด ๋ฌธ์„œ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํƒœ๊ทธ๋“ค์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์กฐ์ž‘์„ ํ• ์ˆ˜ ์žˆ๋Š”๋ฐ ๋ฌธ์„œ ๊ฐ์ฒด๋ž€ ์‰ฝ๊ฒŒ ๋งํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ˆ˜์ • ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.

 

๋”ฐ๋ผ์„œ DOM์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์›๋ณธ html ๋ฌธ์„œ๋ฅผ ํ•ด์„ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

 

DOM์€ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ์›น ํŽ˜์ด์ง€๋ฅผ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ œ๊ณตํ•ด์ฃผ๋Š” ์š”์†Œ์ผ ๋ฟ์ž…๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•ด ์›น ํŽ˜์ด์ง€๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ์ธ ์—„๋ฐ€ํžˆ ๋งํ•˜๋ฉด ์›๋ณธ html ๋ฌธ์„œ๋ฅผ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ DOM์„ ์กฐ์ž‘ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

 

| DOM์€ ํŠธ๋ฆฌ๊ตฌ์กฐ๋ฅผ ๊ฐ–๋Š”๋‹ค

 

 

DOM์€ ํŠธ๋ฆฌ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. DOM์„ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด์„  ํŠธ๋ฆฌ๊ตฌ์กฐ์— ๋Œ€ํ•ด ์•Œ๊ณ ์žˆ์–ด์•ผ ํ•˜๋ฏ€๋กœ ์งง๊ฒŒ ์•Œ์•„๋ณด๊ณ  ๊ฐ€๊ฒ ์Šต๋‹ˆ๋‹ค. 

 

 

 

 

์ถœ์ฒ˜ im-developer.tistory.com/100

 

 

Document Node : ์ตœ์ƒ์œ„์— ์กด์žฌํ•˜๋ฉฐ DOM ํŠธ๋ฆฌ์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ Root Node์ž…๋‹ˆ๋‹ค.

Element Node : h1, div ๊ฐ™์€ ํƒœ๊ทธ๋ฅผ ๊ฐ€๋ฅดํ‚ค๋Š” Node์ž…๋‹ˆ๋‹ค.

Attribute Node : class, id , href, style ๊ฐ™์€ ์†์„ฑ์— ๋Œ€ํ•œ Node์ž…๋‹ˆ๋‹ค.

Text Node : <div> Hello World </div> ์—์„œ ํƒœ๊ทธ ์•ˆ์— ๊ฐ์‹ธ์ง„ Hello Wolrd๋ฅผ ๊ฐ€๋ฅดํ‚ค๋Š” Node์ž…๋‹ˆ๋‹ค.

 

 

l ๊ทธ๋Ÿผ ๋ฌธ์„œ๊ฐ์ฒด๋ž€ ๋ฌด์—‡์ผ๊นŒ์š”?

 

 

๋ฌธ์„œ๊ฐ์ฒด๋Š” 2๊ฐ€์ง€ ์ข…๋ฅ˜๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ •์ ์ธ ๋ฌธ์„œ ๊ฐ์ฒด์™€ ๋™์ ์ธ ๋ฌธ์„œ ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค. ์ •์ ์ธ ๋ฌธ์„œ ๊ฐ์ฒด๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ƒ์„ฑํ•œ ์›๋ณธ html ๋ฌธ์„œ์— ์žˆ๋Š” ๊ฐ์ฒด๋“ค์ด๊ณ  ๋™์ ์ธ ๋ฌธ์„œ ๊ฐ์ฒด๋Š” ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

var div = document.createElement('div');

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>DOM์— ๋Œ€ํ•œ ์„ค๋ช…์ž…๋‹ˆ๋‹ค.</h1>

    <script>
        var div = document.createElement('div');
        var divText = document.createTextNode('๋™์ ์ธ ๋ฌธ์„œ๊ฐ์ฒด์ž…๋‹ˆ๋‹ค.');
        div.appendChild(divText);
        document.body.appendChild(div);
    </script>
</body>
</html>

 

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ body ํƒœ๊ทธ์˜ ์ž์‹์œผ๋กœ div ํƒœ๊ทธ๋ฅผ ์ƒ์„ฑ์‹œ์ผœ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. h1 ๋ณด๋‹ค ์•„๋ž˜์— ์Šคํฌ๋ฆฝํŠธ ํƒœ๊ทธ๋ฅผ ํ•ด์ฃผ์…”์•ผ ์˜ค๋ฅ˜์—†์ด ๋ฉ๋‹ˆ๋‹ค. ์ด์œ ๋Š” ์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด ํŠน์ง•์„ ์‚ดํŽด๋ณด์‹œ๋ฉด ๋ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

<h1> ๋Š” ์›๋ณธ html ๋ฌธ์„œ์— ์žˆ๋˜ ๊ฐ์ฒด์˜€์œผ๋ฏ€๋กœ ์ •์  ๋ฌธ์„œ๊ฐ์ฒด์ด๊ณ , ์ƒˆ๋กœ ์ƒ๊ธด <div> ํƒœ๊ทธ๋Š” ์Šคํฌ๋ฆฝํŠธ๋กœ ์ƒ์„ฑํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋™์  ๋ฌธ์„œ๊ฐ์ฒด๊ฐ€ ๋ฉ๋‹ˆ๋‹ค.

 

 

 

 

l DOM์€ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

 

 

DOM์— ๋Œ€ํ•ด ๋” ๊นŠ์ˆ™ํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ถ„๋ช… ์•ž์—์„œ DOM์€ ๋ฌธ์„œ๊ฐ์ฒด ๋ชจ๋ธ์ด๋ผ ํ•˜์˜€๊ณ , ๋ฌธ์„œ๊ฐ์ฒด๋Š” <html>, <div> ๊ฐ™์€ ํƒœ๊ทธ๋ผ๊ณ  ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๊ฒƒ๋“ค์„ ํ•จ๋ถ€๋กœ ๋ฌธ์„œ๊ฐ์ฒด ์ฆ‰, DOM ์ด๋ผ๊ณ  ๋‹จ์ •์ง€์œผ๋ฉด ์•ˆ๋ฉ๋‹ˆ๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” ์›น ํŽ˜์ด์ง€๋Š” DOM + CSSOM ์˜ ์กฐํ•ฉ์ธ ๋ Œ๋”ํŠธ๋ฆฌ๋ผ๋Š” ๊ฒƒ์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. DOM์ด ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค.

 

diplay:none; ์ด๋ผ๋Š” ์†์„ฑ์„ ์˜ˆ๋กœ ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

<p style="display:none"> Hello </p> ์„ ๋งŒ๋“ค๊ฒŒ ๋˜๋ฉด ์šฐ๋ฆฌ๋Š” ์Šคํƒ€์ผ ์†์„ฑ ๋•Œ๋ฌธ์— <p> ํƒœ๊ทธ๋ฅผ ํ™”๋ฉด์—์„œ ๋ณผ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์—ฌ์ „ํžˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ <p> ํƒœ๊ทธ ์กฐ์ž‘์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. 

 

 

 

DOM

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(()=>{
            $('p').attr('style','display:none');
        });
    </script>
</head>
<body>
    <h1>DOM์€ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด์ด๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค!!</h1>
    <p>ํ™”๋ฉด์— ๋ณด์ด๋Š” ๊ฒƒ์€ ๋ Œ๋”ํŠธ๋ฆฌ์ž…๋‹ˆ๋‹ค.</p>
</body>
</html>

 

์œ„ ์ฝ”๋“œ๋Š” DOM ์ž…๋‹ˆ๋‹ค.

 

 

๋ Œ๋”ํŠธ๋ฆฌ

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(()=>{
           
        });
    </script>
</head>
<body>
    <h1>DOM์€ ๋ธŒ๋ผ์šฐ์ €์— ๋ณด์ด๋Š” ๊ฒƒ์ด ์•„๋‹™๋‹ˆ๋‹ค!!</h1>
    <p>ํ™”๋ฉด์— ๋ณด์ด๋Š” ๊ฒƒ์€ ๋ Œ๋”ํŠธ๋ฆฌ์ž…๋‹ˆ๋‹ค.</p>
</body>
</html>

 

 

์œ„ ์ฝ”๋“œ๋Š” ๋ Œ๋”ํŠธ๋ฆฌ์— ๋ Œ๋”๋ง ๋˜๋Š” ์‹ค์งˆ์ ์ธ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

 

 

 

 

๋ Œ๋”ํŠธ๋ฆฌ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ <p> ํƒœ๊ทธ์˜ ์Šคํƒ€์ผ ์†์„ฑ์„ display:none ์œผ๋กœ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณด์ด์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

 

DOM๊ณผ ๋ Œ๋”ํŠธ๋ฆฌ์˜ ์ฐจ์ด๋ฅผ ์ดํ•ดํ•˜์…จ์œผ๋ฆฌ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

 

 

ใ…ฃ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์—์„œ ๋ณด์ด๋Š” Elements ๋Š” ๊ณผ์—ฐ DOM ์ผ๊นŒ์š”?

 

 

๊ฐœ๋ฐœ์ž ๋„๊ตฌ ๋‹จ์ถ•ํ‚ค๋Š” F12

 

display:none ์ž„์—๋„ <p> ํƒœ๊ทธ๊ฐ€ ๋ณด์ธ๋‹ค๊ณ  ํ•ด์„œ DOM ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹ค ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ์—ญ์‹œ DOM ์€ ์•„๋‹™๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ DOM๊ณผ ๊ฐ€์žฅ ๊ฐ€๊น๋‹ค๊ณ  ํ• ์ˆ˜๋Š” ์žˆ์Šต๋‹ˆ๋‹ค.

 

์—ญ์‹œ ์˜ˆ๋ฅผ ๋ณด์—ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

 

๊ฐ€์ƒ์š”์†Œ ::after ์™€ ::before ๋Š” CSSOM์œผ๋กœ๋งŒ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. DOM ๊ฐ์ฒด๋ฅผ ๊ฐ–์ง€ ์•Š์Šต๋‹ˆ๋‹ค. DOM์€ ์˜ค์ง ์›๋ณธ html ๋ฌธ์„œ๋กœ๋ถ€ํ„ฐ ๋นŒ๋“œ๋˜๊ณ , ์š”์†Œ์— ์ ์šฉํ•˜๋Š” ์Šคํƒ€์ผ์„ ํฌํ•จํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๊ฐ€์ƒ์š”์†Œ๋Š” DOM์ด ์•„๋‹Œ๋ฐ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์—์„œ๋Š” ๊ฐ€์ƒ์š”์†Œ๋ฅผ ๋ณด์‹ค์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

 

after ๊ฐ€์ƒ์š”์†Œ๊ฐ€ ๋ณด์ž…๋‹ˆ๋‹ค.

 

๊ฐ€์ƒ์š”์†Œ๊ฐ€ ์™œ DOM์ด ์•„๋‹Œ์ง€๋Š” ์‰ฝ๊ฒŒ ๋ˆˆ์น˜์ฑ„์…จ์„๊ฑฐ๋ผ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

 

์•ž์—์„œ ๋ถ„๋ช… DOM์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด๋ฅผ ํ•ด์„ํ•œ๋‹ค. ๋ผ๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ after์™€ before๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์กฐ์ž‘์ด ๋ถˆ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

 

after ์™€ before๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์ˆ˜์ •ํ•  ์ˆ˜ ์—†์–ด DOM์ด ์•„๋‹Œ๋ฐ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์—์„œ๋Š” after์™€ before์ด ๋ณด์ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋„ DOM์€ ์•„๋‹™๋‹ˆ๋‹ค.

 

 

์š”์•ฝ

 

  • DOM์€ ํ•ญ์ƒ ์œ ํšจํ•œ html ํ˜•์‹์ด๋‹ค.
  • JS์— ์˜ํ•ด ์กฐ์ž‘๊ฐ€๋Šฅํ•˜์—ฌ์•ผ ํ•œ๋‹ค.
  • ๊ฐ€์ƒ์š”์†Œ๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค. (ex : before, after)
  • ๋ณด์ด์ง€ ์•Š๋Š” ์š”์†Œ๋ฅผ ํฌํ•จํ•œ๋‹ค. (ex : display : none)
  • ๋ Œ๋”ํŠธ๋ฆฌ์™€ DOM์€ ๋‹ค๋ฅด๋‹ค.
  • ๊ฐœ๋ฐœ์ž ๋„๊ตฌ์˜ Element ์™€ DOM์€ ๋‹ค๋ฅด๋‹ค.

 

 

์ฐธ๊ณ  ์‚ฌ์ดํŠธ

wit.nts-corp.com/2019/02/14/5522

d2.naver.com/helloworld/59361

im-developer.tistory.com/100

m.blog.naver.com/magnking/220972680805

 

 

์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

์งˆ๋ฌธ์€ ์–ธ์ œ๋‚˜ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค.

 

"๋‚œ ๋ฐ˜๋“œ์‹œ ๋ฐฑ์—”๋“œ ์™•์ด ๋ ๊ฑฐ์•ผ"

 

profile on loading

Loading...