[수업내용] 2022.08.16.(+스크롤이벤트)

2022.08.16. 
수업내용정리
+스크롤이벤트

 

---

그누보드->적응형

 

display:block

width: 100%, auto

박스에서 오토는 채우는 개념

100%는 상속받는 값

height: auto는 트랜지션이 안됨

 

포지션에서 width:auto는 박스의 오토(늘어남)와는 다름

=> 내용물에 따라서 유동적임 그래서 width:100%로ㅇㅇ

 

position:fixed

좌표를 가지되, 스크롤이 없어짐

기준이 없지만, 뷰포인트를 기준으로 하기 때문에 막 튀어남

 

@media (screen and print 생략 가능) = 핸드폰, 컴퓨터screen, 인쇄물print에서 가능

 

반응형에서 메뉴를 fixed를 쓰는 이유는 스크롤이 없기 때문에

 

움직이는 거 조작할 때, 클릭하니까 자바스크립트

이벤트는, css에서는 호버 빼고는 대부분 자바스크립트= css에서는 할 수 있는 게 없음

그래서 자바스크립트를 동적이라고 함 -> DOM event / form에서 전송하고, db에서 꺼내쓰는

 

/ root(d드라이브)로 가라

./ 형제

../ 부모

👉 내 파일 위치를 기준으로 경로를 찾음

 

제이쿼리와 자바스크립트, 리액트의 차이점

DOM

html을 선택해서 일을 시킬 때,

제이쿼리는 $(' ')로 만들어와서 객체한테 일을 시킴 그리고 객체이자 배열임(=배열처럼 들어오기 때문) 순회가 자동으로 됨.

자바스크립트는 document.querySelocto~~~~이런 식 // 순회가 자동으로 되지 않고, for문을 사용해야한다. this를 쓰는 용법이 다름.

this를 쓸 때, 이벤트가 일어났을 때 자신을 잡아올 때 사용

리액트 (ref)

 

슬릭은 제이쿼리기반

 

( ) 는 함수의 의미를 가진다. function

{ } 는 객체의 의미를 가진다. object

[ㅇ]는 배열의 의미를 가진다. array

 

innerText 👉 줄바꿈 자동으로 됨
innerHtml 👉 줄바꿈 안됨

 

window.addEventListener('DOMContentLoaded', () => { 
    const H1 = document.querySelector('h1'); 
    // 제이쿼리: $('h1') 
    H1.addEventListener('click', function () { 
        this.style.color = `green`

    ✔화살표 함수✔
    H1.addEventListener('click', () => { 
        this.style.color = `green`
    })

작동하려면, 
    또는
    H1.addEventListener('click', e => {  
       e.target.style.color = `green` 
    })
    
    또는
    H1.addEventListener('click', () => {  
        
        H1.style.color = `green` 
    })
})

📌화살표 함수에서는 this가 작동하지 않음=없다📌
addEventListener은 콜백함수의 this는 H1을 가르키는데, 화살표함수를 쓰면 H1을 가르키는 게 아님
화살표함수에서는 this 대신에 이벤트가 걸리는 target

 

window.addEventListener('DOMContentLoaded', () => {
    const H1 = document.querySelector('h1');
    const TOGGLE = function () {
        this.classList.add('on') 👉 함수를 여기서 만들고
    }
    // 제이쿼리: $('h1')
    H1.addEventListener('click', TOGGLE) 👉 여기서 실행시킴
})

 

 const dddd = new Swiper('.ddd', {
        loop: true,
        // 슬라이드가 계속 도는

        pagination: {
            el: '.swiper-pagination',
        },

        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
    
        // 슬라이드에 on이 붙으면, 적용할 메소드
        on: {
            init: function () {
                console.log('swiper initialized');
            },
            slideChange: function () {
                console.log(this.realIndex);
                // realIndex: 진짜 인덱스 번호를 반환
            },
        },
        📌 슬라이드-active에 on을 붙이고, remove하기 >
        on: { 
            // init: function () { 
            //     console.log('swiper initialized'); 
            // }, 
            slideChangeTransitionEnd: function () { 
                console.log(this.realIndex); 
                // realIndex: 진짜 인덱스 번호를 반환 
                document.querySelectorAll('.swiper-slide').forEach( 
                    e => e.classList.remove('on') 
                ); 
                document.querySelector('.swiper-slide-active').classList.add('on'); 
            }, 
        },
    });

 

 <h1>나는 <span>지금</span> 잠이 온다. <strong></strong></h1> 
    <div class="ddd"> 
        <!-- 위에는 마음대로 class이름을 바꿀 수 있음 --> 
        <!-- Additional required wrapper --> 
        <div class="swiper-wrapper"> 
            <!-- Slides --> 
            <figure class="swiper-slide itm01">Slide 1</figure> 
            <figure class="swiper-slide itm02">Slide 2</figure> 
            <figure class="swiper-slide itm03">Slide 3</figure> 
            <figure class="swiper-slide itm01">Slide 1</figure> 
            <figure class="swiper-slide itm02">Slide 2</figure> 
            <figure class="swiper-slide itm03">Slide 3</figure> 
            ... 
        </div> 
        <!-- If we need pagination --> 
        <div class="swiper-pagination"></div> 
    </div>
   👉 html






   👉 자바스크립트

// 자바스크립트 소스를 읽어낼 수 있게 써줌. script src를 위에 썻을 경우 
window.addEventListener('DOMContentLoaded', () => { 
    const H1 = document.querySelector('h1'); 
    const TOGGLE = function () { 
        this.classList.add('on') 
    } 
    // 제이쿼리: $('h1') 
    H1.addEventListener('click', TOGGLE); 
    const dddd = new Swiper('.ddd', { 
        loop: true, 
        // 슬라이드가 계속 도는 
        pagination: { 
            el: '.swiper-pagination', 
        }, 
        autoplay: { 
            delay: 2500, 
            disableOnInteraction: false, 
        }, 
        // 슬라이드에 on이 붙으면, 적용할 메소드 
        on: { 
            // init: function () { 
            //     console.log('swiper initialized'); 
            // }, 
            slideChangeTransitionEnd: function () { 
                console.log(this.slides.length, this.realIndex); 
                // realIndex: 진짜 인덱스 번호를 반환 
                document.querySelectorAll('.swiper-slide').forEach( 
                    e => e.classList.remove('on') 
                ); 
                document.querySelector('.swiper-slide-active').classList.add('on'); 
                document.querySelector('h1 strong').innerText = `${this.realIndex + 1} / ${this.slides.length - 2}`; 
            }, 
        }, 
    }); 
    // slick + jQuery일 때: const dddd = $('.ddd').slick(); 
})

 

float를 할 경우,

로고 left

메뉴 left

전화번호 right를 하면 되는데, right는 width를 주면 안됨

 

space-between을 하면 양옆에 너비가 다름 그럴 경우, 로고와 전화번호 부분에 width를 주면 양옆 간격이 같아짐!

 

로고에는 width, height를 되도록 안 주는 게 좋음 변형될 수 있어서.

 

 window.addEventListener('scroll', () => {
        let sct = window.scrollY;
        console.log(sct)
        sct > 0
            ? document.querySelector('#Header').classList.add('on') 👉 ;은 붙이지 않음!
            : document.querySelector('#Header').classList.remove('on')
        👇 아래와 같음
        // if (sct > 0) {
        //     document.querySelector('#Header').classList.add('on')  
        // } else {
        //     document.querySelector('#Header').classList.remove('on')
        // }

 

 

🟣 스크롤이벤트

offset 특정 위치에서 스크롤의 좌표값을 구하는

✔ 스크롤 이벤트를 할 때는 공통된 class 이름을 하는 게 좋음

 

foreach를 못 돌릴 경우, 배열(특징: 순회해야한다)로 만드는 게 좋음

 

  const UL = document.querySelector('nav ul');
    const LI = [...UL.children]; 👉 ul의 li들이 배열이 아니었는데, []을 해서 묶어서 배열로 만들어줌 => 각각에 일을 시킬 수 있음
    console.log(LI);

데이터 등을  배열로 들고 올 거여서 foreach를 아는 게 중요!

배열/변수 중요바리!

const UL = document.querySelector('nav ul');
    const LI = [...UL.children][1]; 👉 인덱스 번호 1의 li인 사업개요가 console에 찍힘
    console.log(LI);
})