분류 전체보기 79

클래스(class)와 아이디(id), 언제 뭐를 써야 할까?

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개HTML을 작성하다 보면 class와 id를 언제 써야 할지 헷갈립니다. 둘 다 요소를 식별하는 이름표이지만 쓰임새가 다릅니다. class는 여러 개를 묶는 공용 이름, id는 문서 안에서 단 하나만 갖는 고유 이름이라고 기억하면 쉽습니다.2. 핵심 내용class: 반복되는 스타일과 그룹에 적합여러 카드, 버튼, 배지처럼 같은 디자인을 공유하는 요소들에는 class를 사용합니다. 한 요소에 class를 여러 개 붙일 수 있어 재사용성과 조합이 좋습니다.id: 한 페이지에서 유일한 대상에 사용헤더, 특정 섹션 앵커, 고유한 입력 필드처럼 "딱 하나"를 정확히 지목해야 할 때 id를 씁니다. 같은 id를 여러 요소에 중..

[바이브코딩 HTML 웹앱 20일 챌린지] 5일차 - 할 일을 입력하는 공간 만들기

5일차에서는 사용자가 할 일을 입력할 수 있는 공간을 만듭니다. 지금까지는 보기 좋은 구조와 스타일을 준비했다면, 오늘은 실제 상호작용을 위한 UI를 올리는 단계입니다. 입력창, 추가 버튼, 목록 영역을 먼저 완성해두면 내일 JavaScript 동작을 붙이기 훨씬 쉬워집니다.이 단계의 핵심은 아직 "작동"이 아니라 "준비된 화면"입니다. 초보자 기준에서는 기능 구현 전에 화면 요소를 분리해두는 습관이 중요하고, 바이브코딩에서도 AI에게 요청 범위를 줄여 정확한 코드를 받는 데 큰 도움이 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘 만들 기능은..

요구사항을 코드로 바꾸는 법: “무엇을 만들지” 한 줄로 명확히 쓰기

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개개발을 시작할 때 가장 자주 부딪히는 문제는 기술이 아니라 방향입니다. 무엇을 만들어야 하는지 팀 안에서 같은 그림을 갖지 못하면, 코드는 빠르게 늘어나도 결과물은 계속 흔들립니다. 그래서 실전에서는 요구사항 문서를 길게 쓰기보다 먼저 한 줄 목표를 명확하게 만드는 습관이 중요합니다. 예를 들어 “사용자가 3분 안에 회원가입을 끝낼 수 있는 화면을 만든다”처럼 사용자, 행동, 제한 조건이 모두 들어간 문장은 구현 우선순위를 결정하는 기준이 됩니다. 이 한 줄이 있으면 디자이너는 어떤 입력이 꼭 필요한지 판단할 수 있고, 개발자는 어떤 API가 먼저 필요한지 바로 정리할 수 있습니다.반대로 목표 문장이 모호하면 작은 ..

태그(Tag)와 요소(Element)의 차이, 딱 이것만 알기

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개HTML을 배우다 보면 "태그랑 요소가 같은 말 아닌가요?"라는 질문이 자주 나옵니다. 비슷해 보여도 정확히는 다릅니다. 태그는 문법 기호이고, 요소는 그 태그가 만들어내는 실제 단위라고 이해하면 됩니다.2. 핵심 내용태그(Tag)는 꺾쇠 괄호로 된 표시예를 들어 , , 같은 기호 자체를 태그라고 부릅니다. 시작 태그와 종료 태그가 짝을 이루는 경우가 많고, 일부는 단독 태그 형태로도 사용됩니다.요소(Element)는 의미 있는 완성 단위안녕하세요 전체처럼 시작 태그, 내용, 종료 태그를 포함한 하나의 덩어리를 요소라고 합니다. 즉, 화면에 배치되는 "실제 구성 부품"이 요소입니다.왜 구분이 중요할까?오류를 찾을 ..

HTML, CSS, JavaScript는 각각 무슨 역할일까?

목차1. 주제 소개2. 핵심 내용3. 적용 방법4. 정리5. 자주 묻는 질문1. 주제 소개웹페이지를 처음 만들 때 가장 먼저 부딪히는 질문이 바로 "HTML, CSS, JavaScript는 뭐가 다르지?"입니다. 이 셋은 각각 다른 일을 맡는 팀처럼 움직입니다. HTML은 구조를 만들고, CSS는 모양을 꾸미고, JavaScript는 동작을 담당합니다.2. 핵심 내용HTML: 뼈대와 의미를 만든다HTML은 제목, 본문, 버튼, 이미지처럼 페이지의 구성요소를 배치하고 의미를 부여합니다. 예를 들어 은 큰 제목, 는 문단, 은 버튼임을 알려줍니다.CSS: 보이는 방식을 결정한다CSS는 색상, 글꼴, 여백, 정렬처럼 "어떻게 보일지"를 정합니다. 같은 HTML이라도 CSS를 바꾸면 전혀 다른 분위기의 사이트로..

[바이브코딩 HTML 웹앱 20일 챌린지] 4일차 - 밋밋한 화면을 앱처럼 꾸미기

4일차에서는 3일차에 만든 뼈대 화면에 CSS를 붙여 앱처럼 보이게 다듬습니다. 지금까지는 "보이기만 하는 구조"였다면, 오늘은 여백, 글꼴, 카드 스타일, 버튼 톤을 정리해 사용자가 보기 편한 화면으로 전환하는 단계입니다.바이브코딩 관점에서 디자인 작업은 완성도를 과하게 올리는 날이 아니라, 다음 기능 구현(입력, 클릭, 저장)을 편하게 하기 위한 시각적 정리입니다. 초보자는 오늘 과정을 통해 CSS가 단순 꾸미기가 아니라 정보 전달력을 높이는 도구라는 감각을 익히게 됩니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 핵심은 CSS를 연결해 화면..

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

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

[바이브코딩 HTML 웹앱 20일 챌린지] 2일차 - 브라우저에 첫 화면 띄우기

2일차에서는 드디어 브라우저에 첫 화면을 띄워봅니다. 1일차에 앱 방향을 정했다면, 오늘은 그 방향을 실제 화면으로 연결하는 시작점입니다. 아직 화려한 기능은 없지만, 내가 만든 HTML 파일이 직접 열리고 텍스트가 보이는 경험이 웹앱 개발의 첫 자신감을 만들어줍니다.바이브코딩 방식에서는 이 단계에서 완벽한 구조를 만들기보다 "작게 만들어서 바로 확인"하는 흐름이 중요합니다. 오늘은 제목, 설명, 기본 카드 영역까지 간단히 만들고, 내일 레이아웃 확장과 스타일링으로 자연스럽게 이어가겠습니다.목차1. 오늘 만들 기능 소개2. AI에게 요청할 프롬프트3. 코드 작성과 실행 과정4. 코드 이해하기5. 오늘 만든 내용 정리6. 자주 묻는 질문7. 다음 단계로 이어가기1. 오늘 만들 기능 소개오늘의 목표는 하루 ..

[바이브코딩 HTML 웹앱 20일 챌린지] 1일차 - AI와 함께 만들 웹앱 정하기

이번 1일차에서는 AI와 함께 어떤 HTML 웹앱을 만들지 방향을 정하는 단계를 진행합니다. 바로 코드를 길게 작성하기보다, 왜 이 앱을 만들고 어떤 기능을 20일 동안 완성할지 큰 그림부터 잡아두면 이후 회차가 훨씬 쉬워집니다. 바이브코딩 방식은 완벽한 기획 문서를 먼저 만드는 방법이 아니라, AI와 짧게 대화하며 아이디어를 구체화하고 바로 실행 가능한 수준으로 다듬는 흐름에 가깝습니다.이번 시리즈의 목표는 초보자도 HTML, CSS, JavaScript를 이용해 하루 관리 대시보드를 완성하는 것입니다. 오늘은 그 출발점으로 앱의 핵심 기능과 우선순위를 정하고, 내일 2일차에서 첫 HTML 화면을 빠르게 띄울 수 있도록 준비합니다. 오늘의 핵심은 정답 찾기가 아니라 시작 가능한 범위를 정하는 것입니다...