성격유형 검사

aiden·2023년 11월 3일

JS, HTML/CSS

목록 보기
10/17

개발 환경 세팅

브라우저 : 크롬
코드 에디터 : VScode

코드 에디터 실행
1. index.html 생성 //웹의 뼈대
2. style.css 생성 //html을 꾸며줌. html 파일과 연결
3. Bootstrap(jQuery 포함) 연결 //css를 작성하지 않아도 쉽게 화면을 꾸며줌. js 라이브러리인 jQuery 포함
4. Live Server 설치 //익스텐션 개발한 것을 편하게 로컬 환경에서 실행 가능.

Open Folder -> 새로운 폴더(mbtitest) -> 선택
new file -> index.html -> ! + tab 작성 시 html 양식 자동 완성
new file -> style.css

html 파일과 css 파일 연결
link:css 선택 시 자동 완성

bootstrap 설치
getbootstrap.com
https://getbootstrap.com/
document 이용
all release에서 최신 버전 누르고(v5.3 사용) CSS 부분 코드 복사 후 html head 태그에 삽입.
이 때, 연결한 css 위에 삽입해야 함.
body 태그 안에 JS 부분 코드도 복사해서 삽입 필요.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<body>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>

지금까지의 index.html 파일(기본 환경설정)

<!DOCTYPE html>
<html lang="en"> //en -> ko로 변경하면 한국어로 인식
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>
</html>

extension vscode 기본 제공 기능 외에 추가로 사용하는 것.
extension -> live server -> install -> html 파일 내에서 마우스 우클릭 -> open with live server

오류 해결 :

👉🏻vscode에서

bootstrap container 클래스 이용

<body class="container">
  • 과정1

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
    <article class="start">
        <h1 class="mt-5 text-center">나는 어떤 동물일까?</h1>
        <button type="button" class="btn btn-primary mt-5">테스트 시작하기</button>
    </article>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
</body>
</html>

style.css

.start{
    display: flex;
    flex-direction: column;
}

  • 과정2 - 동적인 처리(jquery 이용)

버튼을 통해 페이지 연결 후 버튼 두개 띄우기, progress bar

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>
    <article class="start">
        <h1 class="mt-5 text-center">나는 어떤 동물일까?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>
    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <h2 class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button type="A" class="btn btn-primary mt-5">content</button>
        <button type="B" class="btn btn-primary mt-5">content</button>
    </article>
    <input type="hidden" id="EI" value="0">
    <input type="hidden" id="SN" value="0">
    <input type="hidden" id="TF" value="0">
    <input type="hidden" id="JP" value="0">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    <script>
        function start(){
            $(".start").hide();
            $(".question").show();
        }
        $("#A").click(function(){
            console.log($("#type").val());
        });
    </script>
</body>
</html>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}
  • 과정3 - 버튼 누르면 value가 증가하도록 설정

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>
    <article class="start">
        <h1 class="mt-5 text-center">나는 어떤 동물일까?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>
    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <h2 class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">content</button>
        <button id="B" type="button" class="btn btn-primary mt-5">content</button>
    </article>
    <input type="hidden" id="EI" value="0">
    <input type="hidden" id="SN" value="0">
    <input type="hidden" id="TF" value="0">
    <input type="hidden" id="JP" value="0">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    <script>
        function start(){
            $(".start").hide();
            $(".question").show();
        }
        $("#A").click(function(){
            var type = $("#type").val();
            var preValue = $("#"+type).val();
            console.log(preValue);
            $("#"+type).val(parseInt(preValue)+1);
        });
    </script>
</body>
</html>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}
  • 과정4 - 버튼을 눌렀을 때 다음 문제로 넘어가기. grogress bar 게이지 증가
    문제를 저장할 필요가 있음. JS의 객체에 저장.
    var jsObject = {key : value}의 구조.
    jsObject[key]와 같이 value에 접근 가능

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>
    <article class="start">
        <h1 class="mt-5 text-center">나는 어떤 동물일까?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>
    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: calc(100/12*1%)" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">content</button>
        <button id="B" type="button" class="btn btn-primary mt-5">content</button>
    </article>
    <input type="hidden" id="EI" value="0">
    <input type="hidden" id="SN" value="0">
    <input type="hidden" id="TF" value="0">
    <input type="hidden" id="JP" value="0">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    <script>
        var num = 1;
        var q = {
            1: {"title": "문제 1번", "type": "EI", "A": "E", "B": "I"},
            2: {"title": "문제 2번", "type": "EI", "A": "E", "B": "I"},
            3 :{"title": "문제 3번", "type": "EI", "A": "E", "B": "I"}
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        $("#A").click(function(){
            var type = $("#type").val();
            var preValue = $("#"+type).val();
            console.log(preValue);
            $("#"+type).val(parseInt(preValue)+1);
            next();
        });
        $("#B").click(function(){
            next();
        });
        function next(){
            $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
            $("#title").html(q[num]["title"]);
            $("#type").val(q[num]["type"]);
            $("#A").html(q[num]["A"]);
            $("#B").html(q[num]["B"]);
            num++;
        }
    </script>
</body>
</html>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}
  • 과정5
    문항 12개 선택 후 결과 화면 출력

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>
    <article class="start">
        <h1 class="mt-5 text-center">나는 어떤 동물일까?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>
    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: calc(100/12*1%)" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">content</button>
        <button id="B" type="button" class="btn btn-primary mt-5">content</button>
    </article>
    <article class="result">
        <img src="" alt="">
        <h2 id="animal">동물이름</h2>
        <h3 id="explain">설명</h3>
    </article>
    <input type="hidden" id="EI" value="0">
    <input type="hidden" id="SN" value="0">
    <input type="hidden" id="TF" value="0">
    <input type="hidden" id="JP" value="0">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    <script>
        var num = 1;
        var q = {
            1: {"title": "문제 1번", "type": "EI", "A": "E", "B": "I"},
            2: {"title": "문제 2번", "type": "EI", "A": "E", "B": "I"},
            3 :{"title": "문제 3번", "type": "EI", "A": "E", "B": "I"},
            4: {"title": "문제 1번", "type": "SN", "A": "S", "B": "N"},
            5: {"title": "문제 2번", "type": "SN", "A": "S", "B": "N"},
            6 :{"title": "문제 3번", "type": "SN", "A": "S", "B": "N"},
            7: {"title": "문제 1번", "type": "TF", "A": "T", "B": "F"},
            8: {"title": "문제 2번", "type": "TF", "A": "T", "B": "F"},
            9 :{"title": "문제 3번", "type": "TF", "A": "T", "B": "F"},
            10: {"title": "문제 1번", "type": "JP", "A": "J", "B": "P"},
            11: {"title": "문제 2번", "type": "JP", "A": "J", "B": "P"},
            12 :{"title": "문제 3번", "type": "JP", "A": "J", "B": "P"}
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        $("#A").click(function(){
            var type = $("#type").val();
            var preValue = $("#"+type).val();
            console.log(preValue);
            $("#"+type).val(parseInt(preValue)+1);
            next();
        });
        $("#B").click(function(){
            next();
        });
        function next(){
            if(num == 13){
                $(".question").hide();
                $(".result").show();
            }
            $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
            $("#title").html(q[num]["title"]);
            $("#type").val(q[num]["type"]);
            $("#A").html(q[num]["A"]);
            $("#B").html(q[num]["B"]);
            num++;
        }
    </script>
</body>
</html>

style.css

article{
    display: flex;
    flex-direction: column;
}

.question{
    display: none;
}

.result{
    display: none;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"></script>
    <article class="start">
        <h1 class="mt-5 text-center">나는 어떤 동물일까?</h1>
        <button type="button" class="btn btn-primary mt-5" onclick='start();'>테스트 시작하기</button>
    </article>
    <article class="question">
        <div class="progress mt-5">
            <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: calc(100/12*1%)" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <h2 id="title" class="text-center mt-5">문제</h2>
        <input id="type" type="hidden" value="EI">
        <button id="A" type="button" class="btn btn-primary mt-5">content</button>
        <button id="B" type="button" class="btn btn-primary mt-5">content</button>
    </article>
    <article class="result">
        <img id="img" class="rounded-circle" src="name.png" alt="animal">
        <h2 id="animal" class="text_center mt-5">동물이름</h2>
        <h3 id="explain" class="text_center mt-5">설명</h3>
    </article>
    <input type="hidden" id="EI" value="0">
    <input type="hidden" id="SN" value="0">
    <input type="hidden" id="TF" value="0">
    <input type="hidden" id="JP" value="0">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    <script>
        var num = 1;
        var q = {
            1: {"title": "문제 1번", "type": "EI", "A": "E", "B": "I"},
            2: {"title": "문제 2번", "type": "EI", "A": "E", "B": "I"},
            3 :{"title": "문제 3번", "type": "EI", "A": "E", "B": "I"},
            4: {"title": "문제 4번", "type": "SN", "A": "S", "B": "N"},
            5: {"title": "문제 5번", "type": "SN", "A": "S", "B": "N"},
            6 :{"title": "문제 6번", "type": "SN", "A": "S", "B": "N"},
            7: {"title": "문제 7번", "type": "TF", "A": "T", "B": "F"},
            8: {"title": "문제 8번", "type": "TF", "A": "T", "B": "F"},
            9 :{"title": "문제 9번", "type": "TF", "A": "T", "B": "F"},
            10: {"title": "문제 10번", "type": "JP", "A": "J", "B": "P"},
            11: {"title": "문제 11번", "type": "JP", "A": "J", "B": "P"},
            12 :{"title": "문제 12번", "type": "JP", "A": "J", "B": "P"}
        }
        function start(){
            $(".start").hide();
            $(".question").show();
            next();
        }
        $("#A").click(function(){
            var type = $("#type").val();
            var preValue = $("#"+type).val();
            console.log(preValue);
            $("#"+type).val(parseInt(preValue)+1);
            next();
        });
        $("#B").click(function(){
            next();
        });
        function next(){
            if(num == 13){
                $(".question").hide();
                $(".result").show();
            }
            $(".progress-bar").attr('style','width: calc(100/12*'+num+'%)');
            $("#title").html(q[num]["title"]);
            $("#type").val(q[num]["type"]);
            $("#A").html(q[num]["A"]);
            $("#B").html(q[num]["B"]);
            num++;
        }
    </script>
</body>
</html>

배포(deploy)

new site 또는 폴더 전체 업로드

profile
aiden
파인애플 좋아하세요?
이전 포스트

[오류]ERR_EMPTY_RESPONSE

다음 포스트

웹페이지 서비스 고도화

0개의 댓글