코딩자율학습단 19기 | 3주차 총정리 – JS 기본기 + 함수 + 객체/참조

3주차 한 줄 결론 이번 주는 자바스크립트를 “찍먹”하는 것이 아니라 언어의 뼈대(변수·자료형·연산·제어) 를 먼저 고정하고, 그 위에 함수(정의→매개변수/return→스코프·호이스팅·IIFE) 를 얹은 다음 객체(속성 접근/수정/추가/삭제 + 참조 자료형의 얕은 복사) 까지 연결해서 실수 포인트를 미리 차단하는 주였습니다. 이번 주 진행 범위 범위: JS 11~15일차 교재: 「코딩 자율학습 HTML + CSS + 자바스크립트」(김기수 지음, 길벗) 일일 학습일지 인덱스 … 더 읽기

코딩자율학습단 19기 | 15일차 학습일지 – 객체(Object) 기본, 속성 접근/수정, 참조

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 객체(Object) 기본: “키(key) – 값(value)” 묶음 데이터 역할: 여러 값을 하나의 덩어리로 구조화(속성들의 집합) 핵심 포인트: 짧은 예시(코드): 2-2) 객체 속성 접근: 대괄호([ ]) vs 마침표(.) 역할: 객체 안의 특정 속성값을 읽어오기 핵심 포인트: 짧은 예시(코드): 2-3) 속성값 변경/추가/삭제: “접근 후 할당 / delete” 역할: … 더 읽기

코딩자율학습단 19기 | 14일차 학습일지 – 스코프/호이스팅/IIFE(즉시 실행 함수)

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 스코프: “어디서 선언했는가”가 접근 범위를 결정 역할: 식별자(변수/함수)를 어느 범위에서 참조할 수 있는지 결정하는 규칙 핵심 포인트: 짧은 예시(코드): 2-2) 호이스팅: “선언이 위로 끌어올려진 것처럼” 동작 역할: 코드 실행 전에 선언 정보를 미리 처리해, 실행 흐름에 영향을 주는 동작 핵심 포인트: 짧은 예시(코드): 2-3) 즉시 … 더 읽기

코딩자율학습단 19기 | 13일차 학습일지 – 자바스크립트 함수 정의/호출, 매개변수·return

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 함수란 무엇이고 왜 쓰나 역할: 특정 목적의 코드를 블록으로 묶어 필요할 때 호출해 재사용/유지보수성을 높임 핵심 포인트: 짧은 예시(코드): 2-2) 함수 정의 방법 3가지(선언문/표현식/화살표) 역할: 같은 “함수”라도 작성(정의) 방식이 다름 핵심 포인트: 짧은 예시(코드): 추가 포인트(헷갈리기 쉬운 부분): 짧은 예시(코드): 2-3) 매개변수(parameter)와 인수(argument)로 함수 확장하기 … 더 읽기

코딩자율학습단 19기 | 12일차 학습일지 – 조건문(if/switch)·반복문(while/for)·흐름제어(break/continue)

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 조건문(if / else if / else)로 흐름 분기하기 역할: 조건식 결과(true/false)에 따라 실행 흐름을 나눈다. 핵심 포인트: 짧은 예시(코드): 2-2) switch 문으로 “값” 기준 분기하기 역할: 특정 값이 어떤 case와 일치하는지에 따라 분기한다. 핵심 포인트: 짧은 예시(코드): 2-3) 반복문(while / do…while / for)로 같은 작업 … 더 읽기

코딩자율학습단 19기 | 11일차 학습일지 – 변수/상수(let·const) · 자료형 · 연산자 우선순위/형변환

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리(가장 중요) 2-1) 변수/상수 선언과 동작(var·let·const) 역할: 값을 저장(변수)하거나, 바뀌지 않는 값을 고정(상수)하기 위한 “식별자”를 만드는 것 핵심 포인트: 짧은 예시(코드): 2-2) 식별자(변수/상수 이름) 명명 규칙 역할: 변수/상수를 “구분”하기 위한 이름 규칙 정리 핵심 포인트: 짧은 예시(코드): 2-3) 자료형(data type) 정리(문자열/숫자/논리/undefined/null/객체·배열) 역할: 값의 “종류”를 구분해 올바르게 저장·연산하기 … 더 읽기

코딩자율학습단 19기 | 2주차 총정리 – CSS 선택자 심화 + 레이아웃/효과 + 반응형 + JS 시작

2주차 한 줄 결론 CSS에서 “선택자 → 배치(레이아웃) → 효과(애니메이션/변형) → 반응형(뷰포트/미디어 쿼리)” 흐름으로 웹 화면을 설계하는 감각을 잡았고, 마지막에는 자바스크립트의 기본 연결 방식과 오류 확인 루틴까지 시작했습니다. 이번 주 진행 범위 일일 학습일지 인덱스 이번 주 핵심 개념 TOP 5 TOP 1)CSS 선택자 심화 TOP 2)CSS 스타일 속성 기본기 TOP 3)레이아웃 배치 TOP 4)효과 … 더 읽기

코딩자율학습단 19기 | 10일차 학습일지 – 자바스크립트 연결(내부/외부) · 주석 · 오류 확인

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) HTML에 자바스크립트 적용(내부 스크립트) 역할: HTML 문서 내부에서 즉시 자바스크립트를 실행/적용 핵심 포인트: 기본 형식 짧은 예시(코드): 2-2) HTML에 자바스크립트 적용(외부 스크립트) 역할: JS 코드를 별도 .js 파일로 분리해 HTML과 연결(유지보수/관리 용이) 핵심 포인트: 기본 형식: 짧은 예시(코드): 2-3) script 태그 사용 위치(권장 위치) 역할: … 더 읽기

코딩자율학습단 19기 | 9일차 학습일지 – 반응형 웹(미디어 쿼리) + 그리드 배치 + 정렬 속성

오늘 학습 정보 오늘의 핵심 키워드 3개 태그/속성/개념 정리(가장 중요) 2-1) 플렉스 박스 레이아웃(Flexbox) 핵심 플렉스 박스 구성 요소 역할: 1차원(가로 또는 세로) 레이아웃 정렬/배치를 쉽게 만드는 모델 핵심 포인트: 기본 형식: 짧은 예시(코드): flex-direction (주축 방향 결정) 역할: 아이템이 쌓이는 방향(주축)을 지정 핵심 포인트: 기본 형식: 짧은 예시(코드): flex-wrap (줄 바꿈 여부) 역할: 아이템이 … 더 읽기

코딩자율학습단 19기 | 8일차 학습일지 – position/float 배치 + animation/transform 효과 + 웹/아이콘 폰트

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 위치(배치) 속성: position / top·right·bottom·left 역할: 문서의 기본 흐름에서 요소를 원하는 위치에 배치 핵심 포인트: 기본 형식: 짧은 예시(코드): position 값 정리 역할: 배치 방식 선택 핵심 포인트: 기본 형식: 짧은 예시(코드): 2-2) float / clear: 흐름 제어 배치 역할: 요소를 좌/우로 띄워 배치하고 다음 … 더 읽기