웹 개발 전체 커리큘럼
HTML로 구조를 만들고 CSS로 표현한 뒤 JavaScript로 상호작용을 더합니다. 마지막에는 HTTP와 Git 지식을 연결해 반응형 개인 포트폴리오를 완성합니다.
웹과 HTML
브라우저와 문서의 관계를 이해하고, 의미와 접근성을 갖춘 페이지 구조를 만듭니다.
HTML 소개
학습 결과제목과 문단이 있는 첫 웹페이지
강의 열기HTML 문서의 기본 뼈대
학습 결과브라우저가 올바르게 해석하는 문서
강의 열기콘텐츠 계층 만들기
학습 결과읽는 순서가 분명한 소개 페이지
강의 열기시맨틱 페이지 영역
학습 결과랜드마크가 분명한 페이지 구조
강의 열기링크·이미지·경로
학습 결과페이지와 자산이 연결된 문서
강의 열기폼으로 입력받기
학습 결과연락 정보를 받는 접근 가능한 폼
강의 열기웹 접근성 기초
학습 결과키보드와 보조 기술을 고려한 화면
강의 열기Git으로 첫 이력 남기기
학습 결과HTML 프로젝트의 첫 Git 기록
강의 열기페이지가 브라우저에 도착하는 흐름이 더 궁금하다면 보충 강의: 웹페이지 동작 흐름을 함께 읽으세요.
CSS와 반응형
스타일이 적용되는 원리를 익히고, 콘텐츠에 맞춰 유연하게 변하는 레이아웃을 완성합니다.
CSS 선택자
학습 결과원하는 요소에 정확히 적용되는 스타일
강의 열기Cascade와 상속
학습 결과충돌 이유를 설명할 수 있는 스타일시트
강의 열기박스 모델
학습 결과예측 가능한 카드 크기와 간격
강의 열기타이포그래피·색상·변수
학습 결과일관된 시각 언어와 디자인 토큰
강의 열기Flexbox
학습 결과한 방향으로 정렬된 내비게이션
강의 열기Grid
학습 결과유연한 프로젝트 카드 그리드
강의 열기반응형 디자인
학습 결과화면 폭에 대응하는 포트폴리오
강의 열기상호작용 상태와 모션
학습 결과입력 방식과 설정을 존중하는 피드백
강의 열기JavaScript와 DOM
데이터를 다루는 기본 문법에서 시작해 실제 문서와 사용자 입력을 연결합니다.
JavaScript 값과 변수
학습 결과프로젝트 데이터를 표현하는 변수
강의 열기조건문과 반복문
학습 결과조건에 따라 달라지는 처리 흐름
강의 열기함수와 스코프
학습 결과책임이 분리된 재사용 함수
강의 열기배열
학습 결과여러 프로젝트를 다루는 목록 데이터
강의 열기객체
학습 결과하나의 프로젝트를 설명하는 데이터 모델
강의 열기DOM 조작
학습 결과데이터에서 만들어지는 프로젝트 카드
강의 열기이벤트
학습 결과클릭에 반응하는 인터페이스
강의 열기폼 이벤트와 상태
학습 결과검색 조건을 기억하는 필터 폼
강의 열기JavaScript 모듈
학습 결과파일 책임이 분리된 애플리케이션
강의 열기HTTP와 배포
브라우저와 서버의 대화를 이해하고 외부 데이터를 요청한 뒤 GitHub Pages에 결과물을 공개합니다.
HTTP 요청과 응답
학습 결과개발자 도구로 분석한 네트워크 흐름
강의 열기fetch와 JSON
학습 결과외부 JSON으로 렌더링되는 목록
강의 열기Git 브랜치
학습 결과기능을 분리해 작업한 Git 이력
강의 열기GitHub Pages 배포
학습 결과공개 URL로 접속 가능한 정적 사이트
강의 열기