To infinity, and beyond To infinity, and beyond

2022.03.23 🤔❓어떻게 선택된 버튼에 클래스를 추가할까? 현재 상태는 work__categories라는 큰 클래스 안에 3개의 category__btn이 들어가 있다. All5 Javascript3 React2 category__btn을 클릭했을 때, 클릭 된 버튼이 selected되도록 만들고 싶다. (즉, 버튼을 선택했을 때, 해당 버튼에만!! 클래스를 넣어서 선택된 효과를 만들고 싶다.) 일단, 각 버튼을 호출하는 방법은 event.target이라는 함수로 호출이 가능하다는 것은 이전시간을 통해 배웠다. 그래서 이 기능을 이용해서 각 버튼에 어떻게 selected라는 클래스를 추가하면 좋을지 고민했다. 😃❗이렇게 하면 되지 않을까? 1) 클릭된 버튼의 data-값과 동일한 값이 있는 상자에..

2022.03.18-19 🤔❓ 상단 메뉴버튼을 누르면 해당 페이지로 스크롤 되도록 만들고 싶다. 상단에 나열된 메뉴 버튼을 누르면 해당 페이지로 스크롤링 되도록 만들어보도록 한다. 😃❗메뉴 페이지의 좌표값을 구하여 상단 메뉴버튼에 연결시킨다. 0) 방법론을 찾아보자. 앞에서 스크롤링에 대해 알아봐서 그런지, 해당 property를 응용하면 될 것 같단 생각이 든다. element.getBoundingClientRect().y를 이용해 메뉴페이지들의 y좌표를 구하고, scrollto를 이용해서 해당 y값을 연결시켜 주면 될 것 같다. 1) 각 메뉴 페이지의 좌표값을 구하자. 먼저, about의 y좌표를 구하기 위해 element.getBoundingClientRect().y를 이용하였다. y는 viewp..

2022.03.17 🤔❓ 페이지를 스크롤 시, 상단바가 고정되면서 색상이 변하도록 만들고 싶다. 오늘부터는 JS를 입혀 조금 더 페이지를 동적으로 만드려 한다. 페이지를 스크롤링 할 때, 상단에 네비게이션바가 고정되도록 만들고, 상단바의 색상에 변화를 주려 한다. 😃❗현재 스크롤링 된 Y값의 좌표가 상단바의 Y값 좌표보다 크다면 상단바를 고정시킨다. 방법은 크게 두가지로 나눌 수있다. 하지만 처음 프로그래밍을 하다보니 상단바를 고정시키려면 어떤 명령을 해줘야할지 감이 잡히지 않는다. 그래서 일단은 방법론을 찾기로 한다. 0) 방법론을 찾아보자. 먼저, 구글에 들어가 구글링을 한다. 나는 'js fix navbar when scrolling'이라 검색했다. 일반적으로 영어로 검색하는 것이 더 많은 정보를 ..

2022.03.14 2022.03.16 추가 What's the issue? navbar에서 오른쪽의 logo 섹션과 왼쪽의 menu섹션의 수평이 맞지 않는다. logo가 상단에 붙어 있어서 이를 중간으로 내리고 싶다. 이미지 태그가 들어가면 다른 태그들과 수평축이 맞지 않는다. How to solve? 1st trial: 좌표값을 주고 static하게 고정시킴 맨 처음 프로젝트였던 Youtube clone을 했을 때, 한 box안에 img 태그와 i 태그를 넣었는데 수직이 맞질 않았다. text-align도 해봤지만 맞질 않았다. 그래서 그냥 두 태그를 따로 떼어 좌표값을 주고 static 하게 fix시켜 벼렸는데 그렇게 처리하기엔 뭔가 아쉬움이 남았다. 2nd trial: img태그의 css속성인 v..