오늘은 버튼하나도 좀 더 다양한 모션을 줄 수 있는 방법을 나눠보려해요! 이미지로 아래의 Navbar 버튼 4가지 케이스를 가져와봤는데요! (그냥 만든것이니,,, 디자인 측면의 색상 조절 같은 부분은... 알아서 해주세요ㅠㅠ!) CSS 기술만 참고!!! 기본상태 hover상태 - 마우스 올려놓은 상태 active상태 - 마우스를 클릭하고 있는 상태 selected상태 - 눌러서 선택된 상태 일단 오늘은 hover와 active를 다룬 후, 다음 시간엔 selected 상태의 위의 점 찍은 형태를 만드는 방법에 대해 알아보도록 하겠습니당. 마지막의 selected에 주는 액션은 좀 어려운 기술도 들어가기에 다음 글에 이어서 쓰도록 하지요! ㅎㅎ 영상으로 살짝 공유하자면 이런식으로 작동해요! 먼저 위의 Li..

프로젝트를 시작하기위해선 어떤 환경에서 개발을 할지 생각을 해봐야한다! ​ 그 중에 NextJs로 개발환경을 구축하는 과정에 대해 알아보고자 한다. ​ 일단 한가지는 보안 전문회사라 개발pc의 보호를 위해 외부망도 쓰지 않고 인터넷도 차단된 공간에서의 오프라인 설치..... 과정이다 ​ 아 물론! 패키지설치를 위한 npm은 작동된다! ​ 일단, 확실한건 create-next-app이 불가능하기에 다음과 과정으로 next를 수동설치하게 되었다. ** 수동설치 필요없는 분은 npx create-next-app 한 방이면 끝!!!!!! ​ 1. Next / React 설치! ​ 먼저 아래와 같이 터미널에 입력하여 package.json과 react next typescript 기반으로 설치를 할 수 있다! 사..