본문 바로가기
반응형

전체 글132

float를 이용한 탭 메뉴 버튼 만들기 - Part 1 float를 이용한 탭 메뉴 버튼 만들기 - Part 1 HTML/CSS를 이용해서 Tab Menu 버튼을 만들어 봅시다. 바로 이런 거요. 쇼핑몰 상품설명 상세페이지에서 흔히 볼수 있는 형태입니다. 저의 입장에서라면 사실 flex를 이용하는 게, 익숙치 않은 float를 사용하는 것보다 훨씬 더 직관적이고 쉬울듯 하지 않을까라는 생각이 들기도 하지만, 다른 사람이 만들어 놓은 결과물을 수정해야 하는 경우도 있으니, 이 참에 먼저 float를 이용하여 만든 탭 메뉴에 익숙해질 수 있도록 포스팅을 통해 정리를 합니다. html 뼈대 구성 뼈대가 되는 html은 다음과 같이 ul, li를 이용해서 메뉴 형식으로 구성했습니다. 하단 각각의 div는 각 탭을 눌렀을 경우에 보여주거나 숨길 설명 내용입니다. 물론.. 2023. 2. 12.
페이지 스크롤 진행률을 표시해보자 - 상단 progress-bar 만들기 페이지 스크롤 진행률을 표시해 보자 - 상단 progress-bar 만들기 이전 2개의 포스팅에서 이벤트 리스너를 달고, scroll을 감지하는 내용을 배우고 정리해 보았습니다. 이런 것들은 배우고 익혀서 대체 어디에 써먹을 수 있을까요? 웹사이트를 서핑하다 보면, 이렇게 페이지 상단에 프로그래스 바를 만들어 두고 본문을 얼마큼 읽었는지 표시해 주는 UI를 만나는 경우가 있습니다. 왠지, 스크롤 전체 높이를 알고, 현재 스크롤한 값을 알 수만 있다면 Javascript로 구현을 할 수 있겠다는 생각이 들지 않은가요? scroll 이벤트를 배웠으니, 당장 써먹어 보도록 합니다. 세로 높이가 긴 문서 준비 예제로 활용할 HTML 문서는 다음과 같이 만들어봤습니다. VSCode에서 lorem * 500 정도 .. 2023. 2. 11.
마우스 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.
반응형

티스토리툴바