[JS / jQuery / CSS] 다양한 방법으로 자동스크롤 구현하기 (원페이지 스크롤)

미니프로젝트를 진행하면서 첫 접속시 보이는 영역 → 멤버 소개 카드가 있는 영역으로 사용자가 끝까지 스크롤을 내리지 않아도 자동으로 스크롤이 내려갈 수 있도록 기능을 구현했다. 우선 처음에 기획한 내용은 다음과 같았다.버튼을 클릭했을 때 멤버 소개 카드가 있는 영역으로 자동 이동느림-빨라짐-느려짐 속도가 변하며 자연스럽게 출발/도착한다.window.scrollTo()프로젝트에서 사용한 방법이다. behaviour: smooth 속성을 지정하여 부드럽게 스크롤 이동이 가능하지만 scrollTo() 만으로는 속도조절을 할 수 없다고 하여 requestAnimationFrame()을 이용해 다음 프레임의 스크롤 위치를 계산하고 scrollTo로 이동시키는 방법을 사용했다. 시간의 흐름에 따른 스크롤 위치를 지..

• format_list_bulleted HTML + CSS
• · 2024. 7. 22.
• textsms

[jQuery] 페이지 첫 화면에서 메인 콘텐츠 부분으로 자동 스크롤하기

첫 팀 프로젝트로 멤버 소개 페이지를 만들기위해 레퍼런스를 찾아보다가 단색 배경에 크게 이름을 적어둔 포트폴리오를 발견했다.저런 형식으로 접속시 첫 화면에 꽉차게 한 눈에 들어오는 소개를 보여준 뒤 자세한 소개가 보이는 곳으로  자동 스크롤 하고싶다는 생각이 떠올랐다. 최종 결과처음엔 버튼을 눌렀을 때 자동 스크롤되는 기능만 구현했다가, 버튼을 누르지 않고 스크롤 하는 사람들도 자동 스크롤로 넘어가게 하고싶어서 기능을 추가했다.그러다가.. 한참을 여기에 매달리게되고... 괜한 욕심을 부렸나싶어서 조금 후회했다가 그래도 해보고싶어서 열심히 고민에 고민을 거쳐보았다..  해결한 문제들스크롤을 조금 내린 상태에서 버튼 클릭처음 시작할 때 버튼 클릭으로만 내려가는 것을 가정했다보니 위치를 이동시키는 함수에 시작..

• format_list_bulleted JavaScript
• · 2024. 7. 19.
• textsms

[jQuery] 간단한 메뉴바 만들기 (클릭한 요소 스타일 바꾸기)

배열에있는 한식 메뉴들을 화면에 출력하는 과제를 진행하며, 카테고리를 나누고 선택하는 카테고리의 메뉴만 볼 수 있는 기능을 추가하고싶어 메뉴바를 만들어보았다.이전에 사용해본 jQuery의 attr()을 활용해보았다.  간단 요약1) 선택할 수 있는 카테고리 메뉴들을 나열한다.2) 선택한 카테고리에 입힐 스타일을 css로 작성한다.3-1) 카테고리가 클릭됐을 때 호출하는 함수에서 해당 요소를 받아 저장해둔다.3-2) 이전 선택 요소를 기본 상태로 돌려주고, 선택된 요소를 선택됨 상태로 지정한다.  적용한 방법1) 카테고리들을 나열한다. 전체보기 밥 국/찌개 전 카테고리들의 나열이므로, ul을 활용해 묶어주었다.  2) 선택한 카테고리에 입힐 스타일을 작성한다..categoryItem:..

• format_list_bulleted JavaScript
• · 2024. 6. 24.
• textsms

[Javascript/jQuery] 사용자 입력 비활성화하기 (text / button)

무작위의 숫자를 띄우고 일정 시간이 지나면 숫자를 가린 뒤 사용자의 입력을 받아 정답인지 확인하는 과제를 진행했다.과제에서 제시하는 기본적인 기능을 구현하고나니 전혀 어렵지가 않아서 게임같이 느껴지는 기능을 더 추가하고싶었다!우선은 숫자가 보여지는 동안은 정답을 입력할 수 없도록 제한하는 기능을 추가해보기로 했다.  disabledinput 의 attribute 중 입력을 제한하는 것이 분명 있을 것 같아 어떤 것들이 있는지 살펴보았다.가장 먼저 눈에 띈 것이 disabled였고, 바로 적용해보았다.기본적으로 숫자 입력과 제출 버튼을 비활성화 시켜두었다가 숫자를 암기할 수 있는 제한시간이 지나면 숫자 숨김 / 입력 활성화 / 제출버튼 활성화 되도록 했다.  위와 같이 disabled를 태그에 추가하면 해..

• format_list_bulleted JavaScript
• · 2024. 6. 18.
• textsms

[jQuery] 동적 생성한 태그에 attribute 추가하기

서울시 미세먼지 API를 활용한 fetch 실습 강의 수강 중 특정 조건에서 빨간 글씨로 출력하기 위해 아래와같은 코드를 사용하였다.let tmp_html = ``;if(gu_mise > 40) { tmp_html = `${gu_name} : ${gu_mise}`;}else { tmp_html = `${gu_name} : ${gu_mise}`;}$('#names-q1').append(tmp_html); 동일한 부분은 한번에 처리하고 조건에따라 달라져야하는 부분만 따로 처리할 방법을 고민해보고싶어 이것저것 찾아보고 시도해보았다! 처음 시도한 방법문자열 보간let li_class = gu_mise > 40 ? "class=bad" : "";let test_html = `${gu_name} : ${..

• format_list_bulleted JavaScript
• · 2024. 6. 14.
• textsms