본문 바로가기
반응형

전체 글136

마우스 wheel 동작 이벤트 및 감지 - Part 2 : scrollTop, scrollHeight, clientHeight 마우스 wheel 동작 이벤트 및 감지 - scrollTop, scrollHeight, clientHeight 지난 포스팅에서 마우스 휠 이벤트를 감지하는 기본적인 방법들과 활용방식을 정리했습니다. 이벤트 리스너를 브라우저 창에 붙이는 경우와, 엘리먼트에 붙이는 경우에 사용하는 함수가 서로 다르다는 점에 꼭 유의가 필요하다고 정리를 했습니다. 마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이? 마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이? 마우스 wheel 동작 이벤트 및 감지 웹문서를 다이내믹하게 표현하기 위해서는 scroll 이벤트에 대한 동작 감지와 컨트롤은 필수일 것입니다. 이벤트 리스너를 달아두고 click을 감지하는 것은 비.. 2023. 2. 10.
마우스 wheel 동작 이벤트 및 감지 - scrollY, scrollTop 차이? 마우스 wheel 동작 이벤트 및 감지 웹문서를 다이내믹하게 표현하기 위해서는 scroll 이벤트에 대한 동작 감지와 컨트롤은 필수일 것입니다. 이벤트 리스너를 달아두고 click을 감지하는 것은 비교적 '간단한' 느낌이 들지만, wheel 동작을 감지하는 것은 상대적으로 조금 더 복잡하거나 까다롭다고 느끼면서 어려워하는 경향이 존재하기도 합니다. 하지만, 몇가지 속성들에 대해 동작원리를 파악해 두고 이해를 해 둔다면, 스크롤 이벤트는 응용할 수 있는 표현 영역이 훨씬 더 다양하게 존재할 수 있습니다. 그래도 Wheel 동작 감지와 scroll은 어렵게 보인다구요? 일단 당장 도전해 보고 판단해 봅시다. window.addEventListenter 사용자가 브라우저 화면을 얼마나 스크롤했는지를 파악하기 .. 2023. 2. 9.
소수점 계산 시 정확한 계산 결과를 위한 적용 방법 소수점 계산 시 정확한 계산 결과를 위한 적용 방법 지난번 포스팅에서, Javascript에서 소수점을 포함한 수를 계산할 때 나타날 수 있는 미세한 오차들의 원인에 대해서 살펴보았습니다. 0.1 + 0.2 = 0.3이 아니다? 소숫점 계산 시 주의 사항 0.1 + 0.2 = 0.3이 아니다? 소숫점 계산 시 주의 사항 0.1 + 0.2 = 0.3이 아니다? 코딩을 한창 재미있게 배우다가 어랏? 하게 되는 지점이 있습니다. 바로 '소숫점 계산'과 관련한 내용입니다. 일단 브라우저 console 창에 0.1 + 0.2를 실행해보시기 바랍니다. kincoding.com 미세한 오차들에 의해서 발생할 수 있는 결과를 미연에 방지할 수 있는 몇 가지 기법들에 대해서 살펴보기로 합니다. 소수를 정수로 만들어 계산.. 2023. 2. 8.
0.1 + 0.2 = 0.3이 아니다? 소숫점 계산 시 주의 사항 0.1 + 0.2 = 0.3이 아니다? 코딩을 한창 재미있게 배우다가 어랏? 하게 되는 지점이 있습니다. 바로 '소숫점 계산'과 관련한 내용입니다. 일단 브라우저 console 창에 0.1 + 0.2를 실행해보시기 바랍니다. 원하는 결과를 확인할 수 있나요? 뭐라고라고라? Javascript 한테 다시 한번 물어보겠습니다. 0.1 + 0.2가 0.3과 같냐고 물어보니, 아니라고(false) 대답해줍니다. 뭐라고라? 내 머릿속에서는 0.3이라고 하는데, 컴퓨터는 0.30000000000000004라고 알려줍니다. 이게 어떻게 된 일 일까요? 다른 소수들을 가지고도 한번 테스트를 해보도록 합시다. 이런 계산 결과가 나온다는게 이상하기도 하고, 뭔가 좀 신기하지 않습니까? 컴퓨터는 원래 그렇게 계산해준다 곰곰.. 2023. 2. 7.
z-index를 한 눈에 보여주는 - DevTools z-index z-index를 한 눈에 보여주는, DevTools z-index 웹 사이트를 만들다보면, 혹은 유지보수를 하다보면, 수 많은 작업자의 손을 거쳤던 웹사이트의 경우 z-index 속성이 어지럽게 얽혀 있는 경우가 많습니다. 왜냐하면, z-index를 999나 9999처럼 편의에 의해 높게 사용하는 경우가 발생하기 때문입니다. z-index를 대충 사용해서 결과물을 만드는 것은, 당장에는 당면과제를 쉽게 해결을 할 수 있는 방법이 될 수는 있을지 몰라도, 장기적으로 보면 내 뒤에 오는 미래의 작업자에게는 상당히 불편한 상황을 초래할 수 있는 일이기도 합니다. 웹문서에 적용된 z-index를 한눈에 볼 수 있는 방법이 없을까? 하는 지점이 생기게 마련인데요, 바로 이럴 때 DevTools z-index라는 .. 2023. 2. 6.
ChatGPT3 도움 받아서 갤러리 오버레이 버튼 만들기 ChatGPT3 도움 받아서 갤러리 오버레이 버튼 만들기 갑자기 이런 버튼을 만들어 보고 싶어 졌습니다. 백그라운드로 들어 있는 이미지 위로 플레이 버튼이 가운데 올라가 있는 형태입니다. 대충 생각을 해보니, 이미지가 들어 있는 div는 position: relative를 주고 저 플레이버튼을 이미지(?)로 만들고 opacity로 투명도를 준 다음 position: absolute로 만든 다음 붕~ 띄워서 가운데 정렬을 하면 되는 것인가? 하는 생각이 들었습니다. 타이핑해서 코드를 작성하려다, 문득 어제 만났던 그녀가 ChatGPT3가 떠 올랐습니다. 만들기 귀찮으니 일단 ChatGPT3에게 질문을 개떡 같이 말해도 찰떡 같이 알아듣는 ChatGPT AI가 너무나 대견합니다. 요즘 제 업무를 참 많이 도.. 2023. 2. 5.
반응형

티스토리툴바