6월 19일 17시까지 배운 것들

HTML/CSS 기초

• div 태그와 컨테이너 개념
• class vs id 차이점 (.class, #id)
• CSS 속성들:
  • display: flex (flexbox 레이아웃)
  • justify-content, align-items (정렬)
  • padding, border-radius, box-shadow
  • vh 단위 (viewport height)
• CSS 우선순위와 !important

JavaScript 기초 문법

• 변수: let vs const vs var
• 함수 정의와 호출
• 조건문: if/else, 비교 연산자 (=== vs ==)
• DOM 조작:
  • document.querySelector(), getElementById()
  • addEventListener(), innerHTML, textContent
  • createElement(), appendChild()

JavaScript 고급 개념

• 배열과 메소드들:
  • push(), slice(), reverse(), forEach()
• 객체 리터럴: {} 문법과 키-값 쌍
• 화살표 함수: item => { ... }
• 함수를 값으로 취급 (고차 함수 개념)
• 객체 속성 단축 문법: { action, result }

객체 지향 프로그래밍

• class 문법과 constructor
• this 키워드 (현재 객체 참조)
• new 키워드로 인스턴스 생성
• super 키워드 (상속에서 부모 접근)
• 메소드와 속성의 캡슐화

브라우저/DOM 개념

• 이벤트 처리 (onclick, keydown)
• window 객체와 전역 스코프
• 스코프 차이 (함수 스코프 vs 블록 스코프)

실습 프로젝트

• 인터랙티브 카운터 앱 제작:
  • 버튼 클릭 이벤트
  • 키보드 입력 처리
  • 동적 HTML 생성
  • 데이터 기록과 표시
  • 함수형 → 객체 지향 리팩토링