본문 바로가기
반응형

Develop/Web19

vanilla js를 이용하여 bottom sticky button 만들기 이번 포스팅에서는 Vanilla js를 활용하여 하단 Sticky Button을 만들어보겠다. 목표: 스크롤을 특정 구간 이상으로 내릴 때 Sticky버튼이 보이고, 올릴 때 사라지도록 만들기 1. 새로운 엘리먼트 동적으로 추가해보기 html에 미리 코드를 만들어 놓고 실행할 수도 있지만, javascript를 이용해서 추가하는 경우를 만들어 보았다. sticky버튼을 감싸고 있는 컨테이너로 div를 만들었고, 텍스트를 위한 p 태그를 만들었다. 이후 sticky_container에 스타일을 지정해주기 위해 sticky_container라는 class이름을 주었다. not_show라는 것은 뒤에 나오겠지만, sticky 버튼을 숨겼다가 보여지게 하기 위함이다. 2. 버튼에 스크롤 이벤트 달기 사용자가 s.. 2021. 2. 26.
javascript 웹 페이지 크기 알아내기 웹 개발을 하며, 화면 크기가 필요한 때가 있다. 브라우저의 크기를 알아내거나, 브라우저 내부의 화면 크기를 알아내고 싶은 경우 어떻게 해야할까? 오늘 알아볼 속성은 innerWidth, innerHeight, outerWidth, outerHeight이다. 각각 의미하는 바는 위 그림과 같다. 이를 구하는 방법은 window.innerWidth와 같이 해주면 된다. console.log(window.innerWidth); console.log(window.innerHeight); console.log(window.outerWidth); console.log(window.outerHeight); 2021. 2. 26.
javascript 숫자 3자리마다 ,(콤마)찍어 구분하기 이는 정규식으로 간단하게 구현이 가능하다. function numWithComma(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } var cost = 100000; console.log(numWithComma(cost)); 위의 결과값은 100,000이 나오게 된다. 2021. 2. 22.
JavaScript Select 변경 이벤트 처리하기 이번에 프로젝트를 진행하면서 javascript를 이용하여 Select를 변경에 따른 이벤트를 처리하는 작업이 필요했다. 총 3개의 Select에 변경 이벤트를 달아주어야 했는데, 다음과 같이 해결할 수 있었다. var aList = document.querySelector('#aList'); var bList = document.querySelector('#bList'); var cList = document.querySelector('#cList'); var change_event = function(){ console.log('변경됨'); }; aList.onchange = change_event; bList.onchange = change_event; cList.onchange = change_e.. 2021. 2. 22.
반응형