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

HRD-Net이라는 국가에서 교육을 지원해주는 사이트가 있다. 취준생 뿐만 아니라 재직자도 요건이 충족되면 해당 국비지원 교육을 들을 수 있다. 교육사이트 중 하나인 패스트캠퍼스의 'UI/UX 초격차'강의를 찾아보다가 해당 사이트에서 국비지원으로 프로그래밍의 기초가 되는 강의를 국비지원으로 수강할 수 있다는 것을 알게 됐다. 그래서 '내일배움카드'를 신청해서 강의신청을 했고, 강의를 등록했다. (자기부담금 2만원만 내면 된다. 이 마저도 진도를 80%까지 달성하면 환급해 준다.) K-Digital Credit : 프로그래밍 첫걸음 시작하기 | 패스트캠퍼스 내일배움카드만 있으면 90% 국비 지원! 지금 바로 나의 커리어를 UP 해보세요! fastcampus.co.kr 이 강의 외에도 빅데이터 분석, 머신러..