Bootstrap 2

[next.js/typescript] bootstrap에서 scrollSpy 적용시키기

내가 선택한 개인 웹사이트 디자인에는 scrollSpy 기능이 적용되어있는 디자인이었다 https://getbootstrap.kr/docs/5.0/components/scrollspy/ 스크롤스파이스크롤 위치에 따라 Bootstrap 내비게이션 또는 목록 그룹 컴포넌트를 자동으로 갱신하여 뷰포트 내에서 현재 어떤 링크가 활성화 된지를 나타냅니다.getbootstrap.kr 간단하게 설명하자면 웹사이트를 들어갔을 때 내가 스크롤을 내릴때마다 옆에 있는 sideBar의 메뉴들이 내 스크롤 위치에 따라 변경되는 그런 웹 사이트들을 많이 봤을 것이다 그런 기능을 하는 것이 scrollSpy다 물론 직접 코드로 구현할 수도 있지만 bootstrap에서 아주 간단하게 제공하고 있기 때문에 그 친구를 써주기로 했다n..

기술/웹 개발 2024.08.06

[웹개발/개인홈페이지 개발] Start Bootstrap 무료 템플릿 사용하기

처음 개인 홈페이지 개발 프로젝트를구상할 때는피그마에서 템플릿을 보고html이랑 css부터 하나하나손수 작성해서 개발해보자는야심찬 꿈을 꾸었으나 .. 내가 프론트엔드 전문 개발자가 아니다보니시간이 어마어마하게 소요되는 문제가 있었다..  피그마에서 마음에 드는 템플릿가져와서 html이랑 css까지하나하나 손수 제작하다가일시정지했던 이전 프로젝트.. 그래도 저정도까진 작업했다 react 처음 + node.js도 처음이었는데야심차게 DB까지 연동시켜서이것저것 막 작업하다가시간이 너어어어무 오래걸려서좀 더 효율적으로 작업해보자는 마음에방향을 바꿔보기로 했다 ㅎㅎ.. 5-6시간동안 개발했는데폭풍 서칭하느라 크롬에서 검색 탭만거의 10개가 넘었었는데그래도 저정도까지 작업한 것도꽤나 잘했다고 생각한다 ㅎㅎ..(자기..

기술/웹 개발 2024.08.04