국비 37일차_1

강지수·2024년 2월 5일

국비교육 국비학원 백엔드 웹개발 자바

국비교육

목록 보기

71/97

지난 시간 복습

clone coding...

Json

JSON : JavaScript Object Notation, 좀 더 쉽게 데이터를 교환하고 저장하기 위하여 만들어진 텍스트 기반의 데이터 교환 표준

XML : EXtensible Markup Language, 데이터를 저장하고 전달할 목적으로 만들어진 마크업 언어, 사람과 기계가 둘 다 읽기 쉬운 언어

<!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="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h4>학생명단</h4>
    <p style="background-color: yellow;">
        이름 : <span id="name"></span> &nbsp;
        나이 : <span id="age"></span> &nbsp;
    </p>
    <script>
        var s='[{"name":"Hong1","age":"21"},'
            +'{"name":"Hong2","age":"22"},'
            +'{"name":"Hong3","age":"23"},'
            +'{"name":"Hong4","age":"24"}]'
        var student=JSON.parse(s);
        document.getElementById("name").innerHTML=student[0].name;            
        document.getElementById("age").innerHTML=student[0].age;            
    </script>
</body>
</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>
    <script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <script>
        var param1={
            "name1":"Tom1",
            "name2":"Tom2",
            "name3":"Tom3",
        }
        var param2={
            "name1":"111",
            "name2":"222",
            "name3":"333",
        }
        $(document).ready(function(){
            jsonGetData();
        });

        function jsonGetData(){
            console.log(param1.name1);
            console.log(param2.name2);
            alert("hhhh");
        }
    </script>
</body>
</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>
    <script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <script>
        var param2={
            "quiz":{
                "sport":{
                    "q1":{
                        "question":"Which one is correct team name in NBA?",
                        "options":[
                            "New Yorks Bulls",
                            "Los Angeles Kings",
                            "Golden State Warriors",
                            "Huston Rocket"
                        ],
                        "answer":"Huston Rocket"
                    }
                },
                "math":{
                    "q1":{
                        "question":"5 + 7 = ?",
                        "options":[
                            "10",
                            "11",
                            "12",
                            "13"
                        ],
                        "answer":"12"
                    },
                    "q2":{
                        "question":"12 - 8 = ?",
                        "options":[
                            "1",
                            "2",
                            "3",
                            "4"
                        ],
                        "answer":"4"
                    }
                }
            }
        }
        $(document).ready(function(){
            jsonGetData();
        });
        function jsonGetData(){
            console.log(param2.quiz["sport"].q1.question);
            console.log(param2.quiz["sport"].q1.options[0]);
            console.log(param2.quiz["sport"].q1.question);
            console.log(param2.quiz["sport"].q1.options[1]);
            console.log(param2.quiz["sport"].q1.question);
            console.log(param2.quiz["sport"].q1.options[2]);
            console.log(param2.quiz["sport"].q1.question);
            console.log(param2.quiz["sport"].q1.options[3]);
            console.log(param2.quiz["sport"].q1.answer);
            console.log(param2.quiz["math"].q1.question);
            console.log(param2.quiz["math"].q1.options[0]);
            console.log(param2.quiz["math"].q1.question);
            console.log(param2.quiz["math"].q1.options[1]);
            console.log(param2.quiz["math"].q1.question);
            console.log(param2.quiz["math"].q1.options[2]);
            console.log(param2.quiz["math"].q1.question);
            console.log(param2.quiz["math"].q1.options[3]);
            console.log(param2.quiz["math"].q1.answer);
        }
    </script>
</body>
</html>

AJAX

AJAX : Asynchronous Javascript and XML, 비동기 자바스크립트 XML, 요청한 부분의 특정 내용만 보내줌.

AJAX 는 웹 서버가 필요함.

JQuery를 이용하면 ajax를 더 쉽게 사용 가능함.

Le JQuery Ajax change txt
Le JQuery Ajax change txt
Le JQuery Ajax change txt
Le JQuery Ajax change txt
Le JQuery Ajax change txt
Le JQuery Ajax change txt
Le JQuery Ajax change txt
Le JQuery Ajax change txt

demo.txt

<!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="../js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.ajax({
                    url:'./demo.txt',
                    async:true,
                    success:function(result){
                        alert(result);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <style>
        div{
            width: 300px;
            height: 200px;
            border: 1px solid blue;
        }
    </style>
    <div id="div1">
        <h2>Le JQuery Ajax change txt</h2>
    </div>
    <button>get text</button>
    <h3>content2</h3>
    <h3>content2</h3>
    <h3>content2</h3>
</body>
</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>
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.ajax({
                    url:'./demo.txt',
                    async:true,
                    success:function(result){
                        $("#div1").html(result);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <style>
        div{
            width: 300px;
            height: 200px;
            border: 1px solid blue;
        }
    </style>
    <div id="div1">
        <h2>Le JQuery Ajax change txt</h2>
    </div>
    <button>get text</button>
    <h3>content2</h3>
    <h3>content2</h3>
    <h3>content2</h3>
</body>
</html>

전체 페이지가 refresh 되는 게 아니라 div1 안의 내용만 가져와서 바뀐다.

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>
</head>
<body>
    <style>
        .container{
            background-color: skyblue;
            height: 300px;
            display: flex;
            flex-direction: row;
        }
        .list{
            background-color: green;
            color: white;
            border: 1px solid white;
        }
    </style>
    <div class="container">
        <div class="list">list1</div>
        <div class="list">list2</div>
        <div class="list">list3</div>
        <div class="list">list4</div>
        <div class="list">list5</div>
    </div>
</body>
</html>

flex 의 현재 방향 : row (기본값)

flex-direction: column;

flex-direction: row-reverse;

flex-direction: column-reverse;

<style>
	.list:nth-child(1){
    flex-basis: 300px;
    }
</style>

    <style>
        .list:nth-child(1){
            flex-basis: 300px;
            flex-shrink: 1;
        }
        .list:nth-child(2){
            flex-basis: 300px;
            flex-shrink: 2;
        }
        .list:nth-child(3){
            flex-basis: 300px;
            flex-shrink: 3;
        }
    </style>

창 크기 줄이기 전

창 크기 줄인 후

-> 크기가 줄어드는 비율을 정함, 0이면 변화 x -> 반응형 웹에서 사용 가능

이를 이용한 Layout 만들어보기

<!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>
    <style>
        .container{
            background-color: skyblue;
            display: flex;
            flex-direction: column;
        }
        header{
            border-bottom: 1px solid gray;
            padding-left: 20px;
        }
        footer{
            border-top: 1px solid gray;
            padding: 20px;
        }
        .content{
            display: flex;
        }
        .content nav{
            border-right: 1px solid gray;
        }
        .content aside{
            border-left: 1px solid gray;
        }
        nav,aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            margin: 10px;
        }
    </style>
    <div class="container">
        <header>
            <h1>CSS CODE</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>css1</li>
                    <li>css2</li>
                    <li>css3</li>
                </ul>
            </nav>
            <main>
                css 코딩 flex 알아보기1
                css 코딩 flex 알아보기2
                css 코딩 flex 알아보기3
                css 코딩 flex 알아보기4
                css 코딩 flex 알아보기5
                css 코딩 flex 알아보기6
                css 코딩 flex 알아보기7
                css 코딩 flex 알아보기8
                css 코딩 flex 알아보기9
                css 코딩 flex 알아보기10
            </main>
            <aside>
                aside <br>
                부가정보
            </aside>
        </section>
        <footer>
            <a href="http://www.w3c.org">w3c org</a>
        </footer>
    </div>
</body>
</html>

flex3.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>
</head>
<body>
    <style>
        body{
            display: flex;
            justify-content: center;
        }
        .container{
            display: flex;
            flex-direction: column;
            max-width: 900px;
            border: 1px solid gray;
        }
        header{
            border-bottom: 1px solid gray;
            padding-left: 20px;
        }
        footer{
            border-top: 1px solid gray;
            padding: 20px;
            height: 50px;
        }
        .content{
            display: flex;
        }
        .content nav{
            border-right: 1px solid gray;
        }
        .content aside{
            border-left: 1px solid gray;
        }
        nav,aside{
            flex-basis: 150px;
            flex-shrink: 0;
        }
        main{
            margin: 10px;
        }
    </style>
    <div class="container">
        <header>
            <h1>CSS CODE</h1>
        </header>
        <section class="content">
            <nav>
                <ul>
                    <li>css1</li>
                    <li>css2</li>
                    <li>css3</li>
                </ul>
            </nav>
            <main>
                css 코딩 flex 알아보기1
                css 코딩 flex 알아보기2
                css 코딩 flex 알아보기3
                css 코딩 flex 알아보기4
                css 코딩 flex 알아보기5
                css 코딩 flex 알아보기6
                css 코딩 flex 알아보기7
                css 코딩 flex 알아보기8
                css 코딩 flex 알아보기9
                css 코딩 flex 알아보기10
            </main>
            <aside>
                aside <br>
                부가정보
            </aside>
        </section>
        <footer>
            <a href="http://www.w3c.org">w3c org</a>
        </footer>
    </div>
</body>
</html>

flex4.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>
</head>
<body>
    <style>
        body{
            background-color: skyblue;
        }
        @media (max-width:700px){
            body{
                background-color: green;
            }
        }
    </style>
    <h2>
        background-color
        background-color
        background-color
        background-color
        background-color
        background-color
        background-color
        background-color
        background-color
    </h2>
</body>
</html>

700 px 까지는 green, 701 px 부터는 skyblue 로 바뀐다

<!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>
    <style>
        body{
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: skyblue;
        }
        .container{
            display: flex;
            flex-direction: column;
            width: 800px;
            border: 1px solid gray;
        }
        header{
            border-bottom: 1px solid gray;
            padding-left: 20px;
        }
        footer{
            border-top: 1px solid gray;
            padding: 20px;
            height: 50px;
            text-align: center;
        }
        .content{
            display: flex;
        }
        .content nav{
            border-right: 1px solid gray;
        }
        .content aside{
            border-left: 1px solid gray;
        }
        nav,aside{
            flex-basis: 200px;
            flex-shrink: 0;
        }
        main{
            margin: 10px;
        }
        @media (max-width:600px){
            body{
                background-color: green;
            }
            .content{
                flex-direction: column;
            }
            .content nav, .content aside{
            border:none;
            flex-basis: auto;
            }
            main{
                order:0;
            }
            nav{
                order:1;
            }
            aside{
                order:2;
            }
        }
    </style>
    <h2>
        <div class="container">
            <header>
                <h1>CSS CODE</h1>
            </header>
            <section class="content">
                <nav>
                    <ul>
                        <li>css1</li>
                        <li>css2</li>
                        <li>css3</li>
                    </ul>
                </nav>
                <main>
                    css 코딩 flex 알아보기1
                    css 코딩 flex 알아보기2
                    css 코딩 flex 알아보기3
                    css 코딩 flex 알아보기4
                    css 코딩 flex 알아보기5
                    css 코딩 flex 알아보기6
                    css 코딩 flex 알아보기7
                    css 코딩 flex 알아보기8
                    css 코딩 flex 알아보기9
                    css 코딩 flex 알아보기10
                    css 코딩 flex 알아보기11
                    css 코딩 flex 알아보기12
                    css 코딩 flex 알아보기13
                    css 코딩 flex 알아보기14
                    css 코딩 flex 알아보기15
                    css 코딩 flex 알아보기16
                    css 코딩 flex 알아보기17
                    css 코딩 flex 알아보기18
                    css 코딩 flex 알아보기19
                    css 코딩 flex 알아보기20
                    css 코딩 flex 알아보기21
                    css 코딩 flex 알아보기22
                    css 코딩 flex 알아보기23
                    css 코딩 flex 알아보기24
                    css 코딩 flex 알아보기25
                    css 코딩 flex 알아보기26
                    css 코딩 flex 알아보기27
                    css 코딩 flex 알아보기28
                    css 코딩 flex 알아보기29
                    css 코딩 flex 알아보기30
                </main>
                <aside>
                    aside <br>
                    부가정보
                </aside>
            </section>
            <footer>
                <a href="http://www.w3c.org">w3c org</a>
            </footer>
        </div>
    </h2>
</body>
</html>

진짜 HTML 끝

오전 수업 끝

강지수

개발자 준비의 준비준비중..

이전 포스트

국비 36일차_2

다음 포스트

국비 37일차_1

국비교육

Json

AJAX

국비 36일차_2

국비 37일차_2

0개의 댓글