20220531 TIL

이미지 슬라이더

const list = document.querySelector('.list')
const lists = document.querySelectorAll('.list li')
const title = document.querySelector('.title')
const imgSlider = document.querySelector('#imgSlider')
list.addEventListener('click',(e)=>{//'click',function(e){}
    let selected = e.target;
    let selectedIndex = selected.dataset.index;
    let selectedText = selected.innerText;
    console.log(e.target.innerText)
    let targetPos = -250 * selectedIndex;//left값으로 넣어줌
    console.log(targetPos)
    imgSlider.style.left = `${targetPos}px`;//뒤에 단위 붙여줘야함
    title.innerText=selectedText;
})

버튼

const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const numPrint = document.querySelector('.num');
let current = 1
prevBtn.addEventListener('click',()=>{
    current--;
    updateNum()
})
nextBtn.addEventListener('click',()=>{
    current++;
    updateNum()
})
function updateNum(){
    if(current<0){
         current=5;
    }else if(current>5){
        current=1;
    }
    numPrint.innerText=current;
}

이미지 슬라이더와 버튼

클론

const lists = document.querySelector('.gnb') 
const list = document.querySelectorAll('.gnb li')
//li a 복제하기
list.forEach((ele)=>{
    let newA = ele.children[0].cloneNode(true);//cloneNode : 대상노드.클론노드(). 해당 노드만 복제하려면 false(기본값). 자식들까지 다 복제하려면 true
    console.log(newA)
    newA.style.opacity = '1';
    ele.appendChild(newA);//appendChild마지막자식
    //console.log(ele.childNodes)//(text, a, text) 전체 노드 다 받아옴
    //console.log(ele.children)//elimentcollection(a) 엘리먼트 태그만 받아옴 둘다 유사배열임
}) 
list.forEach((ele)=>{
    let childA = ele.children
    console.log(childA)
    console.log(childA.length)
    //over
    ele.addEventListener('mouseover', ()=>{
    for(let i=0;i<childA.length;i++){
        childA[i].style.top='-60px'//transition, position css에 미리 있어야함
    }
    })
    //out
    ele.addEventListener('mouseout', ()=>{
    for(let i=0;i<childA.length;i++){
    childA[i].style.top='0px'
    }
    })
})

enter/leave over/out 차이
over : 요소가 중첩되어있을 때, 하위요소 사이에서 움직이는것(요소 사이 공백에 걸쳤을때)도 out으로 인식함.(over out 이 반복해서 일어나 떨리는것처럼 보일 수 있음.)
enter : 핸들러를 지정한 요소 하나 안에서 움직일때 leave 발생하지 않음.

keyevent

        const face = document.querySelector('.face');
        let leftValue = window.getComputedStyle(face).left;
        leftValue=parseInt(leftValue);//원래 있는 값을 정수로 전환해서 재할당
        let topValue = window.getComputedStyle(face).top;
        topValue=parseInt(topValue);
        console.log(leftValue+'\n'+topValue);
        //자리수 빼고 정수화 : parseInt
        window.addEventListener('keydown', (e) => {
            if(e.keyCode == '37'){
                leftValue-=60;
                face.style.left = `${leftValue}px`
            }else if(e.keyCode == '39'){
                leftValue+=60;
                face.style.left = `${leftValue}px`
            }else if(e.keyCode == '38'){
                topValue-=60;
                face.style.top = `${topValue}px`
            }
            else if(e.keyCode == '40'){
                topValue+=60;
                face.style.top = `${topValue}px`
            }
        })

mouseevent

scroll event

const body = document.querySelector('body');
	const pageHeader = document.querySelector('.pageHeader');
	document.addEventListener('scroll',()=>{
		let nowScroll = document.documentElement.scrollTop;👈
		if(nowScroll>250){
			pageHeader.classList.add('fix');
		}else{
			pageHeader.classList.remove('fix');
		}
	})

1. documentElement : 전체 문서 객체 html 받아옴.
2. scrollTop :

sticky

position:sticky
1. 부모요소를 기준으로 그 안에서 위치가 고정되어 스크롤에 따라 움직임.
2. explorer에서는 안됨. edge이상이어야함.
3. 부모요소에 height값이 무조건 있어야 함.
4. 부모요소에 overflow 속성이 적용 되어있으면 sticky 적용 안됨.