-

함수의 선언 방식함수를 어떻게 정의하는지, 즉 문법적인 형태에 따라 분류됨1. 함수 선언식 (기본방법)가장 기본적인 함수 선언 방식이름이 있고, function() 형태로 선언호이스팅(Hoisting)이 됨 → 선언 전에 호출 가능✓ 코드에서 가장 먼저 선언되고, 어디서든 사용할 수 있다!// [문법]function 함수이름(매개변수1, 매개변수2, ...) { // 실행할 코드 return 반환값;}sayHello(); // 가능! (호이스팅 때문)function sayHello() { console.log("안녕!");}2. 함수 표현식변수에 익명 함수(이름 없는 함수) 또는 이름 있는 함수를 담는 방식호이스팅 X → 선언 전에 호출하면 에러 발생조건문 안에서 선언할 경우 반드시 함수 표현식으로..

반응형 헤더 작업 시 유의사항 1. 반응형 레이아웃 설계 📌 브레이크포인트 정의중요 이유: 브레이크포인트가 일관되지 않으면 예기치 않은 레이아웃 깨짐이 발생.팁: SCSS 사용하는 경우 @mixin media($device) 식으로 공통 처리하면 유지보수 용이📌 디자인 일관성 유지각 해상도에서 메뉴 순서, 로고 위치, 버튼 형태가 다르면 사용자 혼란. → 예: PC에선 오른쪽에 있는 메뉴가 모바일에서 맨 아래로 가면 UX가 불편해짐2.내비게이션 메뉴 처리 📌 메뉴 개수에 따른 처리메뉴가 많으면 PC에서는 가로로 충분하지만, 모바일에서는 한 줄에 다 안 들어감.→ 가로 스크롤, 아코디언, "더보기" 처리 등으로 설계 필요.📌 서브 메뉴가 있는 경우PC: hover로 보여주는 드롭다운모바일: 클릭/터..

input 속성 제어input 관련 속성input의 속성을 조회/설정 가능// [문법 - 조회]해당input.value // [문법 - 설정]해당input.value = "변경하려는 값" 속성명설명예value현재 입력된 값을 읽거나 설정input.value = "Hello"type인풋 타입 변경 (text, password 등)input.type = "password"checkedcheckbox, radio가 체크되었는지 확인checkbox.checked = truedisabled비활성화 여부input.disabled = truereadOnly읽기 전용 여부input.readOnly = trueplaceholder힌트 텍스트 설정input.placeholder = "이름 입력"maxLength최대 글자 ..

tabindextabindex는 키보드의 Tab 키를 눌렀을 때 요소가 포커스를 받을 수 있도록 설정하거나, 포커스 순서를 제어하는 속성tabindex의 3가지 값 유형유형설명tabindex="0"- 포커스를 받을 수 없는 요소에 포커스가 가능하도록 만들고 싶을 때 사용. - button, input, a 등은 기본적으로 포커스를 받을 수 있는 요소지만, div, span 등도 값을 주면 포커스 가능.tabindex="-1"- 요소를 탭 키로는 포커스할 수 없지만, JavaScript로는 포커스 가능.- 주로 스크립트나 접근성 목적으로 사용됨.tabindex="1" 이상의 양수- 웹 문서에서 Tab키로 이동 시 가장 먼저 포커스를 받음- 탭 키 순서를 명시적으로 우선 지정. - 숫자가 작을수록 먼저 포커..

해당form.elementsform 안에 있는 모든 폼 컨트롤 요소(input, select, textarea, button 등)를 HTMLFormControlsCollection 형태로 제공하는 유사배열 객체* HTMLFormControlsCollection : 태그 내부에 있는 모든 폼 컨트롤 요소들 (, , , 등)을 배열처럼 접근 가능한 컬렉션 형태로 제공하는 읽기 전용 객체입니다 인덱스 또는 name 속성으로 접근 가능접근 방법1. 인덱스로 접근인덱스를 사용하여 폼 안의 요소를 가져옴// [문법]해당form.elements[인덱스]const form = document.querySelector('form');console.log(form.elements[0].value);2. name 속성..

요소 생성createElement('태그')지정한 태그 이름을 가진 새로운 HTML 요소를 생성동작 방식:DOM에 바로 추가되지 않고, 메모리 상에 존재이 메소드로 생성한 노드는 appendChild, append 등을 통해 DOM에 삽입해야 화면에 표시됨사용 시기:자바스크립트로 동적으로 요소를 만들고 싶을 때이벤트 리스너나 속성 등을 설정하고 DOM에 넣고 싶을 때// [문법]document.createElement('태그명')document.createElement('div');div.textContent = 'new div';createTextNode('텍스트')순수 텍스트 노드를 생성동작 방식:안녕 중에서 "안녕" 같은 텍스트만 따로 만들 때 사용사용 시기:HTML 태그 없이 텍스트만 삽입하고 싶..

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..

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

클래스명을 활용한 요소 제어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..

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