Light Dev

목차 자바스크립트로 이미지 src 변경하기 바닐라 자바스크립트를 이용한 방법 우선 바닐라 자바스크립트를 이용하여 이미지의 src를 바꾸는 방법을 작성해 보겠다. HTML 위의 HTML 코드에서 이미지 태그의 src를 변경하려면 querySelector 메소드를 이용하면 된다. JavaScript // JavaScript let img = document.querySelector(".mainBanner > img"); img.src = "./main02.jpg"; 위의 코드를 이용하면 해당 메소드를 사용하여 img DOM 객체를 가져올 수 있으며, 해당 DOM 객체에서 src를 바꿀 수 있다. JQuery를 이용한 방법 만약 Jquery를 사용하여 src를 변경하려고 한다면, 한 줄로 작업을 실행할 수 있..

목차 말풍선 생성하기 사이트 맨 밑의 링크에 접속하면 간단하게 말풍선 스타일링을 바로 만들 수 있는 말풍선 생성 사이트에 접속할 수 있다. 말풍선 꼬리표 위치(Side) 와 모양(Pointer triangle)과 크기(Pointer size)를 지정해주고 옆의 CSS 코드를 붙여넣으면 말풍선 스타일링을 쉽게 생성할 수 있다. 실제 사용방법은 밑의 코드를 참고하면 쉽게 사용할 수 있을 것이다. HTML Bubbly CSS speech bubbles made easy! CSS .speech-bubble { position: relative; background: #00aabb; border-radius: .4em; } .speech-bubble:after { content: ''; position: abso..

목차 마우스 오른쪽 클릭 금지하기 마우스 우클릭을 하게 되면 Context 메뉴가 나오게 된다. 이번 포스팅에서는 마우스 오른쪽 버튼을 클릭했을 때, 이 Context 메뉴가 뜨지 않도록 하는 방법에 대해서 알아보도록 하자. return false 하기 HTML 여기서 마우스 오른쪽 클릭해보세요. oncontextmenu 이벤트는 마우스를 우클릭했을 때 발생한다. oncontextmenu가 호출되었을 때 return false를 하게 되면, 마우스 우클릭을 해도 context 메뉴가 열리지 않는다. preventDefault() 활용하기 HTML 여기서 마우스 오른쪽 클릭해보세요. 우선 'test' div에 contextmenu 이벤트를 등록한다. 이 때 호출되는 event.preventDefault()..

목차 '=='와 '==='의 차이 '=='는 비교하는 두 개의 값(피연산자)을 강제로 같은 형으로 변환한 후, 비교작업을 한다. 즉, 두 값의 타입이 다르더라도 형 변환된 값이 같다면 true를 리턴한다. '==='는 비교하는 두 개의 값(피연산자)의 타입과 값이 모두 같을 경우에는 true를 리턴한다. JavaScript console.log(1 == '1'); // true console.log(1 === '1'); // false console.log(false == 0); // true console.log(false === 0); // false 위 첫번째 예제에서 숫자 1과 문자열 '1'을 비교하였다. '==' 연산자를 사용하여 비교하면, 두 피연산자의 타입이 달라도 true를 리턴하는 것을 ..

목차 자바스크립트 at() 메소드 2022부터 Array.prototype.at()이 표준 메소드로 채택되면서, 파이썬과 같이 간단하게 음수 인덱스를 사용하는 것이 가능해졌다. 메소드 at()의 추가는 성능적인 문제로 인해 개발되었다기 보다, 가독성면에서의 장점을 위해 추가된 기능이다. at() 메소드는 정수 값을 받은 후, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환하게 된다. 양수와 음수를 모두 지정할 수 있으며, 음수 값의 경우 배열의 뒤에서부터 인덱스를 센다. 또한 at() 메소드의 존재가 대괄호 표기법을 부정하는 것은 아니다. 예를 들어 array[0]은 문제 없이 배열의 첫 요소를 반환한다. 그러나 맨 마지막 요소를 가져오고 싶을 때는 length 속성을 사용해 array[array.le..

목차 이란? DOCTYPE은 document type의 약자로, 웹 문서가 어떠한 형식으로 작성되었는지 또는 최상단에 문서의 형식을 선언하는 것을 의미한다. DOCTYPE 선언의 형식은 HTML 태그는 아니지만, HTML 문서의 버전을 웹 브라우저에 알리며, 대소문자를 구분하지는 않지만 보통은 대문자로 사용하며, 일반적으로 HTML 태그보다 먼저 선언된다. 선언의 목적 DOCTYPE을 선언하지 않으면 같은 내용의 HTML 문서라도 각 브라우저의 따라 전혀 다른 결과물을 출력하는 경우가 발생한다. 이 때문에 브라우저가 HTML 문서를 동일하게 인식할 수 있도록 하고, 문서 간의 호환성을 높이기 위해 선언을 해야 한다. HTML5 버전과 그 이전버전의 차이 HTML5 이전에는 DOCTYPE을 선언하는 코드가..

목차 자바스크립트에서의 변수 JavaScript var Name = 'Kim'; 자바스크립트에서 변수는 자료를 임시로 저장하는 공간이다. var이라는 키워드 오른쪽에 작명을 하시고, 변수에 저장할 자료를 등호로 집어넣어주시면 됩니다. 오브젝트, 어레이, 함수 등 모든 자료들을 담을 수 있습니다. 그리고 var 이름이라는 부분은 선언, Name = Kim 이라는 부분은 값 할당이라고 전문 용어로 표현합니다. 보통 변수만들 땐 두개를 동시에 사용합니다. 그리고 변수를 만들 땐 var, let, const라는 3개 키워드를 이용가능합니다. 3개 키워드마다 특징이 있습니다. 변수의 선언, 할당, 범위에서 차이가 존재하는데 자세한 내용은 밑에 나와있다. 변수의 선언 JavaScript var Name; let A..

목차 Math 객체 Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다. Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재하지 않는다. 따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메소드나 프로퍼티를 바로 사용할 수 있다. Math 메소드 자바스크립트는 웹 브라우저상에서 수학적 작업을 손쉽게 할 수 있도록 다양한 Math 메소드를 제공하고 있다. 그 중에서 가장 많이 사용되는 대표적인 Math 메소드는 다음과 같다. Math.min() Math.max() Math.random() Math.round() Math.floor() Math.ceil() Math.sin() 대부분의 Math 메소드는 웹 브라우저마다..