To infinity, and beyond To infinity, and beyond

2024.01.14 아래로 Scrolling 될수록 Y값이 변한다. Opacity의 값은 1 ~ 0 사이의 값을 갖기 때문에, 1에서부터 시작해서 0까지 수렴하도록 만들면 된다. 이때 필요한 것은 수학공식! home section의 높이에 비례하여 home section이 점점 투명해지도록 만드는 것이기 때문에 공식을 세워보면 된다. 일단 home Height가 100이라고 보자. ScrollY opacity 0 1 50 0.5 100 0 ScrollY가 homeHeight값에 가까워질수록 0에 수렴한다. 그럼, Y = Height * opacity 가 되면 된다. 그럼 opacity = Y / Height라는 공식이 완성된다. 따라서, 1에서부터 점점 opacy가 줄어드니, 1- Y / Height라고..

2022.03.24-26 🤔❓ 어떻게 스크롤을 하면 상단메뉴버튼이 해당 페이지에 맞게 자동으로 선택하지 각 페이지와 메뉴버튼을 연결시켜 줄 수 있는 항목을 찾아서, 페이지의 움직임이 발생할 때 메뉴버튼에도 움직임을 주면 될 것이라고 생각했다. 확인해보니 페이지와 메뉴는 동일한 'id'를 갖고 있다. 그렇다면 이렇게 해보면 어떨까. case 1 페이지가 스크롤 되어 밑으로 내려가듯이, 선택된 상태도 옆으로 스크롤 되도록 하면 된다고 생각했다. 1. 선택된 메뉴버튼에 해당하는 페이지의 좌표값을 구한다. 2. 해당 좌표값이 윈도우 스크린 좌표와 일치되면 상단바 버튼을 이동시킨다. 근데 해보니까 아니다. 왜나면 '페이지'가 스크롤 되는거기 때문이다. case2 상단메뉴버튼과 페이지의 id가 동일하니, 스크롤링해..

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

2022.03.22 🤔❓ 버튼을 누르면 해당하는 정보가 필터링 되어 조회된다. 오늘부터는 JS를 입혀 조금 더 페이지를 동적으로 만드려 한다. 😃❗이렇게 해보자 1) 각 필터버튼의 결과값을 가져온다. (1) data- 를 이용하자 All5 Javascript3 React2 ... 버튼에 해당하는 work__catergories의 각 버튼 클래스에 data-filter를 추가한다. 그리고 해당 버튼을 누르면 필터링되는 정보인 work__projects의 각 프로젝트에도 data-filter를 추가한다. 버튼과 각 프로젝트에 추가한 data-filter의 값이 같은 항목끼리 버튼을 누르면 필터링되어 나오도록 만들거다. //project filtering const workCategories = docume..

2022.03.21 🤔❓ 스크롤 후 상단으로 바로 이동할 수 있는 버튼을 만들자 스크롤을 한 후 상단으로 이동하고싶을 때, 바로 이동할 수 있는 버튼을 창 하단에 만드려고 한다. 😃❗아래에서 확인해보자 1) 버튼이 창 하단에 계속 위치하도록 만든다. (1) 추가하는 버튼은 html 가장 하단에 정의해야한다. - 그렇지 않으면 페이지 전체에 해당 내용이 적용이 안된다. (2) 상단으로 이동하는 버튼이 스크롤 되어도 창 하단에 계속 위치하도록 css를 이용하여 만들었다. /* arrow btn */ .arrowBtn { /*모양을 동그랗게 만듬*/ width: 50px; height: 50px; background-color: var(--color-pink); border-radius: 50%; marg..

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..