그냥, 일단 써내려가자

안녕하세요 무택입니다 :) 오늘 알아볼 기능은 html요소에 클래스 추가하는 함수를 만들어보려고 합니다. 오늘의 기능에서 포인트는 기능을 함수로 만들어서 반복 사용에 편하게 만드는 것입니다. 오늘의 예제 코드 1.HTML/CSS - 글자수가 5를 넘어가면 클래스 추가 글자입력: 2.JS - let title = document.querySelector('#title'); //요소에 클래스 추가하는 함수 function addClass(el, className) { el.classList.add(className); } function removeClass(el, className) { el.classList.remove(className); } function print(){ let prtLang = d..

안녕하세요 :) 무택입니다🧔 오늘 알아볼 내용은 자바스크립트에서 많이 사용되는 classList 메소드에 대한 내용입니다. add, remove, toggle 등 활용 방법이 다양하고 비교적 간단하게 사용할 수 있어 자바스크립트 기능 중에 꼭 알아둬야 할 메소드인 것 같습니다. 목차 가. 코드 나. codepen 예제 다. classList 설명 코드 HTML - add테스트 add 활성화 remove테스트 remove 활성화 contains테스트 contains 활성화 replace테스트 replace 활성화 toggle테스트 toggle 활성화 CSS - * { padding: 0; margin: 0; list-style: none; } li{ margin-block: 20px; } .pink { c..

안녕하세요 :) 무택입니다🧔 오늘은 동등연산자(==)와 일치연산자(===)의 비교입니다.처음에 보면 헷갈리는 부분이 있기 때문에 정리해보려고 합니다. #동등연산자(==) - 두 피연산자의 값이 같으면 true반환 - 피연산자의 타입이 서로 다르면 강제로 타입을 같게 변환 [10 == '10'] // true [true == 1] // true [true == '1'] // true [true =='true'] // false [null == undefined] // true [10 == '10'] 하나가 숫자형이고 다른 하나가 문자열이면 문자열을 숫자로 변환 후 비교 [true == 1] 피연산자 중 불리언 값이 있으면 불리언 값을 0&1로 변환 후 비교(false=0, true=1) [true == '..

안녕하세요 :) 무택입니다🧔 이번에는 웹페이지에서 빠질 수 없는 팝업 적용하는 코드에 대해 기록하도록 하겠습니다. 일반적인 팝업에 배경 블러효과+팝업 활성화 시 배경 클릭 시 닫히는 기능도 같이 구현했습니다. 배경 블러효과를 주면 팝업에 더 집중되는 효과를 줄 수 있습니다. See the Pen popup Layer(배경 블러 효과 + 외부 클릭시 닫기) by TytanLee (@TytanLee) on CodePen. 추가로 사용된 문법들에 대한 정리는 아래를 참고해 주세요. [jQuery] mouseup() mouseup() 메서드는 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. #문법 $("선택자").mouseup(); [JavaScript] classList.add() class..