20220602 TIL

GURI·2022년 6월 2일

seSAC 기업연계형 프론트엔드 과정

목록 보기

19/33

크기

const winScreen = window.screen.width;//모니터의 해상도. 전체 창 사이즈
const winOuter = window.outerWidth;//전체 브라우저의 너비
const winInner = window.innerWidth;//스크롤바를 제외한 너비

    const winScreen = window.screen.height;//모니터의 해상도. 전체 창 사이즈
    const winOuter = window.outerHeight;//전체 브라우저의 높이
    const winInner = window.innerHeight;//상단바(주소,북마크창),하단바 제외한 높이. 눈에 보이는 body의 높이

    const outer = document.querySelector('#outer');
    const box1 = outer.clientWidth;// 보더를 제외한 패딩까지
    const box2 = outer.offsetWidth;//보더까지 포함한 너비
    const box3 = outer.scrolltWidth;//가시적인 부분의 너비가 아닌 컨텐츠 영역의 크기
    const box4 = outer.getBoundingClientRect().width;//= offset (단 트랜스폼 사용시 렌더링 된 사이즈를 받기 때문에 offset과 다르다) object의 값에 접근하려면 .key 추가.

Position

const inner = document.querySelector('#inner');
const posTop = inner.getBoundingClientRect().top;//getBoundingClientRect : 브라우저 좌표 0,0에서 시작함
const posLeft = inner.getBoundingClientRect().left;
const offsetTop = inner.offsetTop;//css 포지션 규칙 따름
const offsetLeft = inner.offsetLeft;

console.log(posTop);//브라우저 상단에서부터 inner까지의 높이
console.log(posLeft);//브라우저 좌측에서 inner 까지의 너비
//right : 브라우저 좌측에서 inner 우측의 너비(left+width)
//bottom : 브라우저 상단에서 inner 하단의 너비(top+height)
console.log(offsetTop);
console.log(offsetLeft);
console.log(scrollY);
console.log(pageYOffset);
console.log(scrollY + posTop);//pageYOffset(scrollY)+getBoundingClientRect().top inner의 좌표
//좌표 구하는 함수
function getPosTop(ele){
return window.scrollY+ele.getBoundingClientRect().top;
}
const posCalc = getPosTop(inner);
console.log(posCalc)

scroll

css
scroll-behavior: smooth;
스크롤을 부드럽게 움직임.

scroll to : 스크롤을 좌표로 이동시킴 scroll by : 스크롤을 수평.수직으로 xy만큼 움직임

    const btn1 = document.querySelector('#btn1');
    const btn2 = document.querySelector('#btn2');
    const div = document.querySelector('div');

    btn1.addEventListener('click',()=>{
        div.scrollTo(0,500);
    })
    
    btn2.addEventListener('click',()=>{
        div.scrollTo({
            top:500,
            left:0,
            behavior:"smooth"
        });
    })

javascript로 smooth 효과 넣기 : object 형식으로 넣음.

스크롤인덱스 만들기

const gnb = document.querySelector('.gnb');
const gnbMenu = document.querySelectorAll('.gnb li');
const section = document.querySelectorAll('.section');

const sectionScroll = (e) => {
    const selected = e.target;
    const index = selected.dataset.index;
    const selectedsection = section[index];
    const selectedsectionPos = selectedsection.getBoundingClientRect().top;
    window.scrollBy(0,selectedsectionPos);
    const selectedsectionColor = window.getComputedStyle(selectedsection).backgroundColor;
    console.log(selectedsectionColor);
    //함수호출
    updateMenuColor(selected,selectedsectionColor);
}
updateMenuColor=(selected,selectedsectionColor)=>{
    gnbMenu.forEach((ele)=>{
        ele.style.color='#999';
    })
    selected.style.color=selectedsectionColor;
}
gnb.addEventListener('click',sectionScroll)

스크롤인덱스 2

.cover .gnb{...position: absolute;left:50%;bottom:0;...}
.cover .gnb.fix{position:fixed;top:0;z-index: 1000;bottom: auto}
fix에서 지정하지 않은 속성은 상속됨. bottom 값이 바뀌므로 지정해줘야함.

    const gnb = document.querySelector('.gnb');
    const gnbli = document.querySelectorAll('.gnb li');
    const section = document.querySelectorAll('.section');
    const gnbPos = gnb.getBoundingClientRect().top;
    console.log(gnbPos)
    //스크롤시 gnb 상단 고정
    const gnbFix = ()=>{
        const nowScroll = document.documentElement.scrollTop;
        //const nowScroll2 = window.pageYOffset
        //const nowScroll3 = window.scrollY 세개가 값이 다 같음.
        if(nowScroll>gnbPos){
            gnb.classList.add('fix')
        }else{
            gnb.classList.remove('fix')
        }
    }
    window.addEventListener('scroll',gnbFix)

    gnb.addEventListener('click',(e)=>{
        const selected = e.target;
        const index = selected.dataset.index;
        const sectionPos = section[index].getBoundingClientRect().top;
        console.log(sectionPos)
        window.scrollBy(0,sectionPos)
    })