웹 프로젝트 기초집LESSON 01

웹 프로젝트의 역할: HTML·CSS·JavaScript는 무엇을 나눠 맡을까?

난이도입문

예상 시간30분

선수지식브라우저와 파일 사용 기초

1강. 웹 프로젝트의 역할: HTML·CSS·JavaScript는 무엇을 나눠 맡을까?

1. 이번 강의에서 해결할 문제

한 파일에 내용, 디자인과 동작을 모두 섞으면 작은 수정도 어렵습니다. 게임 포트폴리오의 요구사항을 HTML, CSS, JavaScript 책임으로 먼저 나눕니다.

2. 학습 목표

3. 핵심 개념

HTML: 제목, 탐색, 프로젝트, 연락처 같은 의미와 문서 순서를 만듭니다.
CSS: 색상, 글꼴, 간격, 카드와 반응형 배치를 담당합니다.
JavaScript: 메뉴, 필터, 모달, 폼 검증과 로컬 선택 상태를 처리합니다.

GitHub Pages는 빌드된 정적 파일을 제공할 수 있지만 연락처 전송, 로그인과 데이터베이스 처리는 하지 않습니다. React 같은 프레임워크와 백엔드 API는 후속 과정에서 다룹니다.

4. 단계별 실습

HTML · 파일 경로: game-dev-portfolio/index.html

game-dev-portfolio/index.html
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>김개발 | 게임 개발자</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./js/app.js" defer></script>
  </head>
  <body>
    <h1>게임 개발자 김개발</h1>
    <p>Unity와 Unreal 프로젝트를 소개합니다.</p>
    <button id="helloButton" type="button">프로젝트 준비 확인</button>
  </body>
</html>

CSS · 파일 경로: game-dev-portfolio/css/style.css

game-dev-portfolio/css/style.css
body { font-family: system-ui, sans-serif; margin: 2rem; }
button { padding: 0.75rem 1rem; }

JavaScript · 파일 경로: game-dev-portfolio/js/app.js

game-dev-portfolio/js/app.js
const helloButton = document.querySelector('#helloButton');
helloButton.addEventListener('click', () => {
  helloButton.textContent = 'HTML·CSS·JavaScript 연결 완료';
});

실행: 파일 탐색기에서 index.html을 브라우저로 엽니다. 개발자 도구 확인: Elements에서 CSS와 defer 스크립트 연결을, Console에서 오류가 없는지 확인합니다. 버튼을 누르면 문장이 바뀌어야 합니다.

5. 코드가 동작하는 이유

브라우저는 HTML로 DOM을 만들고 CSS를 적용합니다. defer 스크립트는 HTML 분석이 끝난 뒤 실행되므로 버튼을 찾을 수 있고, 클릭 이벤트가 텍스트 상태를 바꿉니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ