분류 전체보기 69

[javascript] 속성 확인 및 수정 (.value, getAttribute, setAttribute..)

property 방식의 요소 속성명 확인요소.속성명 (확인)HTML 요소의 속성을 자바스크립트 객체의 속성처럼 접근함DOM 객체의 속성(property)에 접근HTML과 약간 다르게 동작할 수 있음input.value, img.src, checkbox.checked 등실제 화면에서 바뀐 현재 상태값을 반영함자바스크립트에서 가장 자주 쓰임클래스 속성을 확인하는 경우 className 사용// [문법]요소.속성명const input = document.querySelector('input');console.log(input.value); // input에 입력된 값을 확인요소.속성명 (수정)// [문법]요소.속성명 = "변경할 속성값"const input = document.querySelecto..

JS/Javascript 2025.07.10

[javascript] CSS 스타일 확인 및 수정 (el.style, getCoumputedStyle, SetAttribute, ..)

CSS 스타일 확인 및 수정특정요소의 css 스타일 정보에 접근하고 수정하려면 style을 사용스타일 확인요소.style요소에 직접 설정된 인라인 스타일만 확인 가능// [문법]요소.style.스타일 속성const el = document.querySelector('div');console.log(el.style.color); // 인라인 스타일로 지정된 color만 나옴window.getComputedStyle(요소)해당 요소에 최종적으로 적용된 모든 CSS 스타일을 가져옴외부 CSS, 클래스, 상속 등까지 포함해서 확인 가능.읽기 전용window는 브라우저 전역 객체로 생략가능하여 getComputedStyle(el)로 사용 가능✓ "브라우저가 계산한 결과를 가져오는 느낌 → "브라우저야, 지금 이..

JS/Javascript 2025.07.10

[javascript] 클래스를 활용한 요소 제어 및 classList(className, add, remove, contains, toggle, replace, item, ..)

클래스명을 활용한 요소 제어HTML 요소의 클래스(class)를 확인하거나, 추가하거나, 제거하거나, 토글 하는 등의 작업은 주로 Element.classList를 통해 수행classListDOM 요소의 class 속성을 조작할 수 있도록 제공되는 내장 객체 (DOMTokenList)classList 객체를 통해 클래스의 추가, 제거, 확인 등 다양한 메서드를 활용해 조작 가능유새 배열 객체로 실제 Array 메서드는 사용 불가)const box = document.querySelector('.box');console.log(box.classList); // 결과: DOMTokenList ["box", "active"]classList 메서드// [문법]const element = document.que..

JS/Javascript 2025.07.09

[javascript] 요소의 텍스트·HTML 추출 및 변경 속성 (textContent, innerText, innerHTML, value)

요소의 텍스트 추출 및 수정textContent요소 내부의 모든 텍스트를 가져옴 (공백 포함, 숨겨진 요소 포함)HTML 태그는 무시되고 순수한 텍스트만 처리스타일에 상관없이 숨겨진 텍스트도 포함해서 처리됨장점 : 텍스트만 다루고 싶을 때, 보이지 않은 텍스트까지 포함하여 텍스트 추출 가능사용 목적 : 전체 텍스트 가져오기/수정// [문법]// 텍스트 추출요소.textContent;// 텍스트 수정하기요소.textContent = "텍스트값" let el = document.querySelector("div");let txt = el.textContent;console.log(txt);innerText브라우저에서 실제로 화면에 보이는 텍스트만 가져오거나 수정HTML 태그는 무시되고 순수한 텍스트만 처리스..

JS/Javascript 2025.07.09

[javascript] 유사 배열

유사 배열배열처럼 인덱스와 length 프로퍼티를 가지고 있지만 실제 배열(Array)은 아닌 객체를 의미유사 배열의 특징인덱스가 있음 : 마치 배열처럼 0, 1, 2... 숫자 인덱스로 접근 가능 (예: obj [0], obj [1]) length 프로퍼티가 있음 :요소 개수를 나타내는 숫자 프로퍼티가 있음 (예: obj.length) 배열 메서드 없음 : 실제 배열이 아니기 때문에, push(), pop(), forEach(), map() 같은 배열 고유 메서드는 사용할 수 없음유사 배열 예arguments 객체 (함수 내부에서 사용)NodeList (예: document.querySelectorAll()의 반환값)HTMLCollection (예: document.getElementsByTagNam..

JS/Javascript 2025.07.08

[javascript] 요소 선택 메서드 (getEementById, getElementsByClassName, queryselector ...)

javascript 요소 선택각 메서드는 특정 상황에서 적절하게 사용 가능querySelector / querySelectorAll → 가장 유연하고 대부분의 상황에서 대응 가능반복이 필요한 경우 NodeList는 forEach를 바로 사용할 수 있지만, HTMLCollection은 Array.from()으로 변환해야 함.요소 탐색 대상요소 선택 메서드는 document와 부모 요소가 탐색 대상이 됨 getElementById()의 경우 documnet만 가능탐색 대상 객체설명document웹 페이지 전체 문서 전체Element (특정 요소)특정 요소 내 자식 요소들만 탐색getElementById()// [문법]document.getElementById('아이디');용도: id 속성이 있는 요소 하나를..

JS/Javascript 2025.07.08

[javascript] DOM, 파싱, 노드

DOM(Document Object Model) 웹 페이지의 HTML을 트리 구조로 표현한 자바스크립트 객체 웹 페이지의 구조(HTML)를 자바스크립트에서 객체(트리 구조) 형태로 표현한 모델HTML, CSS로 웹사이트를 만들 때 자바스크립트로 이를 제어하기 위해 DOM이 필요함DOM은 브라우저가 자동으로 만들어줌브라우저가 HTML을 파싱 해서 만든 객체 구조이고, 자바스크립트는 이 DOM에 접근해서 내용을 읽거나 수정할 수 있음DOM의 구조 예HTML은 계층적인 구조를 DOM은 트리 형태(노드 트리)로 바꿔 표현 각 HTML 요소가 노드(Node)로 표현되고, document는 그 모든 것의 최상위 객체[HTML 텍스트] ↓ (파싱)[DOM 트리 구조] 🗺️ └─ [노드1] 🌿 └─ [노..

JS/Javascript 2025.07.08

[Javascript] 조건문 switch

switch특정 변수나 상수 또는 반환값에 따라 작업을 실행하나의 값이 여러 경우 중 어디에 해당하는 지 찾을 때 유용switch (표현식) { case value1: // value1일 때 실행 break; case value2: // value2일 때 실행 break; default: // 어떤 case와도 일치하지 않을 때 실행} expression의 결과와 case의 값을 **===(엄격 비교)**로 비교함.일치하면 해당 case의 코드를 실행하고 break를 만나면 빠져나감.break가 없으면 다음 case로 계속 넘어감(이걸 "fall-through"라고 부름).어느 case에도 일치하지 않으면 default 실행.표현식 안에 설정 가능한 값값을 도출할 수 있는..

JS/Javascript 2025.07.04

Framework(프레임워크), Library(라이브러리)

Framework (프레임워크)애플리케이션의 구조와 흐름을 제어하기 위한 기본적인 구조(뼈대)를 제공보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 개발자에게 미리 정의된 규칙과 구조를 제공하여 일관성 있는 개발을 도와주며, 개발자는 프레임워크에서 호출되는 메소드를 구현하는 역할자바스크립트 프레임워크 종류 : Angular, React, Vue.js, Spring ...도구설명Angular전체 구조와 생명주기를 Angular가 제어ReactUI 컴포넌트만 다루지만, Next.js 같은 프레임워크와 함께 쓰면 프레임워크처럼 사용 가능* 프레임워크와 라이브러리 경계가 모호함Vue.js전체 구조와 구성요소를 정의 .. CSS 프레임워크 종류 : Bootsta..

JS/Javascript 2025.06.27

[CSS] backdrop-filter

backdrop-filter적용된 요소의 영역만큼 원하는 필터를 적용하는 속성으로, 벤더 프리픽스와 사용 (* 사용 시 브라우저 지원 확인)backdrop-filter : 속성(속성단위)속성설명blur- 이미지를 흐리게 함- 예) blur(10px)- 픽셀 값이 높아질 수록 더 흐려brightness- 밝기 조정contrast- 색 대비 조정- 원래 상태 100%을 기준으로 낮으면 흐려지고, 높으면 뚜렷해짐- 대비가 높을 수록 밝은 색은 더 밝아지고, 어두운 색은 더 어둡게 표현됨saturate- 채도 조정, 색을 얼마나 다채롭게 표현하는지 정함- 0% : 완전히 뺀 흑백 상태- 높을수록 더 많은 색을 사용해 진해짐grayscale- 채도 조정- saturate 와 반대 설정- 100% 에 가까울 수록 ..

CSS/CSS 2025.06.27
반응형