본문 바로가기
화면 수업 정리

HTML,CSS,JS 15일차

shchan 2024. 8. 14. 16:27

BOM :

Browser Object Model :

브라우저의 객체를 지칭하는 용어 (window 객체)

DOM : Document Object Model :

Html 문서의 객체를 지칭하는 용어 (body 안에 입력된 태그 객체)

윈도우 종류와 브라우저 화면 배율 등에 따라 달라짐

window.innerHeight : 툴바를 제외한 높이 

window.innerWidth : 스크롤바를 포함한 너비

 

window 메서드 종류

window.open('url','window name','option(size,scroll...)');

window.close(); 창닫기

alert(); / prompt(); input 포함 / confirm(); 확인/취소

setInterval(function,millsecond);

일정 간격 지속적으로 실행문을 실행시킬 때 사용

setInterval(callback function, interval duration);

duration 간격으로 function을 호출

clearInterval(객체); : 삭제가능

 

setTimeout(function, millsecond);

일정 시간 동안 실행문을 실행시킬 때 사용

setTimeout(callback function, duration); duration(millsecond):

시간 후에 function이 실행

setTimeout을 할당한 객체는 clearTimeout(할당한 객체)로 취소가능

millisecond = 1/1000 => 1초 1000

 

location : location 객체는 브러우저의 주소표시줄 입력에 관련된 객체

window.location / window 생략가능

location.href = 'url' : 해당 url로 이동 / history객체 저장

location.replace('url') : 해당 url로 이동 / history객체 저장하지 않고 이동

location.assign('url') : 해당 url로 이동 / history객체 저장

location.reload() : 현재 페이지에서 새로고침

 

history객체 : 브라우저가 저장하고 있는 방문 페이지의 기록을 관리하는 객체

history.back() : 이전페이지로 이동

history.forword() : 다음 방문한 페이지로 이동

history.go(n) : n번째 페이지로 이동 -2(이전 2단계)

브라우저 별로 각자의 저장소를 가지고 있고, (브라우저의 기반)

접근방어를 해놓은 브라우저에서는 작동하지 않음.

 

DOM : Document Object Model html문서 객체 모델

html 하위 태그는 각각의 기능(method), 속성(properties) 을 가지고 있는 문서 객체

element 가져오기 : byId, byClassName, byTagName

document.getElementByid('idName') : 단일 엘리먼트 리턴

document.getElementByClassName('className') : 복수 엘리먼트 리턴 => HTML Collection 타입으로 리턴

document.getElementByTagName('TagName') : 복수 엘리먼트 리턴 => HTML Collection 타입으로 리턴

배열처럼 리턴 index를 사용하여 선택

 

querySelector(), querySelectorAll() node(관리객체)로 리턴하는 메서드

getElementBy** : HTMLCollection 타입으로 리턴 .value, .name, .id 속성으로 접근 가능

querySelector : nodeList 형태로 리턴 [0] index 번호로만 접근이 가능

더 구체적으로 엘리먼트에 접근하고 싶다면 querySelector

빠르고 편리하게 자원을 지원받으려면 getElementBy**

 

element 속성은 크게 두가지로 구분

태그의 속성         /           css(style) 속성

태그의 속성은 태그가 가지고 있는 속성이기 때문에 속성명을 그대로 사용 li.id, input.value, a.href img.src

class는 여러개의 값을 갖는 속성 / 이런 특징을 가지는 속성들은 별도의 속성명을 사용

object.classList : 모든 클래스를 나열

css관련 속성은 style. 을 통해 프로퍼티에 접근 가능

css 속성 중 - font-size => -를 지우고 첫글자를 대문자로 변경 fontSize

 

    <img src="../image/서브이미지1.jpg" alt="옷" id="imgTag" class="a b c d"></a>

    <script>
        const imgTag = document.getElementById('imgTag');
        console.log(imgTag)
        console.log(imgTag.src);
        console.log(imgTag.alt);
        console.log(imgTag.classList);
        console.log(imgTag.id);
    </script>

 

element CSS 적용

tagName.style.css 속성 접근가능.

css 속성 중 - => -를 지우고 첫글자를 대문자로 font-size => fontSize

element.setAttribute(name, value);

 

ex)

    <h1 id="h1">색상변경</h1>
    <input type="color" id="colorValue">
    <button type="button" id="changeBtn">변경</button>

    <script>
        document.getElementById('changeBtn').addEventListener('click' ,() => {
            const h1 = document.getElementById('h1');
            let colorValue = document.getElementById('colorValue').value;
            h1.style.color = colorValue;
        })
    </script>

 

tag classList 속성

class의 속성이 여러개 값이 올 수 있으므로 list 형태로 리턴

리턴 타입 DOMTokenList 객체로 별도의 메서드를 제공

add(), contains(), toggle(), remove()....

 

    <script>
        const ul = document.getElementById('ul');
        console.log(ul);
        console.log(ul.classList);
        
        ul.classList.add('ul2');
        console.log(ul.classList);
        
        // iter 있는지 체크 (true / false)
        ul.classList.contains('iter');
        console.log(ul.classList.contains('iter'));

        // toggle : 있으면 삭제, 없으면 추가
        ul.classList.toggle('iter');
        console.log(ul.classList);
        console.log(ul.classList.contains('iter'));
        
        // replace : 변경
        ul.classList.replace('list', 'list2');
        console.log(ul.classList);

        // remove : 삭제
        ul.classList.remove('list2');
        console.log(ul.classList);

    </script>

 

문제1)  li 추가해보기

 

<body>
    <button type="button" id="btn1">li 한번에 추가</button>
    <button type="button" id="btn2">li 하나씩 추가</button>
    <button type="button" id="btn3">li 하나씩 추가</button>
    <button type="button" id="btn4">li 하나씩 추가</button>
    
    <ul id="ul"></ul>
    <hr>
    <ol id="ol"></ol>
    <hr>
    <ul id="ul2"></ul>
    <hr>
    <ol id="ol2"></ol>
    <hr>

    <script>
        const datas = ['HTML','CSS','JavaScript','SQL'];


        let ul = document.getElementById('ul');
        let ol = document.getElementById('ol');
        let index = 0; 
        document.getElementById('btn1').addEventListener('click', () => {
            let str = '';

            for(let i=0; i<datas.length; i++){
                str += `<li>${datas[i]}</li>`;
            }
            ul.innerHTML = str;
        })

        document.getElementById('btn2').addEventListener('click', () => {
            if (index < datas.length) { 
                ol.innerHTML += `<li>${datas[index]}</li>`;
                index++; 
                }
            })
        
        // CreateElement : element 생성 
        // appendChild : 자식으로 추가

        let i = 0;
        document.getElementById('btn3').addEventListener('click', () => {
            datas.forEach((e)=>{
                let li = document.createElement('li'); // <li></li>
                li.innerText = e
                document.getElementById('ul2').appendChild(li); // ul의 자식으로 추가 ul.innerHTML = li
            })
        })
        document.getElementById('btn4').addEventListener('click', () => {
            if (i < datas.length) {
                let li = document.createElement('li'); 
                li.innerText = datas[i];
                i++;
                document.getElementById('ol2').appendChild(li);
            }
        })



    </script>
</body>

문제2) 여행 준비물 점검목록 만들기 

 

짝수, 홀수번째로 색이 달라져야하며 

X버튼을 누르면 li가 하나삭제되어야함.

CSS

 <style>
        body{
            text-align: center;
            display: flex;
            justify-content: center;
        }
        
        h2{
            font-weight: 700;
            font-size: 30px;
        }
        form{
            background-color: rgb(178, 178, 255);
            height: 100px;
            width: 800px;
        }
        #item{
            height: 40px;
            margin-top: 25px;
            width: 400px;
            padding-left: 20px;
            font-size: 20px;
            
        }
        #itemList li:nth-of-type(even){
            background-color: #99c3f7;
        }
        #itemList li:nth-of-type(odd){
            background-color: rgb(252, 192, 242);
        }
        #itemList li{
            list-style: circle;
            height: 40px;
            line-height: 40px;
            font-weight: 700;
            list-style: none;
        }
        #itemList li button{
            border: none;
            cursor: pointer;
            float: right;
            margin: 13px 5px 5px 5px
        }
        #itemList li:nth-of-type(even) button{
            background-color:  #99c3f7;
        }
        #itemList li:nth-of-type(odd) button{
            background-color: rgb(252, 192, 242);
        }

        #itemList li button:hover{        
            background-color: rgba(58, 58, 58, 0.541);
        }

        #add{
            height: 46px;
            box-shadow: 3px 3px 3px black;
        }
        
        #itemList{
            padding: 0px;
            margin: 0px;
        }

    </style>

 

HTML,JS

<body>
    <div id="wapper">
        <h2>여행 준비물 점검 목록</h2>
        <form action="">
            <input type="text" id="item" autofocus="true">
            <button type="button" id="add">추가</button>
        </form>
        <div>
            <ul id="itemList"></ul>
        </div>
    </div>

    <script>
        let item = document.getElementById('item');
        let itemList = document.getElementById('itemList');

        document.getElementById('add').addEventListener('click', () => {

            let li = document.createElement('li');
            li.innerHTML = `${item.value}<button class='del'>X</button>`;
            // itemList.innerHTML += `<li>${item.value}<button class='del'>X</button></li>`;
            itemList.appendChild(li);

            item.value = '';

        })

        itemList.addEventListener('click', (event) => {
            if (event.target.classList.contains('del')) {  //  del 클래스 확인
                itemList.removeChild(event.target.parentElement);
            }
        })
        
    </script>
</body>

'화면 수업 정리' 카테고리의 다른 글

HTML,CSS,JS 16일차  (0) 2024.08.16
HTML,CSS,JS 14일차  (0) 2024.08.13
HTML,CSS,JS 13일차  (0) 2024.08.12
HTML,CSS,JS 12일차  (0) 2024.08.09
HTML,CSS,JS 11일차  (0) 2024.08.08

'화면 수업 정리' Related Articles

티스토리툴바