Dseok의 코딩스터디

📌 개요웹 개발을 하다 보면 특정 요소의 인라인 스타일을 제거해야 할 때가 있습니다.인라인 스타일(style="color: red;")을 직접 추가하는 경우, CSS 파일보다 우선순위가 높아 쉽게 덮어쓰기 어렵습니다.이 문제를 해결하는 JavaScript 및 jQuery의 5가지 방법을 소개합니다! 📌 1. removeAttribute('style') 사용 (JavaScript)가장 쉬운 방법으로, 요소의 style 속성을 완전히 제거합니다.스타일 제거안녕하세요!✅ 설명: removeAttribute("style")을 사용하면 모든 인라인 스타일이 제거됩니다. removeAttr() 이 속성에 대해서는 조만간 자세히 알아보겠지만 여기서 간단히 알아보겠습니다. removeAttribute()는 HTML..

📌 개요자바스크립트에서 DOM(Document Object Model)을 조작하는 방법을 배워보겠습니다.이 글에서는 바닐라 자바스크립트를 사용하여 다음 기능을 구현합니다:클릭 시 li 요소에 on 클래스를 추가/제거 (토글 기능)a 태그 버튼을 사용하여 새로운 li 요소를 동적으로 추가사용된 자바스크립트 메서드들에 대한 상세 설명이 기능을 통해 JavaScript로 DOM을 조작하는 기본적인 원리를 이해하고, 실무에서 활용할 수 있도록 학습해봅시다! 💡 📌 구현 목표✅ li 요소를 클릭하면 on 클래스를 추가하거나 제거하는 기능 ✅ a 태그 버튼을 클릭하면 새로운 li 요소를 동적으로 생성 ✅ 사용된 주요 JavaScript 메서드 설명 포함 ✅ 두 가지 예제 제공 📌 HTML 구조 ..

📌 개요HTML에서 특정 부모 요소 안의 자식 요소들을 배열로 가져와 속성을 컨트롤하거나, 사용자가 입력한 내용을 동적으로 추가하는 기능을 구현하는 방법을 설명합니다.이를 위해 HTML, CSS, JavaScript를 활용하여 리스트 관리 시스템을 만들어 보겠습니다.📌 구현 목표부모 요소 안의 자식 요소들을 배열로 가져와서 속성 변경버튼 클릭 시 새로운 자식 요소를 추가하는 기능입력한 텍스트 값을 리스트로 추가하는 기능 📌 HTML 구조 자식 요소 컨트롤 & 추가 첫 번째 아이템 두 번째 아이템 세 번째 아이템 배경색 변경 추가 마지막 항목 ..

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

어느날, 갑자기 비밀번호 보이게하기, 숨기기 기능 구현 하는 방법이 궁금해졌다.그래서 따로 심심해서 만들어보았다.이걸로 나중에 이 기능을 구현할 일이 있으면 복사붙혀넣기하려고 한다.순수자바스크립트로 구현하였다.어려운 내장함수는 없으므로 바로 가져다 쓰면 좋을 듯 싶다. 비밀번호 보기 비밀번호 숨기기.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 함수를 작성해 주세요..

Array.prototype.join()에 대해서 알아보자.우선 MDN의 설명이다.join()메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.join()메소드는 설명이 쉽게 되어있는 듯 하여 추가적인 설명은 하지 않겠다. 먼저 join()의 문법을 알아보자.arr.join([separator])join()메서드는 인자로 문자열을 받는다.이 문자열은 배열의 각 원소 사이에 반복적으로 반영된다.예를 들면 띄어쓰기라던지, 하이픈( - )이라던지 이런 것들을 넣을 수 있다. 바로 예시를 알아보자.const elements = ['Fire', 'Air', 'Water'];console.log(elements.join());// Expected output: "Fire,Air,Water"console...

findIndex()에 대해서 알아보자.findIndex()는 find(), indexOf()에서 진화한 버전이다.인수에 함수를 받을 수 있다. 우선 MDN의 설명을 보자. findIndex()메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.하위에 더 복잡한 설명이 있는데 제외 하겠다.오히려 더 헷갈릴 듯 하다. 내가 이해한 findIndex()메소드.조건에 맞는 놈 찾아 다니다가 처음으로 조건에 맞는 놈 위치 값 알려주고, 조건에 맞는 놈이 없으면 -1로 없다고 알려준다. findIndex()의 기본 문법을 보자.arr.findIndex(callbackFn, thisArg)callbackFn: findIndex()메소드는 ..

오늘은 Array에 있는 indexOf() 메소드에 대해서 알아보자.indexOf()메소드는 String, 문자열에서도 사용을 할 수 있는 메소드이다.(MDN참고) 하지만 지금은 Array에 있는 indexOf()를 알아보자.MDN 설명이다.indexOf()메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.indexOf()는 엄격한 동등성 (=== 또는 triple-equals 연산자에서 사용하는 것과 같은 메서드)을 사용하여 검색 요소를 Array의 요소와 비교합니다.쉽게 말하면내가 검색해야할 배열(데이터)에 내가 원하는 원소(자료)가 있으면 그 원소(자료)가 처음 보여지는 순서를 값으로 내놓고, 없으면 -1을 내놓는다. indexOf()의 문법..