AI랑 같이하는 코딩

  • 홈
  • 태그
  • 방명록

웹앱레이아웃 1

[바이브코딩 HTML 웹앱 20일 챌린지] 3일차 - 웹앱의 기본 뼈대 만들기

3일차에서는 어제 띄운 첫 화면을 앱 구조답게 정리해봅니다. 단순히 텍스트와 박스를 나열하는 단계를 넘어, 상단 헤더와 본문 영역을 나누고 할 일 카드와 메모 카드를 배치해 대시보드 형태의 기본 뼈대를 잡는 날입니다.바이브코딩 흐름에서는 이 시점이 특히 중요합니다. 지금 구조를 깔끔하게 나눠두면 4일차 스타일링, 5~8일차 기능 추가 때 수정 포인트가 명확해지고, 초보자도 "어디를 바꿔야 하는지"를 잃지 않고 따라갈 수 있습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심은 "레이아웃 분리"입니다. `header`, `main`, `secti..

바이브코딩 HTML 웹앱 20일 챌린지 2026.05.01
이전
1
다음
더보기
프로필사진

AI랑 같이하는 코딩

코딩을 완벽히 몰라도 괜찮습니다. AI와 대화하며 HTML, CSS, JavaScript로 작은 웹앱을 하나씩 만들어가는 바이브코딩 기록 블로그입니다.

  • 분류 전체보기 (79) N
    • 바이브코딩 HTML 웹앱 20일 챌린지 (20)
    • 바이브코딩 개념사전 (10)
    • 바이브코딩 워크플로우 (10)
    • 바이브코딩 프롬프트 실험실 (10)
    • 바이브코딩 오류 해결 노트 (10)
    • 바이브코딩 코드 리뷰 Before & After (10)
    • 바이브코딩 실무 웹도구 제작 노트 (9) N

최근글과 인기글

  • 최근글
  • 인기글

공지사항

Archives

Calendar

«   2026/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

Copyright © AXZ Corp. All rights reserved.

티스토리툴바