Posted Updated  minkuen frontEnd / javascript5 minutes read (About 773 words)

JavaScript AJAX

프로그램 언어별 포지션

  • Front-End : Web Browser 등 사용자와 접점을 가지고 있는 부분을 개발
  • Back-End : 데이터 기반의 로직을 기반으로 솔루션의 엔진을 담당

Untitled

JAVA 언어의 단계

  • 현재 취업시장에서 가장 많은 것은 웹 프로그래머
  • 웹 프로그램은 서블릭 ➔ JSP ➔ Spring의 단계로 교육이 진행될 예정

Untitled

비동기(Asynchronous) 통신이란?

  • AJAX (Asynchronous Javascript And XML) : XHR(XMLHttpRequest), AXIOS, FETCH 방식
  • 비동기 애플리케이션을 만들기 위해 클라이언트에서 단에서 쓰이는 웹개발 기술들.

Untitled

비동기 통신의 탄생배경

  • 기존 웹문서는 구조가 바뀌면 모든 문서를 변경해야 하는 한계가 있음. (유지관리 비용 증가)
  • 한계를 극복하고자 비동기 통신이 탄생함

Untitled

비동기 통신 구현 원리

  • innerHTML을 활용하여 이벤트 발생시 article 태그에 문서를 삽입한다
  • 문서 삽입은 querySelector를 활용
  • ajax_01.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <ol>
        <li><a onclick="document.querySelector('article').innerHTML='<h1>HTML</h1><P>HTML is ....</P>';">
            HTML</a></li>
         
        <li><a onclick="document.querySelector('article').innerHTML='<h1>CSS</h1><P>CSS is ....</P>';">
            CSS</a></li>
        
        <li><a onclick="document.querySelector('article').innerHTML='<h1>JAVA Script</h1><P>JAVA Script is ....</P>';">
            JAVA Script</a></li>
    </ol>
    <article>
    </article>
</body>
  • 결과

Untitled

비동기 통신 구현을 위한 TEST - 1

  • callback 함수를 통한 로그 확인. (JAVASCRIPT 문서 확인함.)
  • 로그가 먼저 찍히고, response OK가 됨. (비동기식이므로)

Untitled

비동기를 결과를 확인

  • 먼저 1 2 3 출력
  • 그 다음에서야 response.OK!! 출력

Untitled

비동기 통신 구현을 위한 TEST - 2

  • CSS 문서 확인하여 text란 변수에 넣어라.
  • response.status = 200은 통신에 성공했다는 의미임

Untitled

5.4.3. 비동기 통신 구현을 위한 TEST - 3

  • FETCH API는 전달하는 문서를 text로 받고, inner HTML을 통해 article tag에 문서를 포함
  • 이 때 response 객체를 통해서 성공여부를 확인할 수 있음 (AJAX의 기본은 마무리)

Untitled

  • 여기까지 작성했을 때의 코드
  • ajax_02.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <input type ="button" value = "click callbackMe" 
        onclick="fetch('JAVASCRIPT').then(callbackme);
                function callbackme(){
                    console.log('response. OK!!');
                };
                console.log(1);
                console.log(2);
                console.log(3);
                "
    >
    <!-- JAVASCRIPT 문서를 읽으면, response라는 변수에 담아와라. -->
    <!-- response 변수의 text함수를 통해서 읽어온 값을 alert 해라.-->
    <input type="button" value="click AJAX" 
        onclick="fetch('HTML').then(function(response){
                    response.text().then (
                        function(text) {
                            alert(text);
                            console.log(response);
                            console.log(response.ok);  // true, false
                            console.log(response.status);// 200은 성공, 404는 페이지 못찾음
                    })
        });"
    >
    <input type="button" value="click AJAX_ERROR처리" 
        onclick="fetch('HTML').then(function(response){
                    response.text().then (
                        function(text) {
                            if (response.ok) {
                                // alert(text);
                                document.querySelector('article').innerHTML=text;
                                console.log('success');
                            }
                            else {
                                console.log('ERROR');
                            }
                    })
        });"
    >
    <article>

    </article>

</body>
</html>
  • CSS
  • 확장자 없이 해당 이름으로만 만든 파일이다
1
<h1>CSS</h1><P>CSS is ....</P>
  • JAVASCRIPT
  • 확장자 없이 해당 이름으로만 만든 파일이다
1
<h1>JAVA Script</h1><P>JAVA Script is ....</P>
  • HTML
  • 확장자없이 해당 이름으로만 만든 파일이다
1
<h1>HTML</h1><P>HTML is ....</P>
  • 결과
  • 버튼을 1번씩 클릭했을 때 다음과 같은 결과가 출력된다

Untitled

비동기 통신 구현을 위한 TEST - 4

  • 공통된 부분을 하나로 합쳐서 처리
  • 위 코드를 다음 형태로 정리할 수 있다

Untitled

실습

  • Do it! 웹 사이트 따라 만들기 7장 p.214
  • 우선 chrome → 우클릭 : 속성 → 대상에 다음 내용을 붙여넣는다.
    • exe” 이후에 띄어쓰고 붙이면 된다
    • -allow-file-access-from-files

Untitled

Posted Updated  minkuen frontEnd / javascript8 minutes read (About 1222 words)

JavaScript JQuery

jQury를 사용해보자

JQuery란?

  • JQuery 사용이유 : 브라우저간 호환성 문제, CSS지원, 복잡한 HTML 문서를 단순화하는 용도
  • 기본적으로 JAVA Script 문법을 기반으로 활용이 가능하다

Untitled

  • 이 기종으로 관리되는 모든 Browser의 기능을 숨긴다
  • Jquery Object를 통해서 Document Object를 관리

Untitled

Jquery 셋업

  • Jquery 라이브러리는 서버에 다운로드 하여 사용하는 방법과 CDN을 활용하는 방법이 있음
  • CDN : Content Delivery Network
  1. 각 주요 사이트별로 호스팅하고 있는 CDN이 있음
  2. CDN을 이용하는 것이 효율적인 이유는
    다른 사이트도 Jquery로 개발된 사이트가 많다보니
    Cash에 대부분 CDN 사이트 로부터 받아놓은 것이 있을 수 있음.
  3. 단, 다운로드도 받아놓는 것은 인터넷이 끊기거나.
    호스팅 사이트가 사라질 수도 있는데. 이 때 주소만 바꾸면 되며
    보험용으로 라이브러리로 다운로드 받아서 관리하고 있으면 좋음

설치

  • Jquery

https://jquery.com/

Untitled

Untitled

  • Download 탭에서 아래로 스크롤
  • Google CDN 이동

Untitled

Untitled

  • 다음과 같은 형태로 사용
1
2
3
4
5
6
7
8
9
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

Jquery 시작하기

  • Jquery 맛보기
  • jquery는 chain의 형태로 대상과 대상이 해야할 일에 대해서 처리

Untitled

선택자

  • 선택자를 활용하여 선택된 대상에 CSS를 적용할 수 있다

Untitled

선택자 실습

  • 선택자를 사용해본다
  • jquery_test_02.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 모든 문서가 로드가 되면..
        $(function(){
            // 직접선택자
            $(".wrap-1").css("border","1px solid orange");
            $(".wrap-1 p").css("background","yello");
            // 근접선택자
            $(".active").next("p").css("background", "aqua");
            // 위치선택자
            $(".wrap-1 p").eq(1).css("font-size","5px");
            // 속성선택자
            $("input[type-text]").css("background","orange");
            // 객체조작 ==> class="active" 제거. aqua 컬러 미적용
            $(".wrap-1 p").eq(1).removeClass("active");
            $(".active").next("p").css("background", "aqua");
            // 객체조작 ==> class="active" 추가. aqua 컬러 적용
            $(".wrap-1 p").eq(1).addClass("active");
            $(".active").next("p").css("background", "aqua");
            // 객체조작 ==> tag를 추가함
            
            $(".wrap-1 p").append("<p>휴먼교육센터</p>");
        });
    </script>
</head>
<body>
    <div class="wrap-1">
        <p>텍스트1</p>
        <p class="active">내용2</p>
        <p><a href="https://www.naver.com/">네이버</a></p>
        <p><input type="text" value="hello"></p>
    </div>
    <div class = "wrap-2">
        <p>내용5</p>
        <p>내용6</p>
    </div>
</body>
</html>
  • 결과

Untitled

이벤트 핸들링

  • Jquery 는 발생하는 이벤트를 체크하여 문서를 관리할 수 있음

Untitled

이벤트 핸들링 실습

  • jquery_test_03.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 모든 문서가 로드가 되면..
        $(function(){
            // $(".btn1 a").mouseover(function(){
            //     alert("휴먼교육센터");
            // })
            
            // 2개 이상의 이벤트를 동시에 적용 가능 
            // $(".btn1 a").on("mouseover focus", function(){
            //     // 선택된 대상
            //     let ts = $(this);
            //     ts.css("background-color", "yellow");
            // });

            $(".btn1 a").on("mouseover focus", function(){
                // 선택된 대상
                let ts = $(this);
                // 선택된 대상의 ul 태그 중 visible이 포함된 것이라면 hide(숨기고)
                $(".btn1").next("ul").filter(":visible").hide();
                // 선택된 부모(p)의 다음 것을 출력
                ts.parent().next().show();
                return false;
 
            });
        });
    </script>
</head>
<body>
    <p class="btn1"><a href = "#">이벤트 대상1</a></p>
    <ul style="display:none">
        <li>리스트1</li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>

    <p class="btn1"><a href = "#">이벤트 대상2</a></p>
    <ul style="display:none">
        <li>리스트4</li>
        <li>리스트5</li>
        <li>리스트6</li>
    </ul>

</body>
</html>
  • 결과

Untitled

효과 및 애니메이션

  • Jquery 는 이벤트 발생시 효과 및 애니메이션 기능을 수행함
  • 효과 메서드
    • 요소를 역동적으로 숨겼다 보이도록 해주는 매서드가 있다
    • 선택한 요소에 동적으로 적용 가능
  • 효과 메서드 사용법
    • $(요소 선택).효과 메서드(효과소요시간, 가속도, 콜백함수)
  • 애니메이션 사용법
    • $(요소 선택).animate({적용할 속성과 값}, 가속도, 콜백함수);

애니메이션 실습02

  • jquery_04.html
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
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        // 모든 문서가 로드가 되면...
        $(function(){
            $(".btn1").on("click", function(){
                let ts = $(this);
                if(ts.text() == "숨김") {
                    // 1000은 1초를 의미.
                    $(".wrap").slideUp(1000, function(){
                        $(".btn1").text("노출");
                    })
                }
                else{
                    $(".wrap").slideDown(1000, function(){
                        $(".btn1").text("숨김");

                    })
                }
            });
        });
    </script>
</head>
<body>
    <p class="btn-wrap">
        <button class="btn1">숨김</button>
    </p>
    <div class="wrap">
        <p class="txt1">내용1</p>
        <p class="txt1">내용2</p>
    </div>

    
</body>
</html>
  • 결과
  • 숨김 버튼을 누르면 텍스트가 사라지고 노출 버튼으로 전환
  • 노출 버튼을 누르면 텍스트가 출력되고 숨김 버튼으로 전환

Untitled

애니메이션 실습01

  • 버튼을 누름으로써 이동하는 객체를 구현해본다
  • jquery_05.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding: 20px;
        }
        .btn-wrap{
            margin-bottom : 10px;
        }
        .wrap{
            max-width:600px;
            border : 1px solid black;
        }
        .txt1{
            width:10%;
            text-align: center;
            background-color: aqua;
        }
    </style>
    <script>
        $(function(){
            let txt1=$(".txt1");
            let count = 1;
            $(".btn-wrap button").on("click", function(){
                let ts = $(this);
                if(ts.hasClass("back-button")){
                    count--;
                    
                    if(count < 1){
                        count = 1;
                        return;
                    }
                    txt1.animate({marginLeft:"-=10%"}, 500);
                }
               else{
                    count++;
                    if(count > 10){
                        count = 10;
                        return;
                    }
                    txt1.animate({marginLeft:"+=10%"}, 500);
                }
            });
        });
    </script>
</head>
<body>
    <p class="btn-wrap">
        <button class="back-button">back</button>
        <button class="go-button">go</button>
    </p>
    <div class="wrap">
        <p class="txt1">내용1</p>
    </div>
    
</body>
</html>
  • 결과
  • back에 의해 뒤로, go에 의해 앞으로 이동한다

Untitled

Posted Updated  minkuen frontEnd / javascript8 minutes read (About 1209 words)

JavaScript Event

이벤트 객체

  • Keyboard 및 Mouse 등의 입력장치에서는 이벤트가 발생함
  • 발생한 Event의 속성값들을 대상으로 문서의 변경을 활용할 수 있음

Untitled

이벤트 관리

  • 이벤트는 Window라는 객체가 모든 객체를 대상으로 관리하고 있음.
  • 최하단의 객체의 이벤트는, 상위로 이벤트를 발생시키고 있음. (상위 객체에서 관리 가능함)

Untitled

이벤트 객체의 메서드(1)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있다

Untitled

이벤트 객체의 메서드(2)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있음
  • Mouse는 X,Y의 좌표를 확인할 수 있도록 인터페이스 제공함

Untitled

이벤트 객체의 메서드(3)

  • EVENT 인터페이스가 최상단이며, UI > 키보드, 마우스(휠 포함) Event 인터페이스가 있음
  • Keyboard는 눌려진 Key 및 ALT/SHIFT 등을 확인할 수 있도록 인터페이스 제공함

Untitled

마우스 이벤트 실습

  • 마우스 이벤트는 e.target이란 객체로 속성값들을 사용할 수 있음

Untitled

  • event_01.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <section id = "section">
        <!-- 세번째 방법으로 bubbling 효과를 확인 -->
        <div id ="img-list">
            <img class="img" src="images/img1.jpg">
            <img class="img" src="images/img2.jpg">
            <img class="img" src="images/img3.jpg">
            <input type="text">
        </div>
        <div>
            <img class="current-img" src="images/img1.jpg">
        </div>
    </section>
</body>
  • event_01.js
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
32
33
34
35
36
37
38
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let imgList = section.querySelector("#img-list");
    let imgs = section.querySelectorAll(".img");
    let currentImg = section.querySelector(".current-img");

    /*  첫번째 방법 : 이미지들 중 클릭된 것만 대상으로 src 변경하여 이미지 변경
    imgs[0].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    imgs[1].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    imgs[2].onclick = function(e) {
        currentImg.src = e.target.src;
    }
    */

    /*  두번째 방법 : 첫번째 방법을 for문을 활용하여 코드 간결화
    for (let i=0 ; imgs.length ; i++) {
        imgs[i].onclick = function(e) {
            currentImg.src = e.target.src;
        }
    }
    */

    // 세번째 방법 : 상위 객체에서도 이벤트를 bubbling을 통해서 받기 때문에.
    //              상위 객체에서도 관리가 가능합니다. 
    //              다만, img가 아닌 것은 제외하면서 이미지의 경로를 변경 작업함.
    imgList.onclick = function(e) {
        console.log(e.target.className);
        if (e.target.className != 'img') {
            return; 
        }
        currentImg.src = e.target.src;
    }

});
  • 결과
  • 클릭한 이미지가 아랫 열에 출력되도록 구현되었다

Untitled

마우스 이벤트 실습 - trigger

  • 특정 Element 이벤트는 다른 Element 이벤트를 호출할 수 있음 (트리거)
  • Span tag의 클릭이 file 선택하는 input Tag를 클릭하게 함.

Untitled

  • trigger_01.html
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
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event</title>
    <style>
        .file-button{
            /* 버튼은 숨김. */
            display:none;
        }
        .file-trigger-button {
            background-color: green;
            border : 1px solid lightgreen;
            border-radius: 5px;
            /* 상하는 5px, 좌우는 10px */
            padding : 5px 10px;
            color : white;
            /* 버튼 위로 마우스가 올라가면 클릭을 유도하는 포인터 */
            cursor : pointer;
        }
        .file-trigger-button:hover {
            background-color: lightgreen;
        }
    </style>
    <script src="trigger_01.js"></script>
</head>
<body>
    <section id="section">
        <input type="file" class="file-button">
        <span class="file-trigger-button">파일선택</span>
    </section>
</body>
</html>
  • trigger_01.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let fileButton = section.querySelector(".file-button");
    let fileTriggerButton = section.querySelector(".file-trigger-button");

    // fileButton.onclick에 대해서는 미정의
    fileButton.onclick = function(e) {
    };
    fileTriggerButton.onclick = function(e) {
        let event = new MouseEvent("click", {
            'view':window,
            'bubbles' : true,
            'cancelable' : true
        })
        // 숨겨진 fileButton은 event(위에서 정의한 마우스이벤트)를 수행한다.
        fileButton.dispatchEvent(event);
    }
});
  • 결과
  • 파일 선택 후 의도한 결과가 출력되었다

Untitled

마우스 이벤트 실습 - X,Y 좌표 이용

  • 마우스 이벤트 발생시 X,Y 좌표를 활용할 수 있음
  • X,Y 좌표는 여러가지의 형태로 존재함.

Untitled

  • 사각형을 만든다
  • 클릭한 곳으로 사각형이 이동하도록 작성해보자
  • event_02.html
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
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>event 실습</title>
    <style>
				body{
            margin : 0px 0px;
        }
        .container{
            width: 800px;
            height: 400px;
            border: 1px solid gray;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            background: blue;
        }
    </style>
    <script src="event_02.js"></script>
</head>
<body>
    <section id = "section">
        <div class = "container">
            <div class="box"></div>
        </div>
    </section>
</body>
</html>
  • event_02.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEventListener("load", function(){
    let section = document.querySelector("#section");
    let container = section.querySelector(".container");
    let box = section.querySelector(".box");

    container.onclick = function(e){
        console.log("(x,y) = " + e.x, e.y);
        console.log("(client) = " + e.clientX, e.clientY);
        console.log("(page) = " + e.pageX, e.pageY);
        console.log("(offset) = " + e.offsetX, e.offsetY);

        box.style.position = "absolute";
        box.style.left = e.x + "px";
        box.style.top = e.y + "px";
    }
});
  • 결과
  • 클릭한 위치로 사각형이 이동한다

Untitled

  • 이번에는 사각형을 드래그하여 움직히에 한다
  • event_02.js에 다음 코드를 추가한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let offset = {x:0, y:0};

// on mounse down = 마우스가 눌린 상태
container.onmousedown = function(e){
    // 석택된 객체가 box라면, dragging을 true로 처리
    if(e.target == box){
        dragging = true;
    }
};

// 마우스가 떨어진 상태
container.onmouseup = function(e){
    // 선택된 객체가 box라면 dragging을 false로 처리
    if(e.target == box){
        dragging = false;
    }
};

box.onmousedown = function(e){
    offset.x = e.offsetX;
    offset.y = e.offsetY;
}
  • 캡처로만 봤을 때는 차이가 없지만 클릭 후에만 이동하도록 구현되었다

Untitled

Posted Updated  minkuen frontEnd / javascript11 minutes read (About 1626 words)

JavaScript DOM

DOM 모델

  • DOM : Document Object Model
  • 문서내의 Node는 객체이고, 각 객체의 속성값을 통해 문서를 제어

Untitled

DOM 모델 실습 – img 모델 (1)

  • img 속성값을 통해서 자바스크립트로 문서 변경하기

Untitled

실습01

  • 우선 이미지를 다운받아서 images 폴더에 넣어놓는다.

  • 예시) images/img1.jpg

  • 다운받은 이미지를 출력해보자

  • 입력한 이미지를 새로 띄울 수 있도록 구현해보자

  • dom_01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습</title>
    <script src="dom_01.js"></script>
</head>
<body>
    <section id = "section1">
        <div>
            <input class = "src-input" type="text">
            <input class = "change-button" type="button" value="변경">
        </div>
        <div>
            <img class="img" src="images/img1.jpg">
        </div>
    </section>
</body>
</html>
  • dom_01.js
1
2
3
4
5
6
7
8
9
10
11
window.addEventListener("load", function(){

    let section = document.querySelector("#section1");
    let srcInput = section.querySelector(".src-input");
    let changeButton = section.querySelector(".change-button");
    let img = section.querySelector(".img");

    changeButton.onclick = function(){
        img.src = "images/" + srcInput.value;
    }    
});
  • 지정한 경로의 이미지가 출력되었다

Untitled

  • 출력할 이미지의 경로를 입력하면 다음과 같이 변경된다
  • 예시) img1.jpg

Untitled

실습02

  • 텍스트를 직접 입력하지 않아도 이미지를 바꿀 수 있게 해보자
  • dom_02.html
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>실습</title>
    <script src="dom_02.js"></script>
</head>
<body>
    <section id = "section1">
        <div>
            <input class = "src-input" type="text">
            <select class = "img-select">
                <option value="img1.jpg">img1</option>
                <option value="img2.jpeg">img2</option>
                <option value="img3.jpg">img3</option>
            </select>
            <input class = "change-button" type="button" value="변경">
        </div>
        <div>
            <img class="img" src="images/img3.jpg">
        </div>
    </section>
</body>
</html>
  • dom_02.js
1
2
3
4
5
6
7
8
9
10
11
12
window.addEventListener("load", function(){

    let section = document.querySelector("#section1");
    // let srcInput = section.querySelector(".src-input");
    let imgSelector = section.querySelector(".img-select")
    let changeButton = section.querySelector(".change-button");
    let img = section.querySelector(".img");

    changeButton.onclick = function(){
        img.src = "images/" + imgSelector.value;
    } 
});
  • 이미지 이름을 선택하고 변경할 수 있게 되었다.

Untitled

실습03

  • 이미지에 테두리 색을 입혀보자
  • 테두리 색을 변경가능하게 작성한다
  • dom_04.html
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom실습</title>
    <script src="dom_04.js"></script>
</head>
<body>
    <section id = "section1">
        <div>
            <input class="src-input" type="text" list="img-list">
            <datalist id="img-list">
                <option value="img1.jpg">img1</option>
                <option value="img2.jpg">img2</option>
                <option value="img3.jpg">img3</option>               
            </datalist>
            <input class="color-input" type="color">
            <input class="change-button" type="button" value="변경">
        </div>
        <div>
            <br>
            <img class="img" src="images/img1.jpg" style="border-width:5px; border-style:solid; border-color:red;">
        </div>
    </section>
</body>
</html>
  • dom_04.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let srcInput = section.querySelector (".src-input");
    // let imgSelector = section.querySelector(".img-select");
    let changeButton = section.querySelector(".change-button");
    let img = section.querySelector(".img");
    let colorInput = section.querySelector(".color-input");

    changeButton.onclick = function(){
        img.src = "images/" + srcInput.value;
        // img.style["border-color"] = colorInput.value;
        img.style.borderColor = colorInput.value;
    }
});
  • 결과
  • 테두리를 변경 가능하게 구현되었다.

Untitled

실습04

  • 리스트에 내용을 추가/삭제하는 기능을 만들어보자
  • dom_5.html 일부
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <section id = "section1">
        <div>
            <input class="title-input" type="text" name="title">
            <input class="add-button" type="button" value="추가">
            <input class="del-button" type="button" value="삭제">
        </div>
        <div class="menu-list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JAVASCRIPT</li>
            <!-- <li>휴먼</li>  ==> 신규 생성됨.-->

        </div>
    </section>
</body>
  • dom_05.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let titleInput = section.querySelector(".title-input");
    let addButton = section.querySelector(".add-button");
    let delButton = section.querySelector(".del-button");
    let menuList = section.querySelector(".menu-list");
    
    addButton.onclick = function(){
        let textNode = document.createTextNode(titleInput.value);
        let liNode = document.createElement("li"); //li 태그를 만듦

        liNode.appendChild(textNode);   //li 태그에 textNode를 추가
        menuList.appendChild(liNode);   // menuList에 li 태그 추가
    };
    delButton.onclick = function(){
        let liNode = menuList.children[0]; // 자식중 첫번째 태그
        menuList.removeChild(liNode);   // li 태그를 부모에서 연결 제거
    };
});
  • 결과

Untitled

실습 05

  • 테이블을 만들고 복사,입력, 템플릿 기능을 구현해보자
  • dom_06.html 일부
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
32
33
34
35
36
37
38
39
40
41
<body>
    <section id = "section1">
        <template>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </template>
        <div>
            <input class="clone-button" type="button" value="복사">
            <input class="input-button" type="button" value="입력">
            <input class="temp-button" type="button" value="템플릿">
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>내용</td>
                    <td>작성자</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>가입신청1</td>
                    <td>가입신청합니다.1</td>
                    <td>강*준</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>가입신청2</td>
                    <td>가입신청합니다.2</td>
                    <td>강*우</td>
                </tr>        
            </tbody>
        </table>
    </section>
</body>
  • dom_06.js
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
window.addEventListener("load", function(){
    let notices = [
    {"id":5, "title":"가입인사3", "content":"가입인사3", "writer":"강*혁"}
    ,{"id":6, "title":"가입인사4", "content":"가입인사4", "writer":"강*혁"}];
    let section = document.querySelector("#section1");
    let cloneButton = section.querySelector(".clone-button");
    let inputButton = section.querySelector(".input-button");
    let tempButton = section.querySelector(".temp-button");
    let noticeList = section.querySelector(".notice-list");

    tempButton.onclick = function(){
        let tempNode = section.querySelector("template");
        console.log(tempNode);
        // true는 하위 전체를 import함.
        let cloneNode = document.importNode(tempNode.content, true);
        let tds = cloneNode.querySelectorAll("td");
        tds[0].textContent = notices[0].id;
        tds[1].textContent = notices[0].title;
        tds[2].textContent = notices[0].content;
        tds[3].textContent = notices[0].writer;
        // tbodyNode 하위로 cloneNode를 붙여넣음.
        let tbodyNode = noticeList.querySelector("tbody");
        tbodyNode.appendChild(cloneNode);
    };    
    inputButton.onclick = function() {
        let tbodyNode = noticeList.querySelector("tbody");
        let trNode = noticeList.querySelector("tbody tr");
        // cloneNode는 trNode와 같은 형태.
        let cloneNode = trNode.cloneNode(true);
        // querySelectorAll로 인해서 td[0]~td[4]
        let tds = cloneNode.querySelectorAll("td");
        // td의 값을 notice의 값으로 바꿔치기 함.
        tds[0].textContent = notices[0].id;
        tds[1].textContent = notices[0].title;
        tds[2].textContent = notices[0].content;
        tds[3].textContent = notices[0].writer;
        // tbodyNode 하위로 cloneNode를 붙여넣음.
        tbodyNode.appendChild(cloneNode);
    };
    cloneButton.onclick = function(){
        let tbodyNode = noticeList.querySelector("tbody");
        // querySelector (먼저 있는 것 1개) 
        // querySelectorAll (모든 것을 배열로 가져옵니다.)
        let trNode = noticeList.querySelector("tbody tr");
        console.log(trNode);
        let cloneNode = trNode.cloneNode(true); 
        // true : tr하위까지 포함 복제하여 엘리먼트 생성
        // false : tr본인만 복제하여 엘리먼트 생성
        console.log(cloneNode);
        tbodyNode.appendChild(cloneNode);
        // tbody 엘리먼트 하위로 복제된 것을 연결함.
    };
});
  • 결과
  • 빈 상태에서 템플릿을 누르면 행 하나가 입력된다
  • 입력하면 미리 설정한 행이 삽입된다
  • 복사를 누르면 행 하나가 복사된다

Untitled

실습06

  • 행이 테이블 내에서 위,아래로 이동할 수 있게 해보자
  • 위로 이동 버튼, 아래로 이동 버튼 구현
  • dom_07.html 일부
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
32
33
34
35
36
37
38
<body>
    <section id = "section1">
        <div>
            <input class="up-button" type="button" value="위로">
            <input class="down-button" type="button" value="아래로">
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td>번호</td>
                    <td>제목</td>
                    <td>내용</td>
                    <td>작성자</td>
                </tr>
            </thead>
            <tbody>
                <tr style="background-color: lightblue;">
                    <td>1</td>
                    <td>가입신청1</td>
                    <td>가입신청합니다.1</td>
                    <td>강*준</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>가입신청2</td>
                    <td>가입신청합니다.2</td>
                    <td>강*우</td>
                </tr>        
                <tr>
                    <td>3</td>
                    <td>가입신청3</td>
                    <td>가입신청합니다.3</td>
                    <td>강*혁</td>
                </tr>  
            </tbody>
        </table>
    </section>
</body>
  • dom_07.js
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
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let upButton = section.querySelector(".up-button");
    let downButton = section.querySelector(".down-button");
    let tbodyNode = section.querySelector("tbody");
    
    let currentNode = tbodyNode.firstElementChild;

    downButton.onclick = function(){
        let nextNode = currentNode.nextElementSibling;
        if(nextNode == null) {
            alert ("더 이상 이동불가합니다.");
            return;
        }
        // insertBefore란, currentNode 앞으로 nextNode를 이동한다. 
        tbodyNode.insertBefore(nextNode, currentNode);
    };    
    upButton.onclick = function() {
        let prevNode = currentNode.previousElementSibling;
        if(prevNode == null) {
            alert ("더 이상 이동불가합니다.");
            return;
        }
        // insertBefore란, prevNode 앞으로 currentNode 이동한다. 
        tbodyNode.insertBefore(currentNode, prevNode);
    };
});
  • 결과
  • 버튼을 눌렀을 때, 1번 행이 아래로 이동하는 것을 확인

Untitled

실습07

  • 체크박스를 사용한다
  • 모두 체크하기, 체크한 행 삭제하기, 행 위치 교환 기능을 구현
  • dom_08.html 일부
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
32
33
34
35
36
37
38
39
40
41
42
<body>
    <section id = "section1">
        <div>
            <input class="del-button" type="button" value="일괄삭제">
            <input class="swap-button" type="button" value="선택노드 바꾸기">
        </div>
        <table border="1" class="notice-list">
            <thead>
                <tr>
                    <td><input type="checkbox" class="overall-checkbox"></td>
                    <td>번호</td>
                    <td>제목</td>
                    <td>내용</td>
                    <td>작성자</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" unchecked></td>
                    <td>1</td>
                    <td>가입신청1</td>
                    <td>가입신청합니다.1</td>
                    <td>강*준</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>2</td>
                    <td>가입신청2</td>
                    <td>가입신청합니다.2</td>
                    <td>강*우</td>
                </tr>        
                <tr>
                    <td><input type="checkbox"></td>
                    <td>3</td>
                    <td>가입신청3</td>
                    <td>가입신청합니다.3</td>
                    <td>강*혁</td>
                </tr>  
            </tbody>
        </table>
    </section>
</body>
  • dom_08.js
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
window.addEventListener("load", function(){
    let section = document.querySelector("#section1");
    let delButton = section.querySelector(".del-button");
    let swapButton = section.querySelector(".swap-button");
    let tbodyNode = section.querySelector("tbody");
    let allcheckbox = section.querySelector(".overall-checkbox");

    delButton.onclick = function(){
        // 체크된 것만 inputs에 포함됨.
        // 체크가 안된 것 만 포함할 경우는 "input[type='checkbox']:unchecked
        let inputs = tbodyNode.querySelectorAll
                            ("input[type='checkbox']:checked");
        for (let i=0 ; i<inputs.length; i++) {
            //체크박스는 input 태그임. input==>TD==>TR. 이시점에서 remove
            inputs[i].parentElement.parentElement.remove();
        }
    };    
    swapButton.onclick = function(){
        // 체크된 것만 inputs에 포함됨.
        let inputs = tbodyNode.querySelectorAll
                ("input[type='checkbox']:checked");
        if (inputs.length !=2) {
            alert("2개만 체크해주세요");
            return;
        }
        trs=[];
        for(let i=0; i<inputs.length; i++) {
            // trs에 선택된 2개의 input==>td==>tr의 내용을 넣음
            trs.push(inputs[i].parentElement.parentElement);
        }
        // 첫번째것을 복사해서 clone으로 생성
        let cloneNode = trs[0].cloneNode(true);
        // 두번째것과 복제된 것을 교체 
        trs[1].replaceWith(cloneNode);
        // 첫번째 것과 두번째 것을 교체 
        trs[0].replaceWith(trs[1]);
    };
    allcheckbox.onclick = function(){
        let inputs = tbodyNode.querySelectorAll("input[type='checkbox']");
        for (let i=0 ; i<inputs.length; i++) {
            // allcheckbox의 체크 형태를 기준으로 각 체크박스에 대입함.
            inputs[i].checked = allcheckbox.checked;
        }
    };    

});
  • 결과
  • 모두 체크, 체크한 행 삭제, 행 위치 교환 모두 정상 작동을 확인

Untitled

Posted Updated  minkuen frontEnd / javascript9 minutes read (About 1281 words)

JSON

  • JSON : JavaScript Object Notation
  • 2차원 데이터를 관리하기 쉬운 JavaScript 타입.

[실습 예제]

Untitled

데이터 관리의 방법 - CSV, XML, JSON

  • 데이터 관리 방법 : CSV, XML, JSON
  • 브라우져에서 해석하기 쉬운 JSON 방식으로 많이 사용함

Untitled

JSON Parse 예제

  • 문자열로 들어온 JSON 데이터를 Parse를 통해서 데이터 관리 할 수 있다
  • 파싱 : 각 문장의 문법적인 구성 또는 구문을 분석하는 과정.

[실습 예제]

Untitled

연산자

  • Java Script의 연산자

Untitled

  • 값의 비교 : == 또는 !=
  • 주소의 비교 : === 또는 !==

Untitled

제어구조

  • JavaScript의 제어구조

Untitled

  • 제어구조 예시

Untitled

함수

  • JAVA 스크립트는 함수는 있으나 다른 언어처럼 정의하지는 않고, 만드는 형태

Untitled

함수 사용해보기

  • 여러가지 방식으로 함수를 사용해보자
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
<script>
        document.write("함수 사용하는 여러가지 방법")
        document.write("<BR>");

        let add1 = new Function ("x,y", "return x+y");
        document.write(add1(3,4));
        document.write("<BR>");
        
        let add2 = function (x,y){
            return x+y;
        }
        document.write(add2(3,4));
        document.write("<BR>");

        function add3(x,y){
            return x+y;
        }
        document.write(add3(3,4));

        function add4(x,y){
            document.write(arguments);
            document.write("<BR>");
            document.write(arguments[0], arguments[1], arguments[5]); 
            document.write("<BR>");
            return x+y;
        }
        document.write(add4(3,4,5,6,7,"HUMAN")); //7

    </script>
  • 다음과 같은 결과가 출력된다

Untitled

함수 - 지역변수, 전역변수

  • 변수 선언 : var, let, const임
  • var가 포함되지 않은 변수는 전역변수로 활용됨. (window.변수명)

Untitled

Browser 플랫폼

  • 브라우져 플랫폼 : 브라우져 객체를 활용
  • 브라우져 객체 핸들링을 통해서 브라우져의 활용이 가능함

Untitled

Browser 플랫폼 -사용자와 상호작용 가능한 메서드

  • alert : 사용자에게 알람을 주는 메서드
  • prompt : 사용자에게 입력을 받는 메서드
  • confirm : 사용자의 선택을 확인하는 메서드

Untitled

상호작용 - 입력 받은 값으로 실행

  • 코드를 작성해보자
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
<script>
        let x,y;
        // x = window.prompt ("x값 입력 = ", 0);
        // y = window.prompt ("y값 입력 = ", 0);

        // window는 생략 가능
        x=eval(prompt("x 값 입력 = ", 0)); 
        y=eval(prompt("y 값 입력 = ", 0)); 
        alert(x+y);

        // 정수형으로 변환
        x=parseInt(prompt("x 값 입력 = ", 0)); 
        y=parseInt(prompt("y 값 입력 = ", 0)); 
        alert(x+y);

        // 실수형으로 변환
        x=parseFloat(prompt("x 값 입력 = ", 0)); 
        y=parseFloat(prompt("y 값 입력 = ", 0)); 
        alert(x+y);

        let answer;
        answer = confirm("정말로 삭제하시겠습니까?");
        document.write(answer);
        document.write("<BR>");
        if(answer) 
						document.write("삭제");
        else
						document.write("취소");
    </script>
  • 결과는 다음과 같다

Untitled

  • confirm이 어떤 식으로 적용되는지 확인

Untitled

Browser 플랫폼 -이벤트 기반 프로그래밍

  • 사용자 이벤트에 의해 처리하는 방식
  • 사용자 이벤트 : Keyboard 입력 / 마우스 move / 마우스 클릭 등

Untitled

Browser 플랫폼 – 이벤트 기반 함수호출

  • 사용자 이벤트를 함수적으로 호출하여 프로그램의 간소화 가능

Untitled

Browser 플랫폼 - 객체 활용하여 HTML 문서로 변경

  • 윈도우 객체에 값 전달하여 HTML 문서의 변경

Untitled

Button

  • 버튼을 사용해보자
  • 버튼을 누르면 함수가 적용되도록 작성
  • 버튼을 누르고 나면 텍스트창으로 변환되도록 의도
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function printResult1(){
            let x, y;
            x = eval(prompt ("x값 입력 = ", 0));
            y = eval(prompt ("y값 입력 = ", 0));
            alert (x+y);
        }
        
        function printResult2(){
            let x, y;
            x = eval(prompt ("x값 입력 = ", 0));
            y = eval(prompt ("y값 입력 = ", 0));
            btn1.value = x+y;
            btn1.type = "text";
        }
    </script>
</head>
<body>
    <input type="button" value="클릭1" onclick="alert('안녕하세요');">
    <input type="button" value="클릭2" onclick="printResult1();">
    <input type="button" value="클릭3"
    onclick="printResult2();" id="btn1">
</body>
</html>

Browser 플랫폼 – 여러 스크립트 활용시 문제점

  • 윈도우 객체에 값 전달하여 HTML 문서의 변경

Untitled

Browser 플랫폼 – getElementById

  • getElementById : 엘리먼트(일반적으로 tag) ID를 통한 엘리먼트 객체 획득

Untitled

Browser 플랫폼 – onload시 2개의 함수 호출방법

  • onload를 통해 1개의 함수 호출은 가능하나 2개의 기능을 순차적 실행은 불가함.
  • 이럴 때는 addEventListener를 통해서 처리 가능

Untitled

  • addEventListener를 사용해보자
  • html파일을 작성하고 함께 사용할 js파일도 작성한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Js_Exam_15_1.js"></script>
    <script src="Js_Exam_15_2.js"></script>
</head>
<body>
    <input type="button" value="클릭5" id="btn5">
</body>
</html>
  • Js_Exam_15_1.js
1
2
3
4
5
6
7
8
9
10
11
12
// window.onload = function(){
window.addEventListener("load", function(){
    let printBtn = window.document.getElementById("btn5");
    printBtn.onclick = function(){
        let x,y;
        x=eval(prompt ("x값 입력 = ", 0));
        y=eval(prompt ("y값 입력 = ", 0));
        btn5.type = "text";
        btn5.value = x+y;
    };    
}
);
  • Js_Exam_15_2.js
1
2
3
4
5
// alert("Hi, 휴먼교육센터");

window.addEventListener("load", function(){
    alert("Hi, 휴먼교육센터");
});
  • 결과 - 두 js파일에 담긴 기능이 모두 구현되었다.

Untitled

계산기 만들기

  • 간단한 계산기를 만들어보자
  • 일단 (+) 기능부터 시작
  • calc_01.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>계산기</title>
    <script src="calc_01.js"></script>
</head>
<body>
    <input type = "text" id = "txt1"> +
    <input type = "text" id = "txt2"> 
    <input type = "button" id = "add" value="="> 
    <input type = "text" id = "sum" value = 0> 
    
</body>
</html>
  • calc_01.js
1
2
3
4
5
6
7
8
9
10
window.addEventListener("load", function(){
    let btnPrint = this.document.getElementById("add");
    btnPrint.onclick = function(){
        let x, y;
        x = parseInt(document.getElementById("txt1").value);
        y = parseInt(document.getElementById("txt2").value);
        sum.value = x+y;

    };
});
  • (+) 기능이 구현되었다

Untitled

Posted Updated  minkuen frontEnd / html & css9 minutes read (About 1373 words)

html & css 기초 되집기2

사전 준비

Untitled

  • 다운로드 받은 파일 압축풀기
  • 파일 우클릭 → git bash → code .

ch03/index.html

  • Do it! 웹 사이트 따라 만들기 78p
  • 교재 내용대로 작성된 html파일을 열어보자

Untitled

  • 해당 html에서 Web developer를 이용해 CSS를 제거하면 다음과 같다.

Untitled

  • 해당 그림의 html파일이다
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
<title>이지스퍼블리싱</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
<!-- 전화, 주소, 이메일 자동 링크 없앨 때 -->
<!--<meta name="format-detection" content="telephone=no, address=no, email=no" />-->
<!-- 기본 포맷 삭제 -->
<!--<meta name="format-detection" content="no" />-->
<meta name="title"  property="og:title" content="이지스퍼블리싱">
<meta name="images" property="og:image" content="./images/link_thumb.jpg">
<meta name="description" property="og:description" content="이지스퍼블리싱">
<meta name="type" property="og:type" content="article">
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="./js/ui.js"></script>
<link rel="stylesheet" type="text/css" href="./css/ui.css">
</head>
<body>
	<section id="wrap">
		<h1>이지스퍼블리싱</h1>
		<header>
			<!-- alt = 이미지를 읽을 수 없을 때 대응하는 대신 출력 -->
		 	<strong class="logo_box"><img src="./images/mainLogo.png" alt="이지스퍼블리싱"></strong>
		 	<nav>        
		 		<ul>        
					 <!-- 링크를 달기 전의 상태 -->
		 			<li><a href="#">회사소개</a></li>        
		 			<li><a href="#">도서소개</a></li>        
		 			<li><a href="#">FAQ</a></li>        
		 			<li><a href="#">Contact Us</a></li>    
		 		</ul> 
		 	</nav>
		</header> 
		<section id="container">
		  	<section id="menu1" class="content">
		  	 	<h2>회사소개</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu2" class="content">
		  	 	<h2>도서소개</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu3" class="content">
		  	 	<h2>FAQ</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  	<section id="menu4" class="content">
		  	 	<h2>Contact Us</h2>
		  	 	<div class="conbox"></div>
		  	</section>
		  </section>    
		  <footer>
		  	  <address>(04003)서울특별시 마포구 잔다리로 109 TEL (02)325-1722 FAX (02)326-1723</address>    
		  	  <p>Copyright(c)2015 이지스퍼블리싱㈜ EasysPublishing Co., Ltd. All Rights Reserved</p> 
		  	  <a href="https://www.facebook.com/easyspub" class="face" title="페이스북으로 이동"></a>    
		  	  <a href="https://twitter.com/easyspub" class="twit" title="트위터로 이동"></a>    
		  	  <a href="https://www.instagram.com/easyspub_book/" class="instar" title="인스타그램으로 이동"></a>
		  </footer> 
	</section>
</body>
</html>
  • 다음 css 파일을 적용하면 맨 첨음 그림과 같이 출력된다.
  • 가상요소에 대한 내용 참고 : 35~37, 92페이지
    • 참고자료 : Do it. 웹 사이트 따라 만들기
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
@charset "utf-8";
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, code, del, 
dfn, em, img, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, 
td, hr{margin:0;padding:0;font-size:100%;box-sizing: border-box;}
body{height:100%;min-height:100%;font-family:'Noto Sans Korean','Malgun Gothic','맑은고딕','돋움',dotum, sans-serif;font-size:16px;color:#737373;line-height:1.5;background:url(../images/content_bg4.png) repeat;}
h1, h2, h3, h4, h5, h6 {font-weight:normal}
ol, ul, li {list-style:none}
table {width:100%; border-collapse:collapse;border-spacing:0}
form, fieldset, iframe {display:block;border:0}
img, button {border:0 none;vertical-align:top;}
hr {height:0; display:none}
i, em, address{font-style:normal}
label, button{cursor:pointer}
blockquote, q {quotes:none}
caption, legend {overflow:hidden;visibility:hidden;position:absolute;width:0;height:0;padding:0;margin:0;font-size:0;text-indent:-100%;white-space:nowrap;z-index:-1}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block;box-sizing: border-box;}
input, textarea, select, button {font-family:'Noto Sans Korean','Malgun Gothic','맑은고딕','돋움',dotum, sans-serif;font-size:16px;color:#919090;line-height:1.5;letter-spacing:0;vertical-align:middle; border:none;}
input, textarea {margin:0;padding:0;  background:none; box-sizing:border-box;}
textarea {resize:none}
a {color:#919090;text-decoration:none}
a:link, a:visited {text-decoration:none}
a:hover {text-decoration:none}
.blind{display: none;overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;margin: 0; font-size: 0;line-height: 0; text-indent: -9999em;visibility: hidden;outline: none;z-index: -1;}
html,body{overflow:hidden;height:100%;}

/*layout*/
/* 오른쪽 padding을 180px */
#wrap{width:100%; height:100%; padding-right:180px;}

/* 자식. 보이지 않게 함 */
#wrap > h1{font-size:0;}

/* 자손. 로고의 위치를 절대위치로 지정 */
header .logo_box{position:absolute; right:35px; top:75px;}

/* 절대 위치 지정한 곳에 100px로 이미지 처리 */
header .logo_box img{width:100px;}

/* repeat-y = 검은색 배경에 관여. z-index = 11번째 위치의 높이 */
#wrap header{width:180px; height:100%; position:fixed; right:0px; top:0px; background:url(../images/menu_bg1.png) repeat-y; z-index:11;}
#wrap header nav{width:100%; height:100%;} 

/* flex 이면서 밑으로 나열, 위아래가 같도록 정렬 */
#wrap header nav ul{width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;}

/* margin 은 시계 방향 top, right, bottom, left / ul의 padiing은 .은 적용 안됨 */
#wrap header nav ul li{margin:0px 0px 10px 30px; padding-left:15px; position:relative;} 
#wrap header nav ul li a{font-size:16px; color:#fff; font-weight:600; line-height:30px;}
#wrap header nav ul li:after{content:""; display:block; width:5px; height:5px; border-radius:50%; background:#fff; position:absolute; left:0px; top:13px;}

/* hover(마우스 위에 올라왔을 때) red로 강조함 */
/* on class의 의미는? */
#wrap header nav ul li:hover a,#wrap header nav ul li.on a{color:#ed3140;} 
#wrap header nav ul li:hover:after,#wrap header nav ul li.on:after{background:#ed3140;}
footer{width:180px; position:fixed; right:0px; bottom:0px; padding:0px 20px 30px 20px; font-size:11px; color:#7e7e7e; z-index:12;}
footer address{padding:0px 0px 15px 0px;}

/* transition = 애니메이션의 시간 (4초) */
/* block은 box와 연관된 것 */
footer > a{display:block; width:16px; height:16px; position:absolute; top:-31px; transition:.4s;} 
footer > a.face{background:url(../images/social_b_facebook.png) no-repeat; right:18px;} 
footer > a.face:hover{background:url(../images/social_b_facebook_hover.png) no-repeat;} 
footer > a.twit{background:url(../images/social_b_twitter.png) no-repeat; right:48px;} 
footer > a.twit:hover{background:url(../images/social_b_twitter_hover.png) no-repeat;} 
footer > a.instar{background:url(../images/social_b_instar.png) no-repeat; right:80px;} 
footer > a.instar:hover{background:url(../images/social_b_instar_hover.png) no-repeat;}

/* max-width는 화면 해상도가 1200px이 넘더라도 1200px만 표현, 중앙에 표현 */
/* margin = 0, auto 의미는? --------------------------- */
#container{width:100%; height:100%; position:relative; max-width:1200px; margin:0 auto;} 

/* 4개의 content를 25%로 동일하게 적용 */
#container .content{width:25%; height:100%; position:absolute;} 

/* position이 absolute 이므로 left의 크기가 25%씩 연결되어 붙음 */
/* repeat은 x,y가 모두 적용됨 */
#container #menu1{left:0%; background:url(../images/content_bg1.png) repeat;} 
#container #menu2{left:25%; background:url(../images/content_bg2.png) repeat;} 
#container #menu3{left:50%; background:url(../images/content_bg3.png) repeat;} 
#container #menu4{left:75%; background:url(../images/content_bg4.png) repeat;}

/*가상요소 활용하기*/
#container .content:before,#container .content:after{content:""; display:block; position:absolute;} 
#container .content:before{width:1px; height:100%; background:#000; left:0; top:0; z-index:4;}
#container .content:after{left:30px; top:180px; font-size:25px; font-weight:700; color:#ed3140;}

/* before = 지정한 것을 텍스트 앞에 둔다 */
/* after = 지정한 것을 텍스트 뒤에 둔다 */
#container #menu1:after{content:"회사소개";} 
#container #menu2:after{content:"도서소개";} 
#container #menu3:after{content:"FAQ";} 
#container #menu4:after{content:"Contact Us";}
#container .content .conbox:before{content:""; display:block; position:absolute;} 
#container #menu1 .conbox:before{background:url(../images/main_ico1.png) no-repeat; width:350px; height:260px; right:-10px; top:130px; background-size:100%;} 
#container #menu2 .conbox:before{background:url(../images/main_ico2.png) no-repeat; width:180px; height:470px; right:-30px; top:180px; background-size:100%;} 
#container #menu3 .conbox:before{background:url(../images/main_ico3.png) no-repeat; width:270px; height:310px; right:-60px; top:30px; background-size:100%;} 
#container #menu4 .conbox:before{background:url(../images/main_ico4.png) no-repeat; width:350px; height:400px; right:-170px; top:100px; background-size:100%;}
#container .content h2{opacity:0;}
Posted Updated  minkuen frontEnd / javascript4 minutes read (About 541 words)

Java Script 실습01

Java Script란?

  • 1단계 : HTML 문서란 document 객체로 변환하여 로딩
  • 2단계 : document 객체 기반으로 화면에 보여짐
  • 중간에서 JAVA Script는 이 객체의 정보에 접근하여 관리가 가능

Untitled

JAVA Script 탄생배경

Untitled

데이터 - 값의 종류 및 변환

  • const = 상수. 변하지 않는다
  • 정수 = int
  • 실수 = double
  • 문자 = char
  • 문자열 = string

Untitled

Java Script 사용해보기

  • VSCord에서 다음 코드 작성
  • 를 이용한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("휴먼교육센터");
        console.log("휴먼교육센터");
        document.write("후먼교육센터")
    </script>
</head>
<body>
    
</body>
</html>
  • 해당 html 파일을 열어본다.
  • 작성한 코드가 반영된다. 다른 코드도 같은 방식으로 진행하자

Untitled

데이터 - 참조형 변수

Untitled

데이터 - 배열변수

Untitled

데이터 - 배열 변수 초기화

Untitled

데이터 - list 관리

Untitled

  • splice 까지 실습한 코드이다.
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
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let nums = new Array();
        nums.push(3);
        nums.push(13);
        nums.push(25);
        console.log(nums);  // 배열의 형태로 3,13,25
        
        let n1 = nums.pop(); // 가장 위에 있는 25 제거
        console.log("nums : ", nums);
        console.log("n1 : ", n1);

        let num2 = new Array(2,3,"hello", 7);
        console.log(num2);      // 배열
        console.log(num2[2]);   // "hello"
        let num3 = new Array(2, 3, "hello", 7, new Array(2,3,4));
        console.log(num3[4]);   // [2, 3, 4]
        console.log(num3[4][1]);    // 3

        num2.splice(2);         // 3~4번째가 삭제
        console.log(num2);
        num2.splice(2,1);       // 3번째에서 1개만 삭제 
        console.log(num2);
        num2.splice(2,1, "HUMAN");// 3번째에서 1개 삭제 후 HUMAN 삽입
        num2.splice(2,0, "COMP");
        // 3번째에서 0개 삭제 후 COMP 삽입
        

    </script>
</head>
<body>
</body>
</html>
  • 해당 html의 console 창이다

Untitled

데이터 - object 객체

Untitled

  • 객체에 관해 실습해보았다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
     var exam = {"kor":90, "eng":80, "math":70}
     console.log(exam);
     console.log(exam.kor + exam.math);
     // 자바 스크립트는 배열변수 내에 여러 타입을 담을 수 있다
     var ar = [3, 4, 5, 6, exam, [7,8,9]];

     console.log(ar[1]);     // 4
     console.log(ar[4]);     // {"kor":90, "eng":80, "math":70}
     console.log(ar[4][0]);  // undifined
     console.log(ar[4]["kor"]);  // 90
     console.log(ar[4].math);    // 70
     console.log(ar[5]);     // [7,8,9]
     console.log(ar[5][1]);  // 8
 </script>

  • 결과는 다음과 같다

Untitled

Untitled

Posted Updated  minkuen frontEnd / html & css7 minutes read (About 1028 words)

html & css 기초 되집기

작업 시작

  • VSCord에서 파일을 생성
  • ! + Tab
  • 코드를 작성

스타일 시트 적용

스타일 지정방식 1

  • 다음과 같은 방식으로 정한다.
1
<h1 style="color: blue;font: size 5px;">메인메뉴</h1>
  • 적용된 후의 출력이다

Untitled

스타일 지정방식 2

  • 다음과 같이 설정한다.
  • h1 태그를 설정했으므로 h1으로 출력되는 글은 모두 blue로 나타난다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
        h1{
            color: blue;
            font-size: 5px;
        }
    </style>
</head>
<body>
    <h1>메인메뉴</h1>
    <ul>
        <li>HTML </li>
        <li>CSS </li>
        <li>JAVA </li> 
    </ul>

</body>
</html>

스타일 지정방식 3

  • style.css 파일
1
2
3
4
5
6
7
h1{
    color: red;
    font-size: 15px;
}
li{
    background-color: blue;
}
  • 사용할 css파일의 경로를 지정한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<title>Document</title>
    <link href="./css/style.css" type="text/css" rel="stylesheet">

</head>
<body>
    <h1>메인메뉴</h1>
    <ul>
        <li>HTML </li>
        <li>CSS </li>
        <li>JAVA </li> 
    </ul>

</body>
</html>
  • 다음과 같이 출력된다

Untitled

선택자 (Selector)

  • 스타일 적용에 관한 우선순위를 결정한다

  • tag 기준

    • tag명 = 가장 낮음

  • class 기준

    • .tag명 = 높은

  • id 기준

    • #tag명 = 가장 높음

Untitled

  • 우선순위
    • ID > 속성[id] > 속성[class] > class > tag

Untitled

  • 선택자 : HTML내의 Tag를 선택하는 것 (Tag = Element)
  • 선택자는 Basic Selector와 Combinator로 구분됨.
  • 자손 : ul li
  • 자식 : ul>li

Untitled

  • 형제
  • ol + ul
  • ol 다음에 있는 태그를 대상으로 적용 = ol’s next
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol+ul{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <section id="main">

        <ul>
            <li>CSS4</li>
            <li>CSS5</li>
        </ul>
        <ol>
            <li>HTML4</li>
            <li>HTML5</li>
        </ol>
        <ul>
            <li>AJAX</li>
            <li>JAVASCRIPT</li>
        </ul>
    </section>
</body>
</html>

Untitled

Color

  • 프론트엔드에서 중요한 것은 색이다.

Untitled

  • 다음 코드와 같이 rgb값을 조절해 색을 나타낼 수 있다.
1
background-color: rgba(170, 125, 228, 0.288);

박스

  • Contents가 차지하는 위치의 표현방법
  • padding = contents와 border 간의 여백
  • border = 경계선
  • margin = 이웃 엘리먼트간의 경계

Untitled

  • 다음과 같이 코딩해보자
  • padding = 여백 설정
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
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border: red solid 1px;
            width: 400px;
            height: 300px;

            /* 시계방향 */
            padding-top: 10px;
            padding-right: 20px;
            padding-bottom: 30px;
            padding-left: 40px;

            /* 모든 padding이 동일*/
            /* padding: 10px;
            margin: 10px; */
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus perspiciatis, atque harum dolore blanditiis delectus. Dolores suscipit, neque nobis totam molestiae amet veniam ratione ullam debitis! Laboriosam saepe possimus fuga.
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus perspiciatis, atque harum dolore blanditiis delectus. Dolores suscipit, neque nobis totam molestiae amet veniam ratione ullam debitis! Laboriosam saepe possimus fuga.
    </p>
</body>
</html>
  • 다음과 같이 box 적용된다

Untitled

Box 모델 주의사항

  • 마진겹침

Untitled

  • 다음 코드를 작성해보자
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:900px;
            margin: 10px;
        }
        #small{
            border: 10px solid black;
        }
        #large{
            border: 30px solid black;
        }
    </style>
</head>
<body>
    <div id="small">휴먼교육센터1</div>
    <div id="large">휴먼교육센터2</div>
</body>
</html>

Untitled

Position

  • 위치 조정 가능

Untitled

  • relative를 사용하면 다음과 같다
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       div{
           border:1px solid gray;
           margin:10px;
           
           /* 생략가능
           position:static; */
           position:relative;
       }
       #me{
           left:100px;
           top:100px;
       }

    </style>
</head>
<body>
    <div>휴먼교육센터</div>
    <div id="parent">present
        <div id="me">child</div>
    </div>

</body>
</html>
  • static과 달리 child 가 밖으로 나간다

Untitled

  • static
  • relative
  • absolute
  • fixed

Untitled

레이아웃

  • layout 생성 순서

Untitled

플랙스

  • layout 생성에 사용한다
  • Container = 행
  • item = 행 내의 세부 layout

Untitled

  • flex를 사용해본다.
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            background-color: yellow;
            display: flex
        }
        .item{
            background-color: green;
            border: 1px solid black;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    
</body>
</html>
  • row 속성 사용 : 행 방향으로 전개된다

Untitled

Untitled

Holy Grail Layout

  • 다음과 같이 구성하는 layout이다

Untitled

  • 직접 사용해보자
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            display:flex;
            flex-direction: column;
        }
        header{
            border-bottom: 1px solid grey;
            padding: left 20px;
        }
        footer{
            border-top: 1px solid gray;
            padding-left: 20px;
        }
        .content{
            display:flex;
            flex-direction: row;
        }
        .content nav {
            border-right: 1px solid grey;
        }
        .content aside {
            border-left: 1px solid grey;
        }
        nav, aside{
            flex-basis:150px;
            flex-shrink: 0;
        }
        main{
            padding:10px;
        }

    </style>
</head>
<body>
    <div id="container">
        <header>
            <h1>휴먼교육센터</h1>
        </header>
        <section class="content">
            <nav>
                <li>학원소개</li>
                <li>과정소개</li>
                <li>게시판</li>
            </nav>
            <main>
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla ea consectetur eos in labore. Laboriosam, recusandae perspiciatis quidem veniam eveniet quas, porro perferendis corrupti expedita deserunt quam aliquam, doloribus fugit.
                Labore quam delectus sed quia eius quibusdam quos eaque animi harum pariatur dolore consectetur nam excepturi molestias maxime cumque ducimus necessitatibus corporis beatae natus possimus est officia, ipsam deserunt! Inventore.
            </main>
            <aside>
                AD = 광고
            </aside>
        </section>
        <footer>
            <a href="http://www.human.or.kr">홈페이지</a>
        </footer>
    </div>
</body>
</html>
  • 결과는 다음과 같다

Untitled

Posted Updated  minkuen frontEnd / html & css8 minutes read (About 1152 words)

html 기초 되집기

경로 설정

  • 네이버 화면이 index.html
  • 첫 화면이 index.html

Untitled

폴더 구조를 어떻게 할 것인가?

  • root 밑에 파일을 다 나열할 수도 있다
  • 그러나 이건 별로다
  • 권고사항은 index.html에서 버튼을 클릭할때 링크로

상대 경로

  • 나를 기준으로 상대적으로 다른 폴더나 파일을 찾아간다.
  • 절대경로는 root폴더가 기준이 된다. 지금은 HTML폴더

부모 폴더 찾기

../ → 부모 폴더로 간다

폴더 경로 현황

Untitled

index.html

Untitled

notice.html

Untitled

login.html

Untitled

절대 경로

  • 모든 파일에서 절대 경로를 사용하면 똑같다.

Untitled

  • 절대 경로가 쉬워 보이지만, 나중에 폴더를 바꾸게 되면 더 복잡해진다.
  • 따라서, 케바케.
  • 보통 절대경로를 쓸지 상대경로를 쓸지는 PM이 결정한다.

Untitled

웹문서 작성 1단계 - 콘텐츠 작성하기

  • 작성하기 전에 어떻게 생겼는지 확인해보자

Untitled

web developer 설치

  • 구글링 : chrome web store
  • chrome web store 검색 : web developer

Untitled

web developer 사용법

  • 화면 우측 상단 ‘퍼즐모양’ 버튼 클릭

Untitled

  • Web Developer 선택 후 다음 내용 선택
  • CSS → Disable All Styles

Untitled

  • CSS가 제거된 네이버 화면

Untitled

웹문서 작성 2단계 - 콘텐츠 블록의 종류

  • 콘텐츠를 작성했다 치고

  • head 부분은 거의 표준화가 되서 신경 쓸 게 없다.

  • UL

Untitled

입력폼

Untitled

제목 입력

  • h1 ~ h6 사용하여 크기 조절 가능

Untitled

목록

  • UL : Unordered List (순서가 없는 것에 적합)
  • OL : Ordered List (순서가 있는 것에 적합)
  • DL : Definition List (데이터 정의하는 것에 적합)
  • LI : List Item

Untitled

입력폼

  • password 타입을 가지게 되면 보이지 않게 된다.

Untitled

콘텐츠 작성 실습

링크 : https://www.newlecture.com/

Untitled

  • 다음과 같이 제작해 보자

Untitled

인풋 검색 상자

  • 텍스트 입력 창 생성
  • 버튼 생성

Untitled

콤보상자

  • 콤보 생성

Untitled

테이블

  • 테이블 생성 양식
  • border 속성으로 구분 가능
    • border = 0으로 하면 경계선이 사라진다

Untitled

  • tr → table record
  • td → table data
  • 지금은 직접 넣어줬지만, 나중에는 jsp와 스프링으로 데이터베이스를 끌어오게 된다.

Untitled

웹문서 작성 3단계 - outline 설정하기

  • 영역을 구분한다

Untitled

CSS

  • Cascading Style Sheet
  • HTML 문서에 스타일을 입히는 작업이다

Untitled

영역 구분하기

  • 코드에서 해당 부분을 header로 구분할 것이다

Untitled

  • 로 코드를 감싼다.
  • 다음과 같이 표시한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<header>
      
  <h1> 뉴렉처 온라인</h1>
  <ul>
      <li>학습가이드</li>
      <li>강좌선택</li>
      <li>answerls</li>
  </ul>
  <input type="text">
  <input type="submit" value="클릭">
  <ul>
      <li>home</li>
      <li>로그인</li>
      <li>회원가입</li>
  </ul>
  <ul>
      <li>마이페이지</li>
      <li>고객센타</li>
  </ul>
  
  </header>
  • main, footer도 마찬가지로 포장한다
    • ,
      를 코드의 위아래로 두면 된다.
  • 남는 부분은 aside로 포장한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<aside>
  <h2>고객센터</h2>
  <h3>고객센터메뉴</h3>
      <ul>
          <nav>
          <li>공지사항</li>
          <li>자주하는 질문</li>
          <li>수강문의</li>
          <li>이벤트</li>
          </nav>
      </ul>
  <h3>협력업체</h3>
  <ul>
      <li>NOTEPUBS</li>
      <li>NAMOOLAB</li>
  </ul>
  </aside>

섹션

  • css로 전환할 때 디자인을 적용하기 위한 사전단계
  • 영역구분과 마찬가지로 표시한다.
    • 단, section의 안쪽은 section과 함께 Tab으로 들여쓰기 해준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<header>
      <section>
      <h1> 뉴렉처 온라인</h1>
      <ul>
          <li>학습가이드</li>
          <li>강좌선택</li>
          <li>answerls</li>
      </ul>
      <input type="text">
      <input type="submit" value="클릭">
      <ul>
          <li>home</li>
          <li>로그인</li>
          <li>회원가입</li>
      </ul>
      <ul>
          <li>마이페이지</li>
          <li>고객센타</li>
      </ul>
      </section>
  </header>

라인 영역 구분

  • ul li
  • ul li 의 경우, 라인 하나를 통째로 사용한다
1
2
3
4
5
<ul>
        <li>학습가이드</li>
        <li>강좌선택</li>
        <li>answerls</li>
    </ul>
  • 해당 코드를 다음과 같이 붙여써보자
1
2
3
<ul>
        <li>학습가이드</li>li>강좌선택</li><li>answerls</li>
    </ul>
  • 위 두 코드 모두 다음과 같이 출력된다

Untitled

  • 의 경우, **라인의 일부**만 ****사용할 수 있다
1
2
3
4
5
6
7
8
9
10
11
<div>text1</div>
  <div>text1</div>
  <div>text1</div>

  <br>		

<div>
      <a>열공</a>
      <b>화이팅</b>
      <i>응원합니다.</i>
  </div>
  • 다음과 같이 붙여써보자
1
2
3
4
5
6
7
<div>text1</div>
  <div>text1</div>
  <div>text1</div>

  <br>		

	<div><a>열공</a><b>화이팅</b><i>응원합니다.</i></div>
  • 위 두 코드의 결과는 동일하다

Untitled

Posted Updated  minkuen frontEnd / javascript7 minutes read (About 980 words)

Java Script 실습3

사전작업

  • 살행할 폴더 우클릭 : git bash here

  • VSCord 작동 : code .

  • 폴더, 파일 생성

  • PROJECT 아래에 생성

    • 폴더 생성 : step05_js
    • 파일 생성 : ch03_variables.html

JavaScript 작성

  • ch03_variables.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1 id = "string">Hello World!</h1>
        <h1 id = "number"> 123 </h1>
    </center>
    <script>
        var firstName = "evan";
        var ageNum = 30;
        document.getElementById('string').innerHTML = firstName;
    </script>
</body>
</html>
  • step05_js 폴더에서 ch03_variables.html을 오픈
  • 페이지가 출력된다.

Untitled

연산 결과 출력

  • ch04_math_js.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document4</title>
</head>
<body>
    <center>
        <h1 id = "string">Hello World!</h1>
        <h1 id = "addition"> 123 </h1>
    </center>
    <script>
        /*
            사칙연산 구현하기
        */
        var num_1 = 10;
        var num_2 = 20;
        document.getElementById('addition').innerHTML = num_1 + num_2;
    </script>
</body>
</html>
  • step05_js 폴더에서 ch04_math_js.html을 오픈
  • 페이지에 연산 결과인 30이 출력된다.

Untitled

연산 결과 출력(boolean)

  • ch05_operators.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document4</title>
</head>
<body>
    <center>
        <h1 id = "string">Hello World!</h1>
        <h1 id = "addition"> 123 </h1>
    </center>
    <script>
        /*
            사칙연산 구현하기
        */
        var num_1 = 10;
        var num_2 = 20;
        document.getElementById('addition').innerHTML = num_1 + num_2;
    </script>
</body>
</html>
  • step05_js 폴더에서 ch05_operators.html을 오픈
  • 페이지에 연산 결과인 true, false가 출력된다.

Untitled

조건문

  • ch06_conditional.html 에 다음 내용 작성
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
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1 id = "demo"> your_domain </h1>
    </center>
    <script>
        firstName = "john";

        if(firstName = "john"){
            document.getElementById("demo").innerHTML = firstName;
        } else if (firstName = "ddd") {
            document.getElementById("demo").innerHTML = "Hello my name is!";
        } else {
            document.getElementById("demo").innerHTML = "이름이 다름!";
        }
    </script>
</body>
</html>
  • step05_js 폴더에서 ch06_conditional.html을 오픈
  • 페이지에 조건문에 의한 결과 출력

Untitled

다중 조건문

  • ch07_multiple_condition.html 에 다음 내용 작성
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
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1 id = "demo"> your_name </h1>
    </center>
    <script>
        firstName = "ABC";
        ageNum = 30;
        // %% --> AND
        // || --> OR

        if(firstName = "John" && ageNum == 30){
            document.getElementById('demo').innerHTML = firstName;
        } else if (firstName = "my name is") {
            document.getElementById("demo").innerHTML = "Hello my name is!";
        } else {
            document.getElementById("demo").innerHTML = "이름이 다름!";
        }
    </script>
</body>
</html>
  • step05_js 폴더에서 ch07_multiple_condition.html을 오픈
  • 페이지에 조건문에 의한 결과 출력

반복문

  • ch08_arrays.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <center>
        <h1 id = "demo">arrays</h1>
    </center>
    <script>
        var pizzaToppings = ['Pepperoni', 'Mushroom', 'Sausage', 'cheese'];
        for (i=0; i < pizzaToppings.length; i++) {
            document.write(pizzaToppings[i] + '<br/>');
        }
    </script>
</body>
</html>
  • step05_js 폴더에서 ch08_arrays 오픈
  • 반복문에 의한 결과 출력

Untitled

입력

  • ch09_prompt.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/myscript.js"></script>
</head>
<body>
    <center>
        <h1 id = "demo">Prompt</h1>
    </center>
    <script>
        var yourName = prompt("이름을 적어주세요!!");
        console.log(yourName);
        document.write(hello(yourName));
    </script>
</body>
</html>
  • myscript.js 에 다음 코드 작성
1
2
3
4
5
document.getElementById('demo').innerHTML="자바스크립트";

function hello(firstName) {
    return "안녕하세요!" + firstName;
}
  • step05_js 폴더에서 ch09_prompt.html 오픈
  • 입력 프롬프트 출력

Untitled

난수

  • ch10_random_num.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/myscript.js"></script>
</head>
<body>
    <center>
        <h1 id = "demo">Random Numbers</h1>
    </center>
    <script>
        document.write(Math.floor(Math.random() * 100 ) + 1);
    </script>
</body>
</html>
  • step05_js 폴더에서 ch10_random_num.html 오픈
  • 난수 출력

Untitled

입력과 출력

  • ch11_web_forms.html 에 다음 내용 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/myscript2.js"></script>
</head>
<body>
    <center>
        <h1 id = "demo">Input , Output</h1>
    </center>
    <p>안녕하세요, 이름을 입력하세요:</p>
    <input id = "name">
    <button type="button" onclick="hello()">제출</button>
    <p id = "output"></p>
</body>
</html>
  • 파일 생성
  • project/step05_js/js 아래에 생성
    • 파일 생성 : myscript2.js
    • 다음 코드를 작성한다.
1
2
3
4
5
// Functions
function hello() {
    var firstName = document.getElementById('name').value;
    document.getElementById('output').innerHTML = "정답 :  " + firstName;
}
  • step05_js 폴더에서 ch11_web_forms.htmll 오픈
  • 입력하면 후 출력이 가시적으로 표현된다.

Untitled

계산기(더하기)

  • ch12_flash_cards.html 에 다음 내용 작성
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
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/myscript2.js"></script>

</head>

<body>
    <br />
    <center>
        <h1 id="demo">
            <script>
                var numOne = Math.floor(Math.random() * 10) + 1;
                var numTwo = Math.floor(Math.random() * 10) + 1;

                document.write(numOne + " + " + numTwo); 

                // 계산 결과
                // console.log(correctAnswer);

                var correctAnswer = numOne + numTwo;
                /*
                document.write(Math.floor(Math.random() * 10) + 1);
                document.write(" + ");
                document.write(Math.floor(Math.random() * 10) + 1);
                */
            </script>
        </h1>
    <p>답변을 입력하세요:</p>
    <input id="answer">
    <button type="button" onclick="addition()">제출</button>
    <input type="button" value = "새로운 문제 클릭!" onclick="newCard()">
    <br /><br />
    <p id="output"></p>
    <p id="solution"></p>
    </center>
</body>

</html>
  • myscript2.js 에 다음 코드 작성
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
32
33
34
35
36
37
38
// Functions
function hello() {
    var firstName = document.getElementById('name').value;
    document.getElementById('output').innerHTML = "정답 :  " + firstName;
}

// addition()
function addition() {
    var ourAnswer = document.getElementById("answer").value;
    console.log(ourAnswer);

    // 문자열 처리
    if (isNaN(ourAnswer)) {
        document.getElementById("output").innerHTML = "입력한 " + ourAnswer + "는 숫자가 아닙니다!";

    // 숫자 처리
    } else {
        // 정답일 때,
        document.getElementById("output").innerHTML = ourAnswer;
        if(ourAnswer == correctAnswer) {
            document.getElementById("solution").innerHTML = "정답입니다!";
        } else { // 정답이 아닐 때,
            document.getElementById("solution").innerHTML = "정답이 아닙니다!";
        }
    }
}

function newCard() {
    document.getElementById('output').innerHTML = ""
    document.getElementById('answer').value = ""
    document.getElementById('solution').innerHTML = ""
    numOne = Math.floor(Math.random() * 10) + 1;
    numTwo = Math.floor(Math.random() * 10) + 1;

    document.getElementById('demo').innerHTML = numOne + " + " + numTwo;
    correctAnswer = numOne + numTwo;

}
  • step05_js 폴더에서 ch12_flash_cards.htm 오픈
  • 더하기 한정으로 계산 기능이 구현되었다.

Untitled

Untitled

Follow

Links

Categories

Recents

Archives

Tags

HTML6
JPA11
JPA 기초11
Java9
JavaScript1
NiFi1
Notion4
PL/SQL4
R2
R Markdown1
VScord1
Vue.js7
Vue.js 기초7
airflow4
anaconda1
apache1
chatbot5
crawling4
elasticsearch1
git1
github blog1
heroku4
javascript10
kakao_chatbot5
kibana1
machine learning22
oracle15
pipeline1
postgreSQL5
python30
setting14
spark7
wsl21
생활코딩1

Subscribe for updates

You need to set client_id and slot_id to show this AD unit. Please set it in _config.yml.

follow.it

×