분류 전체보기 검색 결과

224 개의 검색 결과가 있습니다.

Frontend/JavaScript

[JS] 자바스크립트 스크롤바 위치 가져오기

📌 자바스크립트 스크롤바 위치 가져오기 window 객체 사용 HTML 요소 내부의 스크롤바 위치 가져오기 1️⃣ window 객체 사용 window 객체에 scroll 이벤트를 수신하는 eventlistener를 추가할 수 있다. 따라서 window 객체를 이용하여 아래와 같이 스크롤바의 위치를 얻을 수 있다. window.addEventListener("scroll", (event) => { let scrollY = this.scrollY; let scrollX = this.scrollX; console.log(scrollY); console.log(scrollX); }); 2️⃣ HTML 요소 내부의 스크롤바 위치 가져오기 window 스크롤바의 위치가 아닌 HTML 태그 내 요소에 존재하는 스크롤..

2022. 2. 16. 08:38

Frontend/JavaScript

[JS] 자바스크립트로 HTML 클래스 다루기(추가, 변경, 제거, 토글)

📌 자바스크립트에서 HTML 클래스 다루기 HTML 요소 선택 클래스 변경 클래스 추가 클래스 제거 클래스 토글 클래스 존재 여부 확인 1️⃣ HTML 요소 선택 자바스크립트에서 HTML 요소를 선택하는 가장 쉬운 방법은 getElementById( )를 사용하는 것이다. 2️⃣ 클래스 추가 기존 클래스를 변경하지 않고 새 클래스를 추가하려면 +=연산자를 사용하여 추가할 수 있다. 또는 classList.add를 사용하여 추가할 수도 있다. 3️⃣ 클래스 변경 클래스를 변경하려면 className 속성을 사용하여 변경할 수 있다. 또는 classList.replace를 사용하여 변경 할 수도 있다. 4️⃣ 클래스 삭제 클래스 제거시 classList.remove를 사용하면 된다. 5️⃣ 클래스 토글 클래..

2022. 2. 15. 09:08

Frontend/JavaScript

[JS] 대소 문자 구분 없이 문자열 비교하기

📌 자바스크립트 대소 문자를 구분하지 않는 문자열 비교 자바스크립트에서 일반적으로 문자열을 비교할 때 대/소 문자를 구분하여 비교하지만, 대소 문자 구분 없이 문자열을 비교하는 방법은 다음과 같다. toUpperCase(), toLowerCase() 메소드를 사용 localeCompare() 메소드를 사용 정규 표현식을 통해 대소 문자를 구분하지 않는 비교 수행 1️⃣ toUpperCase( ), toLowerCase( ) toUpperCase( ) 는 문자열을 대문자로 변환하며, 변환 후 두 개의 문자열이 같은지 비교하면 된다. var stringA = "This is a JavaScript tutorial"; var stringB = "THIS is A javascript TUTORIAL"; if (..

2022. 2. 14. 08:35

Frontend/HTML & CSS

[CSS] Display와 Visibility 의 차이점 및 속성

📌 CSS 요소 표시 방법 HTML의 요소를 표현하는 방법에는 display와 visibility 두 가지가 있다. 1️⃣ display display는 요소를 표시하는 방법을 결정하며, 요소를 보이지 않게 하는 값으로 none을 사용한다. display: none 일 경우 해당 요소는 보이지 않으며 Layout에 영향을 미치지 않는다. Hidden Show Contents Contents 🌝 속성값 - inline : 인라인 요소로 표현한다. - block : 블럭 요소처럼 표현한다. - inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다. - flex : 블록-레벨의 flex 컨테이너처럼 요소를 표현한다. - inline-flex : 인..

2022. 2. 11. 08:34

Frontend/JavaScript

[JS] 자바스크립트 문자열 숫자로 변환하기

📌 자바스크립트 문자열을 숫자로 변환하기 자바스크립트에서 문자열을 숫자로 변환하는 방법은 아래와 같다. Number( )함수를 사용하여 JavaScript에서 문자열을 숫자로 변환 parseInt( )함수를 사용하여 JavaScript에서 문자열을 정수로 변환 Math객체를 사용하여 JavaScript에서 다양한 연산 메소드 1️⃣ Number( ) Number()는 다른 데이터 타입을 숫자 형식으로 변환하는 데 사용할 수있는 함수이다. 매개 변수가 정의되지 않았거나 숫자로 변환 할 수없는 경우에는 NaN을 리턴한다. console.log(Number("246"))// 246 console.log(Number("246.5"))// 246.5 console.log(Number(undefined))// Na..

2022. 2. 10. 08:33

Frontend/JavaScript

[JS] 문자열의 마지막 콤마 제거하기

📌 자바스크립트 문자열에서 불필요한 콤마 제거 자바스크립트에서 문자열의 마지막에 불필요한 콤마가 있을때 정규식을 이용하여 콤마를 제거할 수 있다. 1️⃣ 예시 const case1 = "cat, dog, rabbit,"; const case2 = "cat, dog, rabbit, "; case1: 문자열의 끝에 콤마가 있을 경우 case2: 문자열의 끝에 콤마가 있고 빈 공백이 이어진 경우 2️⃣ 정규식 사용 const case1 = "cat, dog, rabbit,"; const case2 = "cat, dog, rabbit, "; const result1 = case1.replace(/,\s*$/, ""); const result2 = case2.replace(/,\s*$/, ""); console...

2022. 2. 9. 08:19