#wrap {
            width: 100%;
            height: 600px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .container {
            width: 400px;
            height: 400px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        #table {
            border-collapse: collapse;
        }

        td {
            border: solid 1px #ff6d00;
            width: 80px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            font-weight: bold;
            font: normal 3em "Larsseit";
        }

        .result {
            font: normal 1.5em "Larsseit";
            text-align: center;
            margin: 30px 0;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
        }
                    
                

                    let turn = 'X';
        let trIdx;
        let tdIdx;
        let win;

        function test() {
            win = false;
            //가로줄 검사
            if (td3[trIdx][0].textContent === turn &&
                td3[trIdx][1].textContent === turn &&
                td3[trIdx][2].textContent === turn) {
                win = true;
            }
            //세로줄 검사
            if (td3[0][tdIdx].textContent === turn &&
                td3[1][tdIdx].textContent === turn &&
                td3[2][tdIdx].textContent === turn) {
                win = true;
            }
            //대각선 검사
            if (td3[0][0].textContent === turn &&
                td3[1][1].textContent === turn &&
                td3[2][2].textContent === turn) {
                win = true;
            }
            if (td3[0][2].textContent === turn &&
                td3[1][1].textContent === turn &&
                td3[2][0].textContent === turn) {
                win = true;
            }
        }

        function victory(tie) {
            if (tie) { // 칸이 다 찼는데 동점이면
                result.textContent = 'Tie';
            } else {
                result.textContent = 'Congratulation! ' + turn + ' win.';

                //게임 초기화			
                win = false;
                setTimeout(function() {
                    td3.forEach(function(tr) {
                        tr.forEach(function(td) {
                            td.textContent = '';
                            td.style.color = '#ff6d00';
                        })
                    })
                    result.textContent = '';
                }, 1500);
            }
        }

        function callBack(e) {
            e.preventDefault();
            if (e.target.textContent === '') { //클릭한 칸이 빈칸이면
                e.target.textContent = turn;
                if (e.target.textContent === 'X') {
                    e.target.style.color = '#ff6d00';
                }
                trIdx = tr3.indexOf(e.target.parentNode);
                tdIdx = td3[trIdx].indexOf(e.target);
                //줄이 완성되었는지 테스트
                test();
                //모든칸이 다 찼는가?
                let emptyTd = [];
                td3.forEach(function(tr) {
                    tr.forEach(function(td) {
                        emptyTd.push(td);
                    })
                })
                emptyTd = emptyTd.filter(function(td) {
                    return !td.textContent
                })
                //'',0,NaN,undefined,null,false 등 칸이 빈칸일 경우
                if (win) {
                    victory();
                } else if (emptyTd.length === 0) {
                    victory(true);
                } else {
                    setTimeout(function(e) { //컴퓨터의 턴 (빈칸고르기)
                        turn = 'O';
                        let selectTd = emptyTd[Math.floor(Math.random() * emptyTd.length)];
                        selectTd.textContent = 'O';
                        selectTd.style.color = '#0000d6';

                        trIdx = tr3.indexOf(selectTd.parentNode);
                        tdIdx = td3[trIdx].indexOf(selectTd);

                        //줄이 완성되었나 테스트
                        test();

                        //승리하면
                        if (win) {
                            victory();
                        }

                        //턴넘기기
                        turn = 'X';
                    }, 1000);
                }
            } else {
                //빈칸이 아닐경우, 아무일도 일어나지 않음
            }
        }

        // 틱택토칸 만들기 
        let tr3 = [];
        let td3 = [];
        let body = document.body;
        let wrap = document.querySelector('#wrap');
        let container = document.querySelector('.container');
        let table = document.querySelector('#table');
        let result = document.createElement('div');
        result.classList.add('result');

        for (let i = 0; i < 3; i++) {
            let tr = document.createElement('tr');
            tr3.push(tr); // 데이터) tr3 = [tr,tr,tr]
            td3.push([]); // 데이터) td3 = [[],[],[]]
            for (let j = 0; j < 3; j++) {
                let td = document.createElement('td');
                td3[i].push(td);
                tr.appendChild(td);
                td.addEventListener('click', callBack);
            }
            table.appendChild(tr);
        }
        body.appendChild(wrap);
        wrap.appendChild(container);
        container.appendChild(table);
        wrap.appendChild(result);