HTML·CSS·JS

전체 34강 · 8개 Phase. 순서대로 따라오면 돼요.

난이도 · 입문

실습 소스코드

강의 코드를 GitHub에서 바로 받으세요

HTML·CSS·JS 강의를 따라 만드는 전체 코드예요. 내려받아 직접 돌려보며 익히면 훨씬 빨라요.

soongu/instagram-html-css-js-basic

git clone https://github.com/soongu/instagram-html-css-js-basic.git

GitHub에서 코드 보기 (새 탭에서 열림)

main 브랜치가 아니라 챕터별 브랜치로 나눠 뒀어요. GitHub 상단의 브랜치 메뉴에서 지금 보는 강의에 맞는 브랜치를 고르면, 그 시점의 코드가 그대로 나옵니다.

읽은 강0 / 340%

이어보기 A-1: 웹과 HTML 개론 →전체 완료 🎉 처음부터 다시 보기 →

필수 과정

▸ Category A · HTML 기초 웹의 뼈대를 세운다

4강

A-1 A-1: 웹과 HTML 개론웹이 돌아가는 원리와 HTML로 첫 페이지 뼈대 세우기 29분 읽음 문서 A-2 A-2: 텍스트와 링크제목 문단 강조 목록과 링크로 페이지를 이어 메뉴 이동까지 66분 읽음 문서 A-3 A-3: 미디어와 테이블사진 영상 소리를 넣고 표로 데이터를 정리하기 79분 읽음 문서 A-4 A-4: 폼과 입력사용자 입력을 받는 폼을 만들고 브라우저가 입력을 검사하게 하기 54분 읽음 문서

▸ Category B · CSS 기초 뼈대에 옷을 입힌다

8강

B-1 B-1: CSS 입문과 선택자선택자로 꾸밀 대상을 콕 집어 첫 색 입히기 38분 읽음 문서 B-2 B-2: 박스 모델과 기본 스타일링모든 요소를 상자로 보고 여백과 테두리로 간격 잡기 51분 읽음 문서 B-3 B-3: 레이아웃 기초display와 position으로 상자를 배치하고 따라오는 메뉴 바 만들기 51분 읽음 문서 B-4 B-4: Flexbox 완전 정복자식 요소를 한 줄에 고르게 정렬하고 가운데로 모으기 63분 읽음 문서 B-5 B-5: Grid & 고급 레이아웃사진을 가로세로 격자로 깔끔하게 까는 2차원 배치 61분 읽음 문서 B-6 B-6: 반응형 웹미디어 쿼리로 화면 크기마다 레이아웃이 바뀌는 웹 만들기 68분 읽음 문서 B-7 B-7: 애니메이션 & 전환멈춰 있던 화면에 transition과 keyframes로 부드러운 움직임 입히기 60분 읽음 문서 B-8 B-8: CSS 실전 — 변수·BEM·Reset·다크 모드색값을 한곳에 모으고 통째로 갈아끼워 다크 모드 만들기 50분 읽음 문서

▸ Category C · JavaScript 기초 페이지에 생명을 불어넣는다

7강

C-1 C-1: JavaScript 입문변수와 조건문 반복문으로 멈춘 화면에 동작 넣기 46분 읽음 문서 C-2 C-2: 함수 기초반복되는 코드를 묶어 이름 붙이고 입력과 결과로 재사용하기 39분 읽음 문서 C-3 C-3: 함수 어드밴스변수 범위와 함수가 값처럼 넘나드는 한 단계 더 44분 읽음 문서 C-4 C-4: 배열과 객체여러 데이터를 한 다발로 묶고 돌고 거르고 변환하기 54분 읽음 문서 C-5 C-5: 모던 문법과 모듈백틱과 안전연산자로 코드를 깔끔하게 쓰고 파일을 역할별로 나누기 41분 읽음 문서 C-6 C-6: 비동기 기초와 Promise멈춤 없이 일을 맡겨두고 Promise로 순서를 정리하기 37분 읽음 문서 C-7 C-7: Promise 심화와 async/await여러 비동기를 묶고 await로 동기처럼 읽기 48분 읽음 문서

▸ Category D · DOM & 브라우저 API 화면을 조작하고 서버와 대화한다

5강

D-1 D-1: DOM 조작자바스크립트로 화면 요소를 찾고 바꾸고 만들고 지우기 47분 읽음 문서 D-2 D-2: 이벤트 핸들링클릭 같은 사용자 행동에 함수를 연결해 화면을 반응하게 만들기 51분 읽음 문서 D-3 D-3: Fetch와 비동기 데이터fetch로 서버 데이터를 받아 화면에 그리기 50분 읽음 문서 D-4 D-4: 비동기 통신 실전 — 저장하고, 더 불러오고, 기다리게 하기댓글 저장과 무한 스크롤 로딩까지 갖춘 실전 서버 통신 67분 읽음 문서 D-5 D-5: 브라우저 저장소 & 개발자 도구 — 로그인을 기억하고, 들여다보고, 멈춰서 고치기로그인 정보를 브라우저에 저장하고 개발자도구로 들여다보기 60분 읽음 문서

심화 과정 (선택)

▸ Category E · JavaScript 심화 언어의 깊이를 파고든다

3강

E-1 E-1: 클래스 & 프로토타입 — 객체를 찍어내는 틀, 그리고 다크 모드 약속 갚기비슷한 객체를 틀로 찍어내고 this 함정까지 다루기 86분 읽음 문서 E-2 E-2: 에러 핸들링 & 디버깅 — 실패를 구조화하고, 빠르게 진단하기실패에 상태코드를 담아 던지고 종류별로 가려 처리하기 82분 읽음 문서 E-3 E-3: 모듈 시스템 심화 & Vite — 여러 파일을 하나로 묶고, 빌드 도구로 배포까지흩어진 파일을 하나로 묶고 빌드 도구로 배포 준비하기 50분 읽음 문서

▸ Category F · 웹 성능 & 최적화 빠른 페이지를 만든다

2강

F-1 F-1: 웹 성능 기초 — 우리 사이트가 얼마나 빠른지 숫자로 재고, 어디를 고칠지 찾는다Lighthouse로 사이트 속도를 숫자로 재고 약점 찾기 52분 읽음 문서 F-2 F-2: 이미지 & 리소스 최적화 — 찾아낸 약점을 실제로 고쳐 점수를 끌어올린다이미지를 가볍게 바꾸고 첫 사진은 먼저 받아 속도 올리기 52분 읽음 문서

▸ Category G · 웹 접근성 & 표준 모두를 위한 웹을 만든다

2강

G-1 G-1: 웹 접근성 — 눈으로 못 보고, 마우스를 못 써도 우리 인스타그램을 쓸 수 있게화면을 못 봐도 키보드만으로도 쓸 수 있는 페이지로 다듬기 55분 읽음 문서 G-2 G-2: SEO 기초 — 검색 엔진과 SNS에게도 잘 보이는 페이지 만들기검색 엔진과 SNS 미리보기에 페이지를 또렷이 보이게 하기 55분 읽음 문서

▸ Category H · 고급 브라우저 API 브라우저의 숨겨진 힘을 쓴다

3강

H-1 H-1: Web Workers & 오프라인화면 안 멈추고 인터넷 끊겨도 켜지는 앱 같은 웹 만들기 74분 읽음 문서 H-2 H-2: Canvas & 시각화canvas 붓으로 도형 글자 애니메이션을 직접 그리고 데이터를 막대 그래프로 시각화하기 88분 읽음 문서 H-3 H-3: Web Components라이브러리 없이 나만의 HTML 태그를 정의하고 Shadow DOM으로 한 덩어리로 캡슐화하기 60분 읽음 문서