오식랜드

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..

텍스트를 강조하기 위해 밑줄이 그어지는 듯한 모션이 필요할 때가 있다. 그 때 유용한 clip! script에서 cilp을 늘려 밑줄 긋는 모션을 만들어보자 clip을 사용할 때 주의할 점이 있다. 1. clip의 대상은 position이 absolute여야 한다. 2. 요소가 overflow : visible일 때는 적용되지 않는다. 2. :before, :after와 같은 가상 요소는 script에서 직접 선택이 안돼서, 가상요소의 상위 선택자에 클래스를 추가하는 방식으로 해줘야 한다. clip의 문법을 알아보자. 밑줄 모션에서는 사각형 좌표를 사용한다. clip : rect( , , , ) right 좌표를 0 에서 nnnpx만큼 이동시켜주며 밑줄이 그어지는 것 처럼 보이게 할 것이다. 밑줄 그어지..

숫자가 0에서부터 특정 숫자로 화면에 보여지며 바뀌는 모션이 필요할 때가 있을 것이다. 내 경우에는 사건을 총 5000건을 맡았다! 하며 0에서 5000으로 숫자가 올라가는 모션을 만들 목적이였다. 코드는 아주 아주 간단하다! setInterval로 count = 0 에서 100씩 더해주다가, 5000이 되면 setInterval을 멈추는 clearInterval을 실행하고, 리턴시켜준다. 물론 시간, 숫자 등은 원하는대로 커스텀 하면 된다! innerHTML에서 사용한 코드는 숫자 서식을 지원하는 객체의 생성자이다. 원하는 지역의 서식을 사용하면 된다. 참고 링크 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/N..