hy30nq's blog

JavaScript의 const 키워드와 클래스 조작 메서드 1. const 키워드 const는 JavaScript에서 상수를 선언할 때 사용되는 키워드입니다. 한 번 선언된 const 변수는 재할당이 불가능하며, 프로그램 내에서 그 값이 변경되지 않도록 보장합니다. 이는 코드의 가독성과 유지보수성을 향상시키는 데 도움이 됩니다. const의 특징: 블록 스코프를 가집니다. 선언과 동시에 초기화해야 합니다. 재할당할 수 없습니다. 사용 예시: const PI = 3.14; console.log(PI); // 출력: 3.14 // PI = 3.15; // TypeError: Assignment to constant variable. 2. classList.add()와 classList.remove() HT..

JavaScript에서의 DOM 조작: append, insert, innerHTML 그리고 DOM 드릴링 1. append append 메서드는 특정 부모 요소의 자식으로 새로운 요소를 추가할 때 사용됩니다. 이는 기존의 자식 요소들 뒤에 새로운 요소를 덧붙이는 방식으로 작동합니다. 사용 예시: let parentElement = document.getElementById('parent'); let newElement = document.createElement('div'); newElement.innerText = '새로운 요소'; parentElement.append(newElement); 2. insertBefore insertBefore 메서드는 특정 ..

DOM에서 요소 검색하기: getElementById(), querySelector(), querySelectorAll() 1. getElementById() 개요 getElementById() 메소드는 주어진 ID 값을 가진 DOM 요소를 찾아 반환합니다. 이 메소드는 ID가 유일하다는 전제 하에 동작하며, 문서 내에서 같은 ID를 가진 두 번째 요소는 무시됩니다. 사용법 let element = document.getElementById("myElement");이 예제에서는 ID가 "myElement"인 요소를 찾아 element 변수에 할당합니다. 장점 및 단점 장점: 매우 빠르며, ID를 사용하여 직접적으로 요소를 찾습니다. 단점: ID가 유일하지 않은 경우 문제가 발생할 수 있습니다. 2. qu..

객체(Object)란? 객체는 속성(properties)과 메서드(methods)를 가진 데이터의 집합입니다. 웹 개발에서 객체는 HTML 요소, 브라우저의 창(window), 문서(document) 등을 포함한 거의 모든 것을 나타낼 수 있습니다. 객체는 자바스크립트를 통해 웹 페이지의 다양한 요소와 상호작용하는 기본 단위로 사용됩니다. DOM(Document Object Model)이란? DOM은 웹 페이지의 모든 요소를 객체로 나타내는 모델입니다. 웹 브라우저는 HTML 문서를 로드한 후, 해당 문서를 DOM으로 변환하여 구조화합니다. 이를 통해 개발자들은 자바스크립트를 사용하여 문서의 구조, 스타일, 내용 등을 동적으로 변경할 수 있습니다. DOM 트리와 DOM 탐색 DOM 트리: HTML 문서는..

자바스크립트의 기본: 함수와 메서드 자바스크립트는 웹 페이지에 동적인 기능을 추가하는 데 사용되는 프로그래밍 언어입니다. 이 글에서는 자바스크립트의 기본적인 함수 사용법과 몇 가지 주요 메서드를 소개하려고 합니다. 함수의 기본 자바스크립트에서 함수는 특정 작업을 수행하는 코드의 집합입니다. 함수는 코드를 재사용할 수 있게 하며, 코드의 구조를 더 명확하게 합니다. 함수 선언 기본적인 함수 선언은 다음과 같습니다: function 함수이름(매개변수1, 매개변수2) { // 실행할 코드 } 예를 들어, 두 숫자를 더하는 간단한 함수는 다음과 같이 작성할 수 있습니다: function add(a, b) { return a + b; } 함수 호출 함수를 선언한 후에는 아래와 같이 호출할 수 있습니다: let r..

자바스크립트에서의 변수와 값 자바스크립트에서 변수는 데이터를 저장하는 컨테이너로, var, let, const 세 가지 키워드를 사용하여 선언할 수 있습니다. 이들 각각은 변수의 범위(scope)와 변경 가능성에 대해 다른 특징을 가집니다. var, let, const의 차이점 var: 함수 레벨 스코프를 가지며, 재선언 및 재할당이 가능합니다. let: 블록 레벨 스코프를 가지며, 재할당은 가능하지만 재선언은 불가능합니다. const: 블록 레벨 스코프를 가지며, 한 번 선언된 값에 대해 재선언 및 재할당이 모두 불가능합니다. var name = "홍길동"; let age = 30; const birthYear = 1990; 데이터 타입 자바스크립트에서 값은 여러 데이터 타입을 가질 수 있습니다. 가장..

자바스크립트 기초: 웹 페이지에 생명을 불어넣는 첫걸음 자바스크립트는 웹 페이지를 동적이고 상호작용적으로 만드는 데 필수적인 프로그래밍 언어입니다. HTML과 CSS로 구성된 웹 페이지에 자바스크립트를 추가함으로써, 사용자의 입력에 반응하고, 데이터를 실시간으로 처리하며, 웹 페이지의 콘텐츠를 동적으로 변경할 수 있습니다. 기본 문법과 구조 자바스크립트는 C언어와 유사한 문법을 가지고 있습니다. 변수를 선언할 때는 let과 const 키워드를 사용하며, 조건문과 반복문, 함수 등의 기본적인 프로그래밍 구조를 지원합니다. // 변수 선언 예시 let name = "홍길동"; const age = 25; // 함수 선언 예시 function greet(name) { console.log("안녕하세요, " +..

시맨틱 요소란? '시맨틱' 요소란 그 자체로 내용의 의미를 명확하게 전달하는 HTML 요소를 말합니다. 이러한 요소들은 웹사이트의 내용을 더 잘 구조화하고, 검색 엔진 최적화(SEO)에 유리하며, 접근성을 향상시킵니다. 시맨틱 요소의 예시: : 페이지나 섹션의 머리말을 나타냅니다. : 페이지나 섹션의 꼬리말을 나타냅니다. : 독립적으로 구분되거나 재사용 가능한 콘텐츠 영역을 정의합니다. : 문서의 일반적인 구역을 나타냅니다. : 탐색 링크의 집합을 나타냅니다. 이러한 요소들은 웹사이트의 구조를 명확하게 하며, 스크린 리더와 같은 보조 기술이 콘텐츠를 더 잘 이해하도록 돕습니다. 논시맨틱 요소란? 반면, '논시맨틱' 요소는 그 자체로는 별다른 의미를 내포하지 않는 HTML 요소..