Gwni Lab GwniLab

//requestAnimationFrame()을 이용한 보다 효율적인 코딩. function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".srcollTop").innerText = Math.round(scrollTop); // const img = document.querySelector("#section01 .content__item__img"); // img.style.transform = "translateY("+scrollTop/10+"px)"; document.querySelectorAll(".content__ite..

//requestAnimationFrame()을 이용한 보다 효율적인 코딩. function scroll(){ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; document.querySelector(".srcollTop").innerText = Math.round(scrollTop); //forEach 을 이용한 show 클래스 추가 document.querySelectorAll(".content__item").forEach((el,i)=>{ if(scrollTop > el.offsetTop - window.innerHeight/2){ el.classList.add("show"); } }..

//el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동하기 document.querySelectorAll("#parallax__nav li a").forEach(li =>{ li.addEventListener("click", (e)=>{ e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior: "smooth" }) }) }) window.addEventListener("scroll",()=>{ let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; //..

document.querySelectorAll("#parallax__dot a").forEach(el=>{ el.addEventListener("click", (e)=>{ e.preventDefault(); // window.scroll(0, 1000); // window.scroll({left: 0, top: 1000}); // window.scroll({left: 0, top: 1000, behavior: "smooth"}); // window.scrollTo(0, 1000); // window.scrollTo({left: 0, top: 1000}); // window.scrollTo({left: 0, top: 1000, behavior: "smooth"}); //scrollBy는 현재 기준점 을 기..

//el의 속성값 (a태그) href - 아이디 섹션값을 지정해서 클릭하면 부드럽게 이동하기 document.querySelectorAll("#parallax__nav li a").forEach(li =>{ li.addEventListener("click", (e)=>{ e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior: "smooth" }) }) }) //스크롤 값 구하기 window.addEventListener("scroll", ()=>{ //3가지 방법을 쓸 수 있음. // let scrollTop = window.pageYOffset; // let scrollTop = docum..

해상도와 래스터화 해상도(Resolution)와 ppi(pixels per Inch) 해상도란 TV, 모니터, 스마트폰 등 디스플레이 장치에서 화면을 이루는 각각의 면이 몇 개의 픽셀로 이루어져 있는가를 나타내는 것입니다. 해상도는 이미지의 가로와 세로에 몇 개의 화소(픽셀)가 있는지를 뜻합니다. 위 이미지를 보면 해상도에 따라 이미지가 다르게 보입니다. 화소(픽셀)가 적은 30x30보다 100x100 해상도에서 더욱 또렷하게 보입니다. 화소(픽셀)가 많으면 많을수록 더 세밀하게 이미지를 표현할 수 있기 때문입니다. 그러나 여기서 문제가 생깁니다. 똑같은 화소(픽셀)의 양이라도 ‘화소(픽셀)의 크기’가 다르다면? 세밀함의 정도가 또 달라 보일 수 있습니다. 그래서 약속의 단위를 만들었는데, 바로 PPI(..

반응형 그리드 시스템 반응형 그리드 시스템이란 최근에는 디바이스 환경에 따라 해상도가 등장하면서 다양한 크기의 해상도를 지원하는 반응형 그리드 시스템이 있습니다. 고정 그리드 시스템과 형태는 비슷하지만, 칼럼의 너비를 고정 값이 아닌 백분율로 지정하고 디바이스 별 브레이크 포인트를 지정하여 화면 크기와 방향에 맞게 레이아웃을 조정합니다. 브레이크 포인트 특정 레이아웃 요구사항이 있는 미리 결정된 화면 크기의 범위입니다. 각 브레이크 포인트 범위는 디스플레이 크기에 따라 칼럼 수와 권장 마진 및 거터를 결정합니다. 브레이크 포인트 지정 방법 1. 해상도 점유율을 통계적인 수치로 검사하여 점유율이 가장 높은 해상도를 선택하여 제작하거나, 일정 비율 이하로 낮은 해상도를 제외하고 제작합니다. 2. 웹사이트 프..

컬러 적용시 주의점 웹접근성에 의한 명도대비 웹접근성이란 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미합니다. 웹접근성에서 ‘적합성 수준’이란 세부 지침들이 갖는 중요도를 3단계로 분류하는 것을 말합니다. 출처 https://www.wah.or.kr:444/Participation/한국형웹콘텐츠접근성지침2.1.pdf https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum 텍스트 콘텐츠의 명도 대비 저시력자 및 색각 이상자, 노인 등 을 위한 웹접근성 가이드에 따라 텍스트 콘텐츠와 배경간의 명도대비는 최소 4.5:1 이상이어야 합니다. 1. 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경..