[무료 강의] 118~131쪽, 웹 기초 기술 이해하고, HTML·CSS·자바스크립트로 자기소개 페이지 만들기

바이브 코딩으로 웹사이트를 만들려면 HTML, CSS, JavaScript 세 가지 재료가 어떤 역할을 하는지 먼저 이해해야 합니다. 이번 영상에서는 각 기술의 역할을 눈으로 직접 확인한 뒤, 슬라이드 형태의 자기소개 페이지를 처음부터 만들어 보면서 프롬프트를 반복 수정하는 실전 과정을 함께 진행합니다.

[도서 구매][Yes24] : https://www.yes24.com/product/goods/183530330
[도서 구매][교보] : https://product.kyobobook.co.k....r/detail/S0002195189
오픈카톡방 : https://open.kakao.com/o/ggK7EAJh

타임라인
0:00 4장 시작 — 바이브 코딩 본격 실습 안내
0:37 웹 기술의 세 가지 재료: HTML, CSS, JavaScript
1:48 순수 HTML로만 구성된 웹페이지 만들어 보기
3:13 CSS를 추가해 밋밋한 페이지에 메이크업 입히기
5:27 JavaScript 도입 — 다크 모드 전환 버튼 실습
7:01 자바스크립트의 역할 정리와 다음 단계 예고
8:33 슬라이드형 자기소개 페이지 기획
9:02 플래닝 모드로 전환하고 프롬프트 작성하기
10:15 가상 프로필을 마크다운으로 만들어 재료 준비
11:34 플래닝 결과 확인 후 빌드 실행
12:57 완성된 슬라이드 페이지 첫 확인과 문제점 파악
15:35 슬라이드 수 줄이기 — 반복 수정의 시작
16:36 웹 검색을 유도해 모던 디자인 트렌드 적용하기
18:54 디자인 개선 결과 확인과 추가 수정
19:59 한 번에 완벽하게 안 되는 게 정상인 이유
21:24 오늘 실습 정리와 다음 영상 예고 (132쪽부터)

오늘 다룬 내용
- HTML은 웹페이지의 골격 구조, CSS는 메이크업, JavaScript는 인터랙션 담당
- 순수 HTML → CSS 추가 → JavaScript 도입 순서로 각 기술의 역할을 눈으로 확인
- 가상 프로필을 마크다운으로 만들어 슬라이드형 자기소개 페이지 제작
- 플래닝 모드에서 계획을 세운 뒤 빌드하는 워크플로우 실습
- 프롬프트 한 번으로 완벽한 결과가 나오지 않으므로 반복 수정이 핵심
- 웹 검색을 컨텍스트로 활용해 디자인 품질을 끌어올리는 방법
- index.html 파일명 규칙 등 웹 개발 기본 상식 안내

#바이브코딩 #바이브코딩책 #커서AI #CursorAI #HTML #CSS #JavaScript #웹개발입문 #자기소개페이지 #슬라이드웹사이트 #AI코딩 #프롬프트엔지니어링 #코딩초보 #노코드 #웹사이트만들기 #바이브코딩실습 #AI개발 #커서IDE #플래닝모드 #웹디자인