Dseok의 코딩스터디

📌 .scrollTop()이란?jQuery.scrollTop() 메서드는 웹 페이지에서 스크롤 위치를 가져오거나 설정할 때 사용하는 메서드입니다. 페이지의 특정 위치로 이동하거나 현재 스크롤 위치를 확인하는 데 유용합니다.✅ 기본 문법$(selector).scrollTop(); // 현재 스크롤 위치 가져오기$(selector).scrollTop(value); // 스크롤 위치 설정$(selector).scrollTop();: 현재 요소의 스크롤 위치를 가져옵니다.$(selector).scrollTop(value);: 지정한 위치로 스크롤을 이동합니다.📌 .scrollTop() 활용 예제 7가지1️⃣ 현재 스크롤 위치 확인하기$(window).on("scroll", function() { con..

여러 경우를 비교해야 할 때 if보다 가독성이 좋은 switch문을 활용해 보세요!오늘은 switch문의 기본 문법부터 실전 예제까지 완벽하게 마스터하는 시간을 가져봅니다.1️⃣ switch문이란?switch문은 하나의 값과 여러 개의 경우(case)를 비교하여 실행할 코드를 결정하는 제어문입니다.즉, 특정 변수의 값에 따라 실행할 코드 블록을 다르게 할 때 사용합니다.✅ switch문 기본 문법switch (값) { case 값1: // 실행할 코드 break; case 값2: // 실행할 코드 break; default: // 위의 값과 일치하는 경우가 없을 때 실행할 코드}switch 안의 값과 case 안의 값1, 값2, ...`을 비교합니다.break를 만나면 s..

이미지 관리하기방법은 2가지로 나뉜다.assets폴더에서 관리이미지가 몇개만 필요할 때 assets폴더에서 관리한다.이유는 assets폴더에서 관리를 하게 되면 서버에서 그때그때 다운로드 받을 필요 없이 웹브라우저 메모리에 저장된 이미지를 바로바로 꺼내 쓸 수 있어 웹 속도에 영향을 미치지 않는다. 다운로드를 최초 1회만 진행하기 때문에 웹 로딩 속도에 개선을 줄 수 있다.import img1 from "./assets/img1.jpg";const App => () = { return ( )}export default App 위와 같이 이미지를 불러오면 각 파일마다 import img1 from "./assets.img.jpg"를 작성해줘야한다. 이와 같은 번거로움을 제거하기..

어느날, 갑자기 비밀번호 보이게하기, 숨기기 기능 구현 하는 방법이 궁금해졌다.그래서 따로 심심해서 만들어보았다.이걸로 나중에 이 기능을 구현할 일이 있으면 복사붙혀넣기하려고 한다.순수자바스크립트로 구현하였다.어려운 내장함수는 없으므로 바로 가져다 쓰면 좋을 듯 싶다. 비밀번호 보기 비밀번호 숨기기.wrap{display:flex;aling-items:center;justify-content: center; gap:10px;padding-top:10%;}.btn,.btn2{display:none;}.on{display:block;} 아래는 정리 되지 않은 javascript 코드이다.const inputType = document.querySelector(".toggleInput");const ..

검색기능을 만들 수 있는 방법은 다양합니다.이번에 코딩테스트에서 틀렸지만 사용해봤던 includes()메서드로 검색 필터 기능을 만들어보고자 합니다.기본 HTML 구성은 아래와 같습니다. 위에 은 그냥 가운데에 놓기 위해서 적은 코드입니다.가운데에 놓는 역할 말고는 다른 역할이 일절 없습니다. 다음은 그냥 넣기 너무 지져분하니 정말정말 간단한 스타일링을 해줬습니다.@charset "utf-8";.wrap{ width: 1010px; margin: 0 auto; padding: 50px 0;}.todo-list { margin-top: 20px;}.todo-item { margin: 5px 0;}뭐 이것도 아무렇게나 가져다 쓰시면 됩니다. 다음은 자바스크립트 코드입니다.핵심적인..

내용 스포가 있습니다. 초보자 및 코딩테스트를 해보고 싶으신 분은 고민을 충분히 하고 열어보시기 바랍니다.경고 했습니다. 추후 원망하시는 일 없기를 바랍니다... javascript에서 공식문서 찾기 힘든 메서드와 뜻밖에 기호를 알아서 소개하고자 합니다. 프로그래머스에서 기초버전 문제 "접사인지 확인하기"문제입니다. 문제.어떤 문자열에 대해서 접미사는 특정 인덱스부터 시작하는 문자열을 의미합니다. 예를 들어, "banana"의 모든 접미사는 "banana", "anana", "nana", "ana", "na", "a"입니다.문자열 my_string과 is_suffix가 주어질 때, is_suffix가 my_string의 접미사라면 1을, 아니면 0을 return 하는 solution 함수를 작성해 주세요..

코드를 예쁘게 정리해주는 Prettier, 여러분도 쓰고 계시죠? 그런데, 모든 파일에 적용되면 HTML과 CSS도 자동으로 포맷팅되어서 오히려 불편한 경우가 생기기도 해요. 그렇다면 어떻게 하면 Prettier의 힘을 유지하면서도 HTML과 CSS는 예외로 둘 수 있을까요? 오늘은 그 방법을 쉽고 재미있게 알려드릴게요!1. 프로젝트 설정하기먼저, Prettier를 프로젝트에 설치해요. 아래 명령어를 터미널에 입력하세요:npm install --save-dev prettier2. Prettier 설정 파일 만들기프로젝트 루트에 .prettierrc 파일을 만들고, 기본 설정을 추가해요. 이 설정은 여러분의 코드를 깔끔하게 정리해주는 기본 규칙을 정의해요:{ "semi": true, "singl..

React-Router-dom 학습(ver.16.*에서만) 1. npm i react-router-dom 실행.2. main.jsx에 import { BrowserRouter } from 'react-router-dom';을 실행.3. main.jsx에 을 로 감싼다. (아래와 같이 실행)        4. App.jsx에 import { Routes, Route } from "react-router-dom";을 실행.5. 안에 를 넣는다. 단, 안에는 만 넣을 수 있다.6. 의 속성으로는 path와 element가 있는데, path는 말 그대로 경로를 설정해주는 놈이다. element는 path의 경로로 들어갔을 때 보여줘야할 컴포넌트를 넣는다. (아래의 예시)  path='/' element={} /..

add()메소드는 선택한 요소와 같이 행동을 해야할 요소를 선택하게 해주는 메소드이다.말이 어렵다.쉽게 설명하자면1번이랑 2번이랑 같은 행동을 하게 해줘.이정도로 설명 할 수 있을 것 같다. 문법은 이러하다..add(selector)조금 더 쉽게 예시를 들어 문법을 적어보자면$('ul').add('div')위와 같은 코드가 될 것 같다. 이걸로 뭘 해야할지 생각이 안 떠올라서 그냥 animate()를 써서 장난을 쳐봤다.  jQuery add() 연습01 jQuery add() 연습02 jQuery add() 연습03 클릭! @charset "UTF-8";.wrap{width: 1010px; margin: 50px auto 0;..

내가 사용하고 있는 에디터에서 좋은 플러그인을 한번 추천 해보고자 한다.나는 vscode를 쓰고 있다.1. Highlight Matching Taghtml 코드가 아주아주 길때 시작 태그와 닫는 태그에 밑줄이 그어진다.위 이미지와 같이 그어진다. 2. Blockman - Highlight Nested Code Blocks이거 진짜 간지 난다. 이 플러그인도 위와 비슷한 플러그인이다.javascript, html, css 기타 등등 많은 언어에서 사용이 가능하다.이게 진짜 강력한게 함수가 어디에 쓰여 있는지 다 보인다.비슷한 역할을 하는 함수를 조금 변형해서 쓸 때 changOverlap02()이런식으로 숫자만 바꿔서 쓰는데이건 진짜 좋은 플러그인 같다.참고로 회사에 대리님께서 추천해주신 플러그인이다.감사..