오식랜드

name값을 onlyNumber로 셋팅한 input에 'input' 이벤트리스너를 걸어주었다. input이 여러개일 때에는 forEach 또는 for문을 이용해서 이벤트 리스너를 걸어주면 된다. 숫자 정규식 : /[^0-9]/g input event : 키보드 이벤트 뿐만 아니라 어떤 방법으로든 input의 value값이 변경된 직후에 사용된다. 정규식을 이용해 숫자가 아닌 값이 입력됐을 시 ''(공백)으로 바꿔서 숫자만 남기도록 한다. document.querySelector('input[name="onlyNumber"]').addEventListener('input', function(e){ e.value = e.value.replace(/[^0-9]/g,'') })

드래그된 값을 출력하는 range slider를 만들어보자 처음에는 아주 복잡할 줄 알았는데 input type 중 range를 사용하면 아주 간단히 사용할 수 있다! span#value에는 js로 값을 출력할 예정이다 속성 - max : input의 최댓값 - min : input의 최솟값 - step : input에 입력할 수 있는 숫자들 사이의 간격 - value : input의 초깃값 Range Slider Value: 드래그 대상인 동그란 버튼은 css에서 ::-webkit-slider-thumb , ::-moz-range-thumb로 커스텀 해주면 된다 값을 화면에 출력하는 스크립트는 oninput을 사용하면 된다. oninput은 값이 변경된 직후에 발생하는 이벤트이다. 처음 초기값을 한번 ..

git에서 main(master)를 pull받으려는데, 아래와 같은 에러가 발생했다. error: Pulling is not possible because you have unmerged files. hint: Fix them up in the work tree, and then use 'git add/rm ' hint: as appropriate to mark resolution and make a commit. git add *, git commit- m 'merge', git merge main 등 해보아도 아무런 변화가 없었다 이유는 로컬이랑 원격에 같은 파일이 있는데 로컬에서 아직 merge가 안됐다고 인식했기 때문이었다. 그리고 찾은 방법 git status git commit -am 'mer..

wrapper 안에 box의 좌표값을 구해보자. 상대위치 getBoundingClientRect 객체를 이용하여 출력해보면 box의 정보값을 보여준다 viewport로부터 box의 위치값이 출력된다. 그리고 여기서 우리가 사용할 top값을 scroll 이벤트에서 출력해보면, 스크롤 할 때 마다 위치가 바뀌게 된다. viewport를 기준으로 잡기 때문에 쭉 스크롤 하여 요소가 화면 보다 더 위로 가게 되면 음수로 출력이 된다. window.addEventListener('scroll', function(){ console.log(box.getBoundingClientRect().top) }) 절대위치 앞에서 구한 상대위치에 스크롤 된 길이를 더해주면 절대값이 나온다. window.pageYOffset 을..

window 객체를 console창에 출력해보면 scrollY값에 스크롤 위치가 담긴다는 것을 알 수 있다. window 이벤트 리스너 중 'scroll'이벤트에 window.scrollY를 출력하게 하면 스크롤 할 때 마다 그 위치값이 나오는 것을 확인할 수 있다. window.addEventListener('scroll', function(){ console.log(window.scrollY) }); 조건문 등을 이용하여 유용하게 사용해보자! if(window.scrollY > 1000)

[nuxt] 실제 업무 중 사용한 슬라이드를 공유하려고 한다. 실제 foreigner.lawfirmy.com/ 에 적용한 슬라이드다. Template Nuxt에서 작업했던 슬라이드라 Nuxt의 구조를 가져왔다. html의 body라고 생각하면 된다! 구조를 보면, slide-wapper > slide-container > slide 가 있고, slide 안에 이미지와 글 공간이 마련되어 있다. Title 1 / 3 태그 안의 @click은 클릭 이벤트를 바인딩 시켜준 것이다. element.addEventListener('click', function())과 같은 의미이다. 사람 이미지와 글 아래의 좌, 우 버튼 클릭시 슬라이드가 넘어가는 이벤트를 호출한다. Style 슬라이드가 absolute이면 ac..