-

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

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

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

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

Framework (프레임워크)어플리케이션을 만들 때 기본 구조와 흐름을 정해놓고 개발을 하도록 도와주는 도구프레임워크는 기본적으로 전체적인 뼈대, 아키텍처, 규칙을 제공하고 개발자는 그 위에 기능을 구현하는 형태보다 구조화된 방식으로 코드를 작성하도록 강제하며, 프레임워크의 규칙과 구조를 따라야 함프레임워크는 '제어의 역전(Inversion of Control)'을 가짐. 즉, 개발자가 호출하는 게 아니라 프레임워크가 개발자의 코드를 호출하는 방식으로 동작종류구분예CSSBootstrap, Tailwind CSS, Bulma, FoundationJSAngular, React, Vue.js, Svelte, Express, Next.js, Nuxt.js✓ "틀(frame)" + "작업(work)" = 작업을..

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

aspect-ratio요소의 가로 세로 비율을 지정하는 속성상위 컨테이너나 뷰포트의 크기가 변경되더라도 브라우저는 지정된 종횡비를 유지하며 크기를 조정속성은 : auto, n, width / height 형태로 설정반응형 작업 시 PC에서 고정으로 사용하던 이미지를 Mobile 100%로 가변 비율을 변경 시 이미지의 비율을 유지하기 aspect-ratio: auto aspect-ratio: 1 / 1;aspect-ratio: 1;/* 콘텐츠 비율 우선, 없으면 설정값 사용 다만, 현재 브라우저 지원 낮아 잘 사용되지 않음*/aspect-ratio: auto 3/4;aspect-ratio: inherit;aspect-ratio: initial;aspect-ratio: revert;aspect-rati..

transitioncss 속성을 변경할 때 애니메이션 속도를 조정하는 방법을 제공transition : 속성 지속시간 시간함수 지연시간;transition-property트랜지션을 적용할 css 속성의 이름transition-duration트랜지션이 일어나는 지속시간 설정transition-timing-function트랜지션 시간함수 설정속성값 : ease, linear, ease-out, step-end 등 cubic bezier() 함수를 이용하여 설정 가능transition-delay트랜지션 시작 지연시간 설정

transform주변 요소에 영향을 끼치지 않으면서 원하는 요소의 모습을 변경하는 속성scale요소의 배율을 지정하는 함수두 개의 요소를 지정해서 x, y를 다르게 설정 가능transform : scale(n)transform : scale(x, y)rotate요소의 회전을 지정하는 함수속성 단위 : deg, tum1 tum = 360도, 0.5 tum = 180도transform : rotate(45deg)transform : rotate(1tum)translate요소의 위치를 지정하는 함수속성 단위 : top, left, bottom, right, 숫자 단위 (px, % 등)%는 부모가 아닌 해당 요소의 너비와 높이를 기준으로 함transform : translate(1px, 24px)transfor..

Grid 행(row)과 열(column)을 동시에 다루는 2차원 레이아웃 시스템 콘텐츠를 행과 열에 배치할 수 있으며 float나 flexbox보다 레이아웃 구조를 직관적이고 정밀하게 만들 수 있음특징부모 요소(그리드 컨테이너) 안에서 자식 요소(그리드 아이템)의 위치와 크기를 행·열 기준으로 지정 가능격자(grid) 형태의 셀(cell) 기반 배치수평·수직 정렬 모두 자유로움레이아웃을 HTML 구조 변경 없이도 CSS만으로 재배치 가능Grid vs Flex항목GridFlex레이아웃 방향2차원 (행 + 열 동시 제어)1차원 (행 또는 열 중 하나만 제어)주 사용 목적- 전체 페이지- 대규모 레이아웃 설계- 작은 단위의 UI 정렬- 한 줄 배치배치 기준부모에서 행·열 구조를 먼저 정의 후 배치자식 요소 콘..