data-pantry 님의 블로그

만든 게임 게시!!!!!

요즘 IT 씬에서 제일 핫한 단어, 혹시 들어보셨나요? 바로 '바이브코딩(Vibe Coding)'입니다. 개발자가 직접 코드를 한 줄 한 줄 타이핑하는 대신, AI(LLM)에게 자연어로 "이런 기능 만들어줘", "이 부분 구조를 이렇게 바꿔줘"라고 지시하며 결과물을 만들어내는 새로운 개발 패러다임을 말하죠. 글로만 읽어서는 감이 잘 안 오더라고요. "이거 진짜 말만 하면 프로그램이 뚝딱 나온다고? 나도 한번 제대로 경험하고 연습해 봐야겠다!"라는 생각이 들었습니다. 그래서 첫 연습 프로젝트로 제미나이를 이용해서 제 블로그 방문자분들이 가볍게 즐길 수 있는 '무설치 웹 스도쿠 게임'을 만들어보기로 했습니다. 아이디어 기획부터 티스토리 배포까지, 저의 좌충우돌 바이브코딩 실전 경험기를 공유합니다. Step..

[Week 1 · 웹 구조 기초] Day 4 / 42CSS 기초 강의｜선택자, Margin, Padding, Display 쉽게 배우기 🎨CSS란? 뼈대만 있는 HTML에 색을 칠하고 여백을 잡아주는 '인테리어 도면'입니다.선택자: 수많은 요소 중 "어떤 녀석"을 꾸밀지 콕 집어내는 '이름표'입니다.Box Model: 웹의 모든 요소는 '네모난 액자'입니다. 이 액자의 안팎 여백을 다루는 게 레이아웃의 전부입니다.1. CSS가 HTML과 연결되는 방식🏠 비유로 이해하기: 건물과 인테리어 도면건물(HTML)을 다 지었다고 끝이 아닙니다. 예쁘게 꾸미려면 인테리어 업자에게 "이 도면(CSS)대로 칠해주세요!"라고 도면을 건네주어야 합니다. 그 도면을 건네주는 '연결 고리' 역할이 바로 태그입니다.HTM..