1. 이벤트 개요Vue에서는 `v-on` 디렉티브 또는 `@` 축약형을 사용해 DOM 이벤트에 반응합니다.ClickClick이벤트 이름은 표준 DOM 이벤트와 동일연결된 메서드는 methods 영역에 정의2. 인라인 이벤트 처리인라인으로 간단한 표현식을 사용간단한 계산이나 단일 동작일 때 유용복잡한 로직은 methods에 위임+13. 이벤트 핸들러 메서드이벤트와 로직을 분리해 코드의 재사용성과 가독성 확보복잡한 동작은 methods 옵션에 정의하고 연결 `this`는 해당 Vue 인스턴스를 참조methods: { increment() { this.count++; }, submit() { alert("입력 완료!"); }}4. 이벤트 객체 이벤트 핸들러에서 `$event`를 명시해 이벤트..

1. Vue 인스턴스 개요1.1 Vue 인스턴스란?Vue 애플리케이션은 Vue 인스턴스를 통해 시작const app = Vue.createApp({...});app.mount('#app');`createApp()`은 Vue 애플리케이션 인스턴스를 생성`mount()`는 인스턴스를 특정 DOM 요소에 "마운트" (적재)→ 이후 DOM 렌더링과 반응형 데이터 처리가 연결✅ Vue에서 모든 컴포넌트 트리는 마운트 된 인스턴스를 기준으로 구성let vm = Vue.createApp({ name: "App", data() { return { name: "" }; },}).mount("#app");2. `data` 옵션2.1 역할컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용`data()`는 V..

1.보간법1.1 MVVM(Model-View-ViewModel)Vue는 MVVM 아키텍처 기반으로 동작View: HTML 템플릿ViewModel: Vue 인스턴스 (상태 & 로직)Model: 실제 데이터✅ `data()`의 리턴 객체는 Vue 내부에서 Proxy 객체로 감싸짐 → 데이터 접근 및 변경 감지 가능 1.2 보간법(Mustache)템플릿 내에서 `{{ 변수명 }}`으로 데이터를 출력 {{ message }} 해당 변수는 JavaScript 표현식으로 간주 (문자열 아님)✅ 핵심 요점 정리 항목 설명 MVVMView, ViewModel, Model로 구성Proxy데이터 감지 및 바인딩 핵심보간법`{{ message }}` → 데이터 바인딩 표현식2. 기본 디렉티브v-로 시작하는 속성HTML 요소..

1. ES6 소개1.1 ES6란?ECMAScript 6(ES6)는 2015년에 도입된 JavaScript의 주요 업데이트 버전.새로운 문법과 기능이 추가되어 코드 가독성과 개발 생산성이 향상됨.✅ ES6 주요 특징 기능  설명 `let`, `const`블록 스코프 변수 선언화살표 함수`function`을 간결하게 표현구조 분해 할당배열과 객체의 값을 쉽게 추출템플릿 리터럴문자열 조합을 백틱(`)으로 표현`Promise`비동기 프로그래밍 개선`import/export`모듈 시스템 도입전개 연산자배열, 객체 확장 및 복사Proxy객체 동작을 가로채서 제어2. `let`과 `const`2.1 `var`의 문제점 (호이스팅)`var`는 선언 전에 접근 가능 (호이스팅) → 예기치 않은 동작 가능블록 스코프를 ..

1. Vue.js란?1.1 Vue.js 소개Vue.js는 프론트엔드 JavaScript 프레임워크로, 데이터 바인딩과 컴포넌트 기반 개발을 쉽게 구현할 수 있도록 설계됨.가볍고 배우기 쉬우며, 점진적으로 도입할 수 있어 기존 프로젝트에도 쉽게 적용 가능. ✅ 컴포넌트(Component)웹을 구성하는 로고, 메뉴바, 버튼 등 웹 페이지 내의 다양한 UI요소재사용 가능하도록 구조화 한 것✅ Vue.js 공식 사이트https://kr.vuejs.org/1.2 Vue.js의 핵심 개념✅ MVVM 패턴(Model-View-ViewMode)Vue.js는 MVVM 아키텍처 패턴을 따릅 역할  설명 ViewHTML과 CSS로 작성된 UIViewModelView의 데이터 및 로직을 관리하는 Vue 인스턴스Model데이..

1. 문서 객체 모델(DOM)의 기본 용어와 개념1.1 DOM이란?Document Object Model (DOM): HTML 문서를 **객체(트리 구조)**로 변환하여 JavaScript에서 조작할 수 있도록 제공하는 인터페이스HTML 문서를 프로그래밍적으로 변경할 수 있도록 해줌✅ DOM 트리 구조 예시 Header 문서 내용입니다.위 HTML 코드는 트리 형태의 구조로 변환document (최상위 객체) ├── html │ ├── head │ │ └── title │ ├── body │ ├── h1 │ └── p 1.2 DOM 노드 (Node)DOM에서 요소를 노드(Node)라고 부름.노드 유형설명 예시요소 노드 (Element)HTML ..

1. 자바스크립트 기본 용어와 출력 방법1.1 자바스크립트란?웹 브라우저에서 동작하는 프로그래밍 언어HTML과 CSS가 정적인 웹을 구성하는 반면, JavaScript(JS)는 동적인 기능을 제공표현식: 값을 만들어 내는 간단한 코드.문장: 프로그래밍 언어에 실행할 수 있는 코드의 최소 단위키워드: 자바스크립트를 처음 만들 때 정해진 특별한 의미가 부여된 단어식별자: 자바스크립트에서 변수나 함수 등에 이름을 붙일 때 사용하는 단어( 첫글자로 영문자 / '_' /  '$' 가능) 1.2 자바스크립트 출력 방법 출력 방법 설명  예제 `alert()`팝업 창 출력`alert("Hello JS!");``console.log()`콘솔에 출력`console.log("Hello JS!");``document.w..

1. 반응형 웹 소개1.1 반응형 웹이란?사용자의 화면 크기에 따라 웹페이지가 유동적으로 변하는 웹 디자인 기법미디어 쿼리(media query)를 사용하여 화면 크기에 맞게 스타일을 조정✅ 반응형 웹이 필요한 이유모바일, 태블릿, 데스크톱 등 다양한 기기에서 일관된 사용자 경험(UX) 제공화면 크기별로 별도 웹사이트를 만들 필요 없이 CSS로 최적화 가능✅ 핵심 요점 정리 항목  설명 반응형 웹다양한 화면 크기에 적응하는 웹 디자인핵심 기술미디어 쿼리 사용필요성UX 향상, 유지보수 용이, SEO 최적화2. 반응형 웹을 위한 설정2.1 뷰포트(Viewport) 설정반응형 웹에서 가장 중요한 설정은 뷰포트(Viewport) 메타 태그모바일 화면에서 자동 확대 방지 및 크기 조정을 위해 사용값설명예widt..

1. 수평, 중앙, One True 정렬 레이아웃1.1 수평 정렬 (Float 방식)`float: left;` 속성을 사용하여 요소들을 가로로 배치`float` 속성은 원래 텍스트를 감싸는 용도로 만들어졌기 때문에 레이아웃을 구성할 때 문제가 발생할 수 있음.자손에게 `float`속성을 지정하고, 부모의 `overflow` 속성에는 `hidden`키워드 적용`hidden` 지정하지 않는다면, 요소들이 떠다님. (빈 공간을 아래 요소가 채움).container { overflow: hidden;}.item { float: left; margin: 0 3px; padding: 10px; border: 1px solid black;} 1.2 중앙 정렬 (`margin: auto;`)..

1. 박스 속성1.1 박스 크기와 여백HTML 요소는 기본적으로 박스 모델을 따름박스의 크기는 `width`와 `height`로 정의전체너비=내용width+2×(margin+border+padding)전체높이=내용height+2×(margin+border+padding)div { width: 100px; height: 100px; background-color: red;} 1.2 여백 (Margin, Padding, Border) 속성  설명  예제 margin요소 바깥쪽 여백 (다른 요소와 거리 조정)`margin: 10px;`padding요소 안쪽 여백 (내용과 테두리 간격)`padding: 20px;`border요소의 테두리`border: 2px solid black;`div {..