Posted 2022-06-24Updated 2022-07-09 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 일부

<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

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

<!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

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

<!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

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에 다음 코드를 추가한다

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 2022-06-22Updated 2022-07-04 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

<!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

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

<!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

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

<!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

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 일부

<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

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 일부

<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

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 일부

<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

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 일부

<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

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 2022-06-20Updated 2022-07-02 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

함수 사용해보기

여러가지 방식으로 함수를 사용해보자

<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

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

코드를 작성해보자

<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

버튼을 사용해보자
버튼을 누르면 함수가 적용되도록 작성
버튼을 누르고 나면 텍스트창으로 변환되도록 의도

<!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파일도 작성한다

<!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

// 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

// alert("Hi, 휴먼교육센터");

window.addEventListener("load", function(){
    alert("Hi, 휴먼교육센터");
});

결과 - 두 js파일에 담긴 기능이 모두 구현되었다.

Untitled

계산기 만들기

간단한 계산기를 만들어보자
일단 (+) 기능부터 시작
calc_01.html

<!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

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 2022-06-16Updated 2022-07-04 minkuen frontEnd / html & css9 minutes read (About 1373 words)

html & css 기초 되집기2

사전 준비

웹 사이트 따라 만들기 : 소스 파일 다운로드
- 링크 : http://www.easyspub.co.kr/30_Menu/DataList/PUB

Untitled

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

ch03/index.html

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

Untitled

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

Untitled

해당 그림의 html파일이다

<!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. 웹 사이트 따라 만들기

@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;}

Reference : Do it! 웹 사이트 따라 만들기
- http://www.easyspub.co.kr/30_Menu/DataList/PUB

Posted 2022-06-16Updated 2022-07-01 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에서 다음 코드 작성
를 이용한다

<!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 까지 실습한 코드이다.

<!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

객체에 관해 실습해보았다.

<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

Reference : Do it! 웹 사이트 따라 만들기
- http://www.easyspub.co.kr/30_Menu/DataList/PUB

Posted 2022-06-15Updated 2022-06-30 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로 나타난다.

<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 파일

h1{
    color: red;
    font-size: 15px;
}
li{
    background-color: blue;
}

사용할 css파일의 경로를 지정한다.

<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

<!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 = 여백 설정

<!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

다음 코드를 작성해보자

<!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를 사용하면 다음과 같다

<!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를 사용해본다.

<!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

여러 속성을 사용해보자
참고 자료
- https://codepen.io/enxaneta/pen/adLPwv

Untitled

Holy Grail Layout

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

Untitled

직접 사용해보자

<!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 2022-06-13Updated 2022-07-01 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

절대 경로

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

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

로 코드를 감싼다.
다음과 같이 표시한다.


<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로 포장한다

<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으로 들여쓰기 해준다.

<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 의 경우, 라인 하나를 통째로 사용한다

<ul>
        <li>학습가이드</li>
        <li>강좌선택</li>
        <li>answerls</li>
    </ul>

해당 코드를 다음과 같이 붙여써보자

1
2
3

<ul>
        <li>학습가이드</li>li>강좌선택</li><li>answerls</li>
    </ul>

위 두 코드 모두 다음과 같이 출력된다

Untitled

의 경우, **라인의 일부**만 ****사용할 수 있다

<div>text1</div>
  <div>text1</div>
  <div>text1</div>

  <br>		

<div>
      <a>열공</a>
      <b>화이팅</b>
      <i>응원합니다.</i>
  </div>

다음과 같이 붙여써보자

<div>text1</div>
  <div>text1</div>
  <div>text1</div>

  <br>		

	<div><a>열공</a><b>화이팅</b><i>응원합니다.</i></div>

위 두 코드의 결과는 동일하다

Untitled

Posted 2022-06-11Updated 2022-06-30 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 에 다음 내용 작성

<!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 에 다음 내용 작성

<!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 에 다음 내용 작성

<!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 에 다음 내용 작성

<!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 에 다음 내용 작성

<!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 에 다음 내용 작성

<!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 에 다음 내용 작성

<!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 에 다음 코드 작성

document.getElementById('demo').innerHTML="자바스크립트";

function hello(firstName) {
    return "안녕하세요!" + firstName;
}

step05_js 폴더에서 ch09_prompt.html 오픈
입력 프롬프트 출력

Untitled

난수

ch10_random_num.html 에 다음 내용 작성

<!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 에 다음 내용 작성

<!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
- 다음 코드를 작성한다.

// 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 에 다음 내용 작성

<!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 에 다음 코드 작성

// 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

Posted 2022-06-09Updated 2022-06-30 minkuen frontEnd / javascript3 minutes read (About 418 words)

Java Script 실습2

사전작업

살행할 폴더 우클릭 : git bash here
VSCord 작동 : code .
폴더, 파일 생성
PROJECT 아래에 생성
- 폴더 생성 : step05_js
- 파일 생성 : ch01_index.html

JavaScript 작성

ch01_index.html 에 다음 내용 작성

<!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>
        <p>안녕하세요!</p>
        <button type="button" onclick="document.getElementById"
        ('demo').innerHTML = Date()">
            버튼을 클릭하세요!
        </button>
        <p id="demo"></p>
    </center>
</body>
</html>

step05_js 폴더에서 ch01_index.html을 오픈
페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

파일 생성
step05_js 폴더 아래에 생성
- 파일 생성 : ch02_1_js.html
ch02_1_js.html 에 다음 내용 작성

<!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>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script>
            document.getElementById('demo').innerHTML="자바스크립트";
        </script>
    </center>
</body>
</html>

step05_js 폴더에서 ch02_1_js.html을 오픈
페이지가 출력된다.

Untitled

스크립트 불러오기 사전준비

파일 생성
step05_js 폴더 아래에 생성
- 파일 생성 : ch02_2_js.html
폴더, 파일 생성
step05_js 폴더 아래에 생성
- 폴더 생성 : js
- js 아래에 파일 생성 : myscript.js
ch02_2_js.html 에 다음 내용 작성

<!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>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>

        <! -- 스크립트 불러오기 -- >
        <script src = "js/myscript.js"></script>
    </center>
</body>
</html>

myscript.js 에 다음 내용 작성

1	document.getElementById('demo').innerHTML="자바스크립트";

step05_js 폴더에서 ch02_2_js.html을 오픈
페이지가 출력된다.
html에 작성하지 않은 스크립트의 출력에 성공했다.

Untitled

버튼

ch02_2_js.html 에 다음 내용 작성

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.getElementById('demo').innerHTML="자바스크립트";
    </script>
</head>
<body>
    <center>
        <p>안녕하세요!</p>
        <p id="demo">adfadfa</p>
        <button type="button" onclick="myFunction()">
            버튼을 클릭하세요!
        </button>
    </center>
</body>
</html>

step05_js 폴더에서 ch02_2_js.html을 오픈
페이지가 출력된다.

Untitled

Posted 2022-06-08Updated 2022-06-30 minkuen frontEnd / javascript3 minutes read (About 498 words)

Java Script 실습1

사전작업

살행할 폴더 우클릭 : git bash here
VSCord 작동 : code .
폴더, 파일 생성
PROJECT 아래에 생성
- 폴더 생성 : step04_js_dom
- 파일 생성 : index.html
- 파일 생성 : main.js

JavaScript 형식

index.html 에 다음 내용 작성

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width">
    <title>Document</title>
    <script src="./main.js"></script>
</head>

<body>
    <h1>자바스크립트 연습</h1>
</body>

</html>

main.js 에 다음 내용 작성

1	console.log("new file!")

step04_js_dom 폴더에서 index.html을 오픈
페이지가 출력된다.
html 페이지에서 우클릭 → 검사
다음과 같이 시스템 로그가 출력되었다.

Untitled

Event

이벤트를 감지하고 출력하는 코드를 작성해본다.
index.html 에 다음 내용 작성

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="./main.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>

main.js 에 다음 내용 작성

const boxEl = document.querySelector(".box");
console.log(boxEl);

boxEl.addEventListener('click', function() {
    console.log('Click!');
    boxEl.classList.add('active');

    /*
    const hasActive = boxEl.classList.contains('active');
    console.log(hasActive);
    */
   // let hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);

   // boxEl.classList.remove('active');
   // hasActive = boxEl.classList.contains('active');
   // console.log(hasActive);
});

1을 마우스로 클릭하면 다음과 같이 출력된다.
Click이라는 이벤트를 감지하고 표시한다.

Untitled

div class

파일 생성
PROJECT 아래에 생성
- 파일 생성 : main2.js
index.html 에 다음 내용 작성

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="./main2.js"></script>

</head>
<body>
    <div class = 'box'>1</div>
    <div class = 'box'>2</div>
    <div class = 'box'>3</div>
    <div class = 'box'>4</div>
</body>
</html>

main2.js 에 다음 내용 작성

const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
});

다음과 같이 시스템 로그가 출력되었다.

Untitled

JS 구조 파악

다음 코드와 실행 결과로 구조를 파악해보자.
main2.js 에 다음 내용 작성

const boxE1s = document.querySelectorAll('.box');
console.log(boxE1s);

boxE1s.forEach(function(boxE1, index){
    // div 클래스면을 box order-1
    boxE1.classList.add('order-${index}');
    console.log(boxE1, index);
    console.log(boxE1.textContent);
    boxE1.textContent = "안녕";
    console.log(boxE1.textContent);
});

index.html 의 1 2 3 4를 건드리지 않았음에도 다음과 같이 출력되었다.
이를 통해 페이지에 최종적으로 영향을 미치는 것은 JS임을 알 수 있다.

Untitled

이벤트 객체

이벤트 관리

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

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

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

마우스 이벤트 실습

마우스 이벤트 실습 - trigger

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

DOM 모델

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

실습01

실습02

실습03

실습04

실습 05

실습06

실습07

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

JSON Parse 예제

연산자

제어구조

함수

함수 사용해보기

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

Browser 플랫폼

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

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

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

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

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

Button

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

Browser 플랫폼 – getElementById

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

계산기 만들기

사전 준비

ch03/index.html

Java Script란?

JAVA Script 탄생배경

데이터 - 값의 종류 및 변환

Java Script 사용해보기

데이터 - 참조형 변수

데이터 - 배열변수

데이터 - 배열 변수 초기화

데이터 - list 관리

데이터 - object 객체

작업 시작

스타일 시트 적용

스타일 지정방식 1

스타일 지정방식 2

스타일 지정방식 3

선택자 (Selector)

Color

박스

Box 모델 주의사항

Position

레이아웃

플랙스

Holy Grail Layout

경로 설정

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

상대 경로

부모 폴더 찾기

폴더 경로 현황

index.html

notice.html

login.html

절대 경로

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

web developer 설치

web developer 사용법

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

입력폼

제목 입력

목록

입력폼

콘텐츠 작성 실습

인풋 검색 상자

콤보상자

테이블