AI랑 같이하는 코딩

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개HTML은 화면을 "보이게" 만드는 언어이지만, 실무에서는 "읽히게" 만드는 능력이 더 중요합니다. 초보 단계에서 자주 나오는 문제는 div를 계속 중첩해 구조가 깊어지고, 클래스 이름이 뒤섞이며, 영역 구분이 없어 수정할 때 길을 잃는 상황입니다. 화면은 정상 출력되는데 코드만 보면 어디가 헤더인지, 어디가 본문인지, 어떤 블록이 반복되는 카드인지 한눈에 파악하기 어려운 상태가 됩니다. 이 경우 디자인 변경이나 기능 추가 시 작은 수정도 큰 스트레스로 이어집니다.이번 글은 HTML 구조를 보기 좋게 정리하는 기본 기준을 Before & After 관점으로 설명합니다. 핵심은 복잡한 기술이 아니라 구조적 습관입니다...

16일차에서는 모바일 화면에서도 보기 좋은 반응형 레이아웃을 적용합니다. 데스크톱에서는 괜찮던 구성도 작은 화면에서는 답답해질 수 있어서, 화면 크기에 맞춰 구조를 바꾸는 CSS 전략이 필요합니다.오늘은 `media query`를 중심으로 카드 배치, 여백, 버튼 크기, 입력창 너비를 조정해 스마트폰에서도 자연스럽게 사용할 수 있는 웹앱으로 개선합니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 목표는 모바일 가독성과 조작성을 높이는 것입니다. 카드가 가로로 길게 배치되어 있다면 세로 스택으로 바꾸고, 작은 화면에서 텍스트와 버튼이 겹치지 않도록 간..

목차1. CSS가 안 먹는 이유부터 이해하기2. 가장 먼저 확인할 체크포인트3. 문제를 빠르게 찾는 점검 순서4. 재발 방지를 위한 스타일링 습관5. 자주 묻는 질문1. CSS가 안 먹는 이유부터 이해하기분명히 CSS를 작성했는데 화면에서 아무 변화가 없으면, 처음에는 코드 전체가 잘못된 것처럼 느껴집니다. 하지만 실제로는 대부분 단순한 연결 문제입니다. 대표적으로 파일 경로가 틀렸거나, 선택자가 대상 요소와 일치하지 않거나, 더 강한 우선순위 스타일에 덮여서 적용이 보이지 않는 경우가 많습니다.핵심은 "CSS를 썼다"가 아니라 "브라우저가 그 CSS를 읽고, 해당 요소에, 이길 수 있는 우선순위로 적용했는가"를 확인하는 것입니다. 이 세 단계 중 하나라도 빠지면 작성한 스타일은 존재해도 화면에는 나타나..

목차1. 왜 단계별 요청 구조가 필요한가2. 실전에서 쓰는 5단계 프롬프트 프레임3. 단계별 요청 문장 템플릿4. 실패를 줄이는 운영 원칙5. 자주 묻는 질문1. 왜 단계별 요청 구조가 필요한가AI에게 웹앱을 요청할 때 많은 사람이 처음부터 “로그인, 게시판, 검색, 관리자 페이지까지 다 만들어줘”라고 말합니다. 시작은 빠를 수 있지만 결과는 대개 불안정합니다. 기능이 섞인 상태로 생성되면 어디가 잘못됐는지 찾기 어렵고, 한 부분을 수정하면 다른 부분이 깨지는 일이 반복됩니다. 그래서 필요한 것이 단계별 요청 구조입니다.단계별 요청은 단순히 일을 쪼개는 방식이 아닙니다. 기능별 책임을 분리하고, 각 단계마다 검증 기준을 두어 리스크를 낮추는 방식입니다. 특히 초보자에게는 “무엇을 먼저 확인해야 하는지”가..