JS_BOM(3)

KH/JavaScript

JS_BOM(3)

오늘의 진 2022. 9. 27. 14:33

Navigator : 브라우저에 관한 정보 알려줌

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>브라우저 정보 출력</title>
    <style>
        span {
            color: blue;
        }

        div {
            border-color: yellowgreen;
            border-style: solid;
            padding: 5px;
        }
    </style>
    <script>
        function printNavigator() {
            var text = "<span>appCodeName</span>: " + navigator.appCodeName + "<br>";
            text += "<span>appName</span>" + navigator.appName + "<br>";
            text += "<span>appVersion</span>" + navigator.appVersion + "<br>";
            text += "<span>platform</span>" + navigator.platform + "<br>";
            text += "<span>product</span>" + navigator.product + "<br>";
            text += "<span>userAgent</span>" + navigator.userAgent + "<br>";
            text += "<span>vendor</span>" + navigator.vendor + "<br>";
            text += "<span>language</span>" + navigator.language + "<br>";
            text += "<span>onLine</span>" + navigator.onLine + "<br>";
            text += "<span>cookoeEnabled</span>" + navigator.cookieEnabled + "<br>";
            text += "<span>javaEnabled()</span>" + navigator.javaEnabled() + "<br>";
            text += "<span>plugins.length</span>" + navigator.plugins.length + "<br>";

            for (j = 0; j < navigator.plugins.length; j++) {
                text += "plugins" + j + " : <blockquote>";
                text += navigator.plugins[j].name + "<br>";
                text += "<i>" + navigator.plugins[j].description + "</i><br>";
                text += navigator.plugins[j].filename + "</blockquote>";
            }

            <!--div 태그에 출력--> 
            var div = document.getElementById("div");
            div.innerHTML = text;


        }
    </script>
</head>

<body onload="printNavigator()">
    <h3>브라우저에 관한 정보 출력</h3>
    아래에 이 브라우저에 관한 여러 정보를 출력합니다.
    <hr>
    <p></p>
    <div id="div"></div>
</body>
</html>

Screen : 화면에 관한 정보 알려줌

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>스크린에 관한 정보 출력</title>
    <script>
        function printScreen() {
            var text = "availHeight : " + screen.availHeight + "<br>"; // 실제 쓸수있는 높이
            text += "availWidth : " + screen.availWidth + "<br>";
            text += "colorDepth : " + screen.colorDepth + "<br>";
            text += "pixelDepth" + screen.pixelDepth + "<br>";
            text += "height : " + screen.height + "<br>"; // 화면 전체 높이
            text += "width : " + screen.width + "<br>";

            document.getElementById("div").innerHTML = text;
        }
    </script>
</head>

<body onload="printScreen()">
    <h3>스크린 장치에 관한 정보</h3>
    <hr>
    <div id="div"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>산수를 풀어 봅시다</title>
    <style>
        td{
            padding-left: 10px;
            padding-right: 20px;
        }
    </style>
    <script>
        function calc(){
            var total = 0;
            var qArray = document.getElementsByClassName("question");
            var aArray = document.getElementsByClassName("answer");
            for(i=0; i<qArray.length; i++){
                var question = qArray[i].innerHTML;
                var correctAnswer = eval(question); // 수식을 계산한 값
                var userAnswer = aArray[i].value; // 유저가 answer에 입력한 답
                if(userAnswer == "" || isNaN(userAnswer)){ //답이 없거나 문자가 입력된 경우
                    total += 0;
                    qArray[i].style.textDecoration = "line-through"; // 답 입력하지 않거나 문자 입력시 줄을 그음 
                } else if(parseInt(userAnswer) == correctAnswer){// 답이 맞는 경우
                    total += 20;
                    qArray[i].style.textDecoration = "none";
                    // 혹시 이전에 틀린 문제에 다시 답을 하고 채점 버튼을 누르는 경우를 위해
                    // 원래 none 상태이므로 맞췄을 경우는 그냥 두어도 되지만 만약 틀린 문제(줄그어진것)을
                    //다시 풀어서 맞춘경우는 줄을 없애주어야 함으로 이 경우를 위해 none를 주었다. 
                } else{ // 답이 틀린 경우
                    total += 0;
                    qArray[i].style.textDecoration = "line-through";
                }
            }

            document.getElementById("score").innerHTML = total;
        }
    </script>
</head>
<body>
    <h3>산수 문제를 풀어 봅시다.</h3>
    수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.
    <hr>
    <form>
        <table>
            <tr><td class="question">5 * 6</td><td><input class="answer" type="text" size="8"></td></tr>
            <tr><td class="question">7 + 5 * 3</td><td><input class="answer" type="text" size="8"></td></tr>
            <tr><td class="question">23 * 2</td><td><input class="answer" type="text" size="8"></td></tr>
            <tr><td class="question">35 - 7</td><td><input class="answer" type="text" size="8"></td></tr>
            <tr><td class="question">50*3</td><td><input class="answer" type="text" size="8"></td></tr>

            <tr>
                <td><button type="button" onclick="calc()">채점</button></td>
                <td><span id="score">0</span></td>
            </tr>
        </table>
    </form>

</body>
</html>

random()을 이용한 산수 계산 만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>산수를 풀어 봅시다2</title>
    <style>
        td {
            padding-left: 10px;
            padding-right: 20px;
        }
    </style>
    <script>
        function calc() {
            var total = 0;
            var qArray = document.getElementsByClassName("question");
            var aArray = document.getElementsByClassName("answer");
            for (i = 0; i < qArray.length; i++) {
                var question = qArray[i].innerHTML;
                var correctAnswer = Math.floor(eval(question)); // 수식을 계산한 값
                var userAnswer = aArray[i].value; // 유저가 answer에 입력한 답
                if (userAnswer == "" || isNaN(userAnswer)) { //답이 없거나 문자가 입력된 경우
                    total += 0;
                    qArray[i].style.textDecoration = "line-through"; // 답 입력하지 않거나 문자 입력시 줄을 그음 
                } else if (parseInt(userAnswer) == correctAnswer) {// 답이 맞는 경우
                    total += 1;
                    qArray[i].style.textDecoration = "none";
                    // 혹시 이전에 틀린 문제에 다시 답을 하고 채점 버튼을 누르는 경우를 위해
                } else { // 답이 틀린 경우
                    total += 0;
                    qArray[i].style.textDecoration = "line-through";
                }
            }

            document.getElementById("score").innerHTML = total;
        }

        function makeExpression() {
            var qArray = document.getElementsByClassName("question");
            var aArray = document.getElementsByClassName("answer");
            for (i = 0; i < qArray.length; i++) {
                var number1 = Math.floor(Math.random() * 20) + 1;
                var number2 = Math.floor(Math.random() * 20) + 1; // 결코 0이 될수 없음
                var op = Math.floor(Math.random() * 4); // 0,1,2,3 이 가능함 (연산자를 만들기 위한 난수)
                var operator = "+"; // 디폴트
                switch (op) {
                    case 0: operator = "+"; break;
                    case 1: operator = "-"; break;
                    case 2: operator = "*"; break;
                    case 3: operator = "/"; break;
                }
                qArray[i].innerHTML = number1 + operator + number2;
                qArray[i].style.textDecoration = "none";

                aArray[i].value = ""; // 답 입력난 지우기 
                document.getElementById("score").innerHTML = 0; // 맞은 문항 수 지우기 

            }
        }
    </script>
</head>

<body onload="makeExpression()">
    <h3>산수 문제를 풀어 봅시다.</h3>
    자동으로 문제가 만들어 집니다. 답 입력 후 채점 버튼을 누르세요.
    다시 버튼을 누르면 새로운 문제가 출력됩니다. 나누기 결과는 정수입니다.
    <hr>
    <form>
        <table>
            <tr>
                <td class="question"></td>
                <td><input class="answer" type="text" size="8"></td>
            </tr>
            <tr>
                <td class="question"></td>
                <td><input class="answer" type="text" size="8"></td>
            </tr>
            <tr>
                <td class="question"></td>
                <td><input class="answer" type="text" size="8"></td>
            </tr>
            <tr>
                <td class="question"></td>
                <td><input class="answer" type="text" size="8"></td>
            </tr>
            <tr>
                <td><button type="button" onclick="calc()">채점</button></td>
                <td><span id="score">0</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" onclick="makeExpression()">다시</button>
                </td>
            </tr>
        </table>
    </form>

</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById</title>
<script>
    function process1(){
        var ob = document.getElementById("txt").value; // 입력창의 내용을 가져와서
        document.getElementById("view1").innerText=ob; // div에 뿌림
        document.getElementById("txt").value=""; //뿌리고 나서 입력창은 비워줌 
    }
    function process2(){
        var ob = document.getElementById("txt").value;
        document.getElementById("view2").innerText=ob;
        document.getElementById("txt").value="";
    }
</script>
</head>
<body>
    <input type="text" id="txt" size="20" name="text">
    <input type="button" value="출력1" onclick="process1()">
    <input type="button" value="출력2" onclick="process2()">

    <br><br><br>
    <div id="view1"></div>
    <div id="view2"></div>
</body>
</html>

getElementById

이벤트 리스너 추가하기/ 제거하기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>표준 이벤트 모델</title>
    <style>
        #box {
            background-color: orange;
            border: 1px solid;
            padding: 5px;
            color: white;
            width: 300px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="box">
        <button onclick="addEventHandler()" id="startbtn">시작</button>
        <button onclick="removeHandler()" id="stopbtn">정지</button>
    </div>
    <p id="demo"></p>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML
            = " x좌표: " + event.x + "&nbsp;&nbsp;&nbsp;Y좌표: " + event.y;
        }

        function addEventHandler() {
            document.getElementById("box").addEventListener("mousemove", myFunction); // 이벤트 추가 

        }
        function removeHandler() {
            document.getElementById("box").removeEventListener("mousemove", myFunction); // 이벤트 제거 
            //addEventListener()를 사용해 이벤트를 추가한 경우 
            //반대로 이를 제거할 수 있으며 이때 removeEventListener()를 사용한다.
        }
    </script>
</body>
</html>

표준 이벤트 모델

History

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history 객체</title>
<script>
    document.write("방문한 페이지 수 : "+history.length);
</script>
</head>
<body>
    <h3>History 객체 연습 (첫번째 페이지)</h3>
    <a href="test1.html">다음 페이지</a><br><br>
    <input type="button" value="이전으로11" onclick="javascript:history.back()">
    <input type="button" value="다음으로11" onclick="history.forward()">
    <input type="button" value="처음으로11" onclick="history.go(-2)"> <!--두단계 전으로 되돌아간다-->
</body>
</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>사이트 접속</title>
    <script>
        function loadSite(select) {
            var index = select.selectedIndex;
            var site = select.options[index].value;
            window.open(site, "", "left=500,top=400,width=500,height=400");
        }
    </script>
</head>

<body>
    <h3>옵션 선택으로 사이트 접속</h3>
    옵션 선택마다 새 윈도우에 접속 합니다.
    <hr>
    <form>
        <p>접속할 사이트</p>
        <select onchange="loadSite(this)">
            <option value="http://www.daum.net">다음</option>
            <option value="http://www.google.com">구글</option>
            <option value="http://www.oracle.com">오라클</option>
        </select>
    </form>
</body>

</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5를 학습하는 사이트</title>
<script>
    function printWelcom(){
        var newWin = window.open("","","width=200,height=80");
        newWin.document.write("접속 감사합니다. !!!!");
        newWin.document.close();
    }
</script>
</head>
<body onload="printWelcom()" >
    <h3>HTML5</h3>
<hr>
<p>
    HTML5를 학습하는 사이트 입니다. 
    여기서 HTML3,CSS3,자바스크립트를 배울 수 있습니다. 
</p>
</body>
</html>

setTimeout

어떤코드를바로 실행하지않고일정시간기다린후실행해야하는경우가있다.
이럴때는자바스크립트의 setTimeout()함수를사용한다.
setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고,
두번째인자로지연시간을밀리초(ms) 단위로 받는다.

setTimeout : 일정시간이 지난 후에 함수가 실행되도록 처리하는 역할
clearTimeout : setTimeout을 취소하는 역할

[변수] = setTimeout(함수명, 함수가 실행될 시간(ms 단위));
clearTimeout([변수]);

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>window 객체</title>
    <script>
        window.onload = function () {
            var win = window.open('win_1.html', '', 'width=300,height=200');
            win.moveTo(100, 100);
            window.setTimeout(function () { win.close(); }, 5000); // 5초가 지난 후 win창이 사라짐 
        }
    // 어떤 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우가 있다.
    // 이럴때는 자바스크립트의 setTimeout() 함수를 사용한다.
    // setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고,
    // 두번째 인자로 지연시간을 밀리초(ms) 단위로 받는다. 
    </script>
</head>

<body>
    <hr size="5" color="red">
    setTimeout Test <br>
    setTimeout Test <br>
    setTimeout Test <br>
    <hr size="5" color="green">
</body>
</html>

win_1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setTimeout() 함수 Test</title>
</head>
<body bgcolor="green">
    즐거운 하루 <br>
    시원한 여름 날씨 <br>
    아름다운 코스모스 

</body>
</html>

5초가 지나면 초록색 창이 사라짐 (닫힘)

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>setTimeout()으로 웹 페이지 자동 연결</title>
</head>

<body>

    <h3>이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다.</h3>
    <hr>
    <img id="img" src="../images/naver.gif" onmouseover="startTime(5000)" onmousemove="cancelTimer()">
    <script>
        var timerID = null;
        function startTime(time) {
            //타이머 시작 
            timerID = window.setTimeout("load('http://www.naver.com')", time);

            //툴팁 메세지
            document.getElementById("img").title = "타이머 작동 시작 ...";
        }
        function calcelTimer() {
            if (timerID != null)
                window.clearTimeout(timerID); // 타이머 중단
        }
        function load(url) {
            window.location = url; // 윈도우에 url 사이트 로드 
        }
    </script>
</body>
</html>

setTimeout()으로 웹 페이지 자동 연결

이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다.

시계만들기

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>setTimeout() / clearTimeout()</title>
    <style>
        div {
            display: inline-block;
            width: 7em;
            border: 2px solid darkgray;
            background-color: aliceblue;
        }
    </style>

    <script>
        function startClock() {
            var clock = document.getElementById("clock");
            timeout(clock);
        }
        function timeout(obj) {
            var current = new Date();
            obj.innerHTML = current.toLocaleTimeString();
            setTimeout("timeout(clock)", 1000); // 1초 후 timeout()호출
        }
    </script>
</head>

<body onload="startClock()">
    <h3>div 태그에 시계 만들기</h3>
    <hr size="5" color="red">
    <div id="clock"></div>
</body>
</html>

1초마다 호출된다 . 즉 1초마다 화면이 바뀌면서 1초후 시간이 계속해서 표시된다.

이러한 방식으로 시간이 흘러가는 시계를 구현하였다.

location

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>location 객체 </title>
    <script>
        var t = new Date();
        document.write(t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds());

        setInterval(function () {
            location.reload(); // 현재 문서를 리로드 하는 방법
        }, 1000);

        // 웹페이지의 특정 부분을 주기적으로 업데이트 해줘야 하거나, 
        // 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데 이럴때는 
        // 자바스크립트의 setInterval() 함수를 사용할 수 있다. 
        // setInterval()함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을떄 사용한다. 

        document.write("<br>현재 문서의 주소는 " + location.href + "입니다.");
        console.log(location.toString(), location.href);

        document.write("<br>현재 문서의 호스트 이름은 " + location.hostname + "입니다.");
        document.write("<br>현재 문서의 파일 경로명은 " + location.pathname + "입니다.");

    // Location 객체는 문서의 주소와 관련된 객체로 Window 객체의 프로퍼티이다.
    // 이 객체를 이용해서 윈도우의 문서 URL을 변경 할 수 있고, 문서의 위치와 관련해서 다양한 정보를 얻을 수 있다. 
    </script>
</head>
<body>
</body>
</html>

setIntervar

setInterval : 일정한 시간 마다 함수가 실행되도록 처리하는 역할
clearInterval : setInterval로 설정한 작업을 취소하는 역할

[변수] = setInterval(함수명, 함수가 실행될 시간(ms));
clearInterval([변수]);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setInterval()로 텍스트 회전</title>
</head>
<body>

    <h3>텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.</h3>
    <hr>
    <div><span id="span" style="background-color: yellow;">돌고 또 도는 텍스트입니다.</span></div>

    <script>
        var span = document.getElementById("span");
        var timerID = setInterval("doRotate()",200); //200ms 주기로 doRotate() 호출
        var flag = true;
        if(flag){
            span.onclick=function(e){ // 마우스 클릭 이벤트 리스너 
                clearInterval(timerID); // 타이머 해제, 문자열 회전 중단
                flag = false;
            }
        }else{
                timerID = setInterval("doRotate()",200);
                flag = true;
            }
            function doRotate(){
                var str = span.innerHTML;
                var firstChar = str.substr(str.length-1,1);
                var remains = str.substr(0,str.length-1);
                str = firstChar+remains;
                span.innerHTML = str; // str 텍스트를 span 객체에 출력
            }
    </script>
</body>
</html>

setInterval()로 텍스트 회전

텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.

돌고 또 도는 텍스트입니다.

이렇게 하면 글자가 반대 방향으로 돌아감

function doRotate(){
                var str = span.innerHTML;
                var firstChar = str.substr(0,1);
                var remains = str.substr(1,str.length-1);
                str = remains+firstChar;
                span.innerHTML = str; // str 텍스트를 span 객체에 출력
            }

doRotate() 해석

  function doRotate(){
                var str = span.innerHTML; // 내부 글자를 가져옴 
                var firstChar = str.substr(str.length-1,1); // 맨뒤의 글자를 분리 
                var remains = str.substr(0,str.length-1); // 맨뒤를 제외한 나머지 글자들
                str = firstChar+remains; // 맨뒤글 + 나머지글 형식으로 str을 변경
                //즉 글자가돌아서 맨뒤의 것이 앞으로 온 것 처럼 만들어줌
                span.innerHTML = str; // str 텍스트를 span 객체에 출력
            }
            //맨뒤의 것을 앞으로 옮기는 이러한 것을 계속해서 반복해서 
            //글자가 도는 것 처럼 보이게 만들어줌

Scroll

scrollBy ( X , Y )	scrollTo ( X, Y)
상대적 위치 현재 위치를 기준으로 파라미터 값으로 넘겨준 만큼 이동한다. 창을 상대적인 좌표로 스크롤 한다.	절대적인 위치 왼쪽 상단 모서리 부터 시작하여 전체 스크롤 값을 기준으로 파라미터로 넘겨준 값으로 이동한다. (현재 위치가 아닌 상단 모서리를 기준으로 한다.) 창을 절대적인 좌표로 이동한다.
scrollBy(가로스크롤 값, 세로 스크롤 값)	scrollTo (가로 스크롤 위치 값, 세로 스크롤 위치 값 );
window.scrollBy(100,100); 현재 스크롤 위치에서 x스크롤을 100만큼, y 스크롤을 100만큼 이동시킨다.	window.scrollTo(100,100);

위 메소드 들의 차이점은 기준점, 그리고 절대적인지 상대적인지에 대해 차이가 있다.

자동스크롤

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>웹 페이지의 자동 스크롤</title>
    <script>
        function startScroll(interval) {
            setInterval("autoScroll()", interval);
        }
        function autoScroll() {
            window.scrollBy(0, 10); // 10픽셀 위로 스크롤(좌우, 상하) (위>>아래)
        }

    </script>
</head>

<body onload="startScroll(1000)">
    <h3>자동 스크롤 페이지</h3>
    <hr>
    <h3>꿈길(이동순)</h3>
    꿈길에<br>
    발자취가 있다면<br>
    님의 집 창밖<br>
    그 돌계단 길이 이미 오래 전에<br>
    모래가 되고 말았을 거예요<br><br>
    하지만<br>
    그 꿈길에서 자취 없다 하니<br>
    나는 그것이 정말 서러워요<br><br>
    이 밤도<br>
    나는 님의 집 창밖<br>
    그 돌계단 위에 홀로 서서<br>
    혹시라도 님의 목소리가 들려올까<br>
    고개 숙이고 엿들어요<br>
</body>

</html>

window.print()

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>웹 페이지 프린트</title>
</head>

<body>
    <h3>웹 페이지 프린트</h3>
    <hr>
    <p>window 객체의 print() 메소드를 호출하면 window 객체에 담겨있는 웹 페이지가 프린트 됩니다.</p>
    <p>
        <a href="javascript:window.print()">이곳을 누르면 프린트 됩니다.</a>
    </p>
    <div id="logoDiv">
        <img src="../images/apple.png" alt="이미지 없음">
    </div>
    <p><input type="button" value="프린트" onclick="window.print()"></p>
</body>

</html>

버튼과 링크 둘다에 window.print()를 달아주었다.

'KH > JavaScript' 카테고리의 다른 글

HTML5 와 Canvas (0)	2022.09.28
JS_JSON / location (0)	2022.09.28
JS_BOM(2) screen 객체, history 객체 (0)	2022.09.26
JS_BOM (Browser Object Model) (1)	2022.09.26
JS_DOM(Document Object Model) (1)	2022.09.22

현재글JS_BOM(3)

차곡차곡

오라클, 알고리즘, IT, 화면개발, HTTP, HTML, oracle, 개발, 코딩, 개발자, 백준, Java, Coding, FOR, 코딩테스트, 국비지원, 데이터베이스, CSS, 자바, 반복문,

Today :
Yesterday :

일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

차곡차곡

JS_BOM(3)

이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다.

텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.

'KH > JavaScript' 카테고리의 다른 글

'KH/JavaScript'의 다른글

티스토리툴바

JS_BOM(3)

이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다.

텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.

'KH > JavaScript' 카테고리의 다른 글

'KH/JavaScript'의 다른글

관련글

티스토리툴바