1주차: 웹프로그래밍 & 역사

웹의 기초 개념과 발전 과정을 이해하고 HTML의 기본을 학습합니다

학습 목표

🌐

웹의 역사 이해

인터넷의 기원부터 현재까지의 웹 발전 과정을 학습합니다

📚

웹 버전별 특징

Web 1.0, 2.0, 3.0의 특징과 차이점을 이해합니다

⚙️

개발 환경 구축

VS Code와 GitHub Copilot을 설정하고 사용법을 익힙니다

🏷️

HTML 기초

HTML의 기본 태그와 구조를 이해합니다

강의 내용

1. 웹의 역사

1989

월드 와이드 웹 탄생

팀 버너스리(Tim Berners-Lee)가 CERN에서 WWW를 창시했습니다. HTTP, HTML, URL의 기본 개념을 정립했습니다.

1991

최초 웹사이트

세계 최초의 웹사이트가 공개되었습니다. 정보 공유를 위한 정적인 페이지들로 구성되었습니다.

1995

JavaScript 등장

넷스케이프에서 JavaScript를 개발하여 웹페이지에 동적 기능이 추가되기 시작했습니다.

2. 웹의 진화

Web 1.0 (1990년대 - 2000년대 초)

특징:

정적인 웹페이지
읽기 전용 콘텐츠
일방향 정보 제공
HTML과 CSS 중심

예시:

초기 기업 홈페이지
온라인 브로셔
개인 홈페이지

Web 2.0 (2000년대 - 2010년대)

특징:

사용자 참여와 상호작용
소셜 미디어 등장
AJAX 기술 활용
사용자 생성 콘텐츠

예시:

YouTube, Facebook
블로그 플랫폼
위키피디아
온라인 쇼핑몰

Web 3.0 (2010년대 - 현재)

특징:

분산화된 웹
블록체인 기술
AI와 개인화
IoT 연결성

예시:

DApps (분산 앱)
NFT 마켓플레이스
개인화 추천 시스템
스마트 홈

3. HTML 기초

HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 마크업 언어입니다.

기본 HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 번째 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 내 첫 번째 웹페이지입니다.</p>
</body>
</html>

주요 HTML 태그

4. VS Code와 GitHub Copilot 설정

1단계: VS Code 설치

Visual Studio Code를 공식 웹사이트에서 다운로드하여 설치합니다.

2단계: GitHub Copilot 확장 프로그램 설치

VS Code의 확장 프로그램 마켓플레이스에서 GitHub Copilot을 검색하여 설치합니다.

3단계: GitHub 계정 연동

GitHub 계정으로 로그인하여 Copilot을 활성화합니다.

실습 활동

실습 1: 첫 번째 HTML 페이지 만들기

목표: 기본 HTML 구조를 이용해 간단한 자기소개 페이지를 만듭니다.

요구사항:

DOCTYPE, html, head, body 태그 사용
제목(title)과 meta 태그 포함
h1 태그로 이름 표시
p 태그로 간단한 자기소개
좋아하는 웹사이트로의 링크 추가

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>홍길동 - 자기소개</title>
</head>
<body>
    <h1>안녕하세요, 홍길동입니다!</h1>
    <p>저는 웹 프로그래밍을 배우고 있는 대학생입니다.</p>
    <p>좋아하는 사이트: <a href="https://github.com">GitHub</a></p>
</body>
</html>

GitHub Copilot

실습 2: Copilot을 활용한 HTML 템플릿 생성

목표: GitHub Copilot의 도움을 받아 HTML 템플릿을 자동완성합니다.

Copilot 활용법:

주석으로 원하는 기능 설명하기
태그 시작 부분 입력 후 자동완성 받기
Ctrl+Space로 제안 보기
Tab으로 제안 수락하기

💡 Copilot 활용 팁:

명확하고 구체적인 주석 작성하기
일관된 코딩 스타일 유지하기
제안된 코드 검토 후 수정하기

토론 활동: Web 1.0/2.0/3.0 사례 분석

목표: 각 웹 버전의 특징을 실제 사례를 통해 이해합니다.

토론 주제 1

현재 사용하는 웹사이트들을 Web 2.0과 3.0으로 분류해보고 그 이유를 설명해보세요.

토론 주제 2

Web 3.0의 분산화 특성이 우리의 인터넷 사용에 어떤 변화를 가져올까요?

주차 요약

핵심 포인트

웹의 발전 과정: Web 1.0 → 2.0 → 3.0
HTML은 웹페이지의 구조를 정의하는 마크업 언어
VS Code와 GitHub Copilot으로 효율적인 개발 환경 구축
기본 HTML 태그와 문서 구조 이해

다음 주 미리보기

2주차에서는 HTML의 의미있는 구조 설계를 위한 시맨틱 태그들을 학습합니다. header, nav, footer 등의 태그와 접근성에 대해 다룰 예정입니다.