[웹제작 강의] 1주차 세부 계획안: 웹의 기본 개념 및 HTML 구조

📌 1주차 세부 계획안: 웹의 기본 개념 및 HTML 구조

📅 주당 강의 횟수: 매주 2회, 각 1시간 30분 진행
🕒 강의 시간: 총 3시간 (1시간 30분 × 2회)
(요일 및 정확한 시간은 관계자와 협의 후 확정)

 

---

📌 1주차 1회차 강의 (1시간 30분)

🎯 학습 목표

• 웹의 기본 개념과 동작 원리를 이해한다.
• HTML의 기본 구조와 주요 태그를 익힌다.
• 은성 업무용 웹사이트(eunsung.biz)의 HTML 코드 구조를 분석하기 위한 기초 지식을 습득한다.

📅 강의 진행 계획

시간 강의 내용 실습 활동 비고

15분	웹의 개념과 동작 원리	- 인터넷과 웹의 차이- 클라이언트-서버 모델- HTTP, HTTPS 개념	질의응답
20분	HTML 개요 및 문서 구조 이해	- HTML 태그 기본 개념- HTML 문서의 기본 구조 (DOCTYPE, head, body)	HTML 기본 문서 구조 직접 작성
20분	HTML 주요 태그 학습	- 제목 태그(h1~h6), 문단 태그(p), 이미지 태그(img), 링크 태그(a) 등	HTML 태그를 활용한 간단한 웹페이지 작성
25분	은성 업무용 웹사이트 HTML 분석 (기초)	- 은성 웹사이트(eunsung.biz) 코드 살펴보기- 주요 HTML 태그 및 레이아웃 분석	브라우저 개발자 도구(F12) 활용하여 HTML 코드 구조 분석

📌 1회차 과제

✅ 기본 HTML 페이지 제작

• 자신의 이름과 간단한 자기소개를 포함한 HTML 페이지 작성
• 제목(h1), 문단(p), 이미지(img), 링크(a) 태그 활용

✅ 은성 업무용 웹사이트 HTML 코드 분석

• 웹사이트의 구조를 분석하여 주요 HTML 요소 및 레이아웃 정리
• 개발자 도구(F12)를 활용하여 웹사이트의 주요 태그 및 구조 캡처 및 설명 작성

---

📌 1주차 2회차 강의 (1시간 30분)

🎯 학습 목표

• HTML의 다양한 태그를 활용하여 구조적인 웹페이지를 작성한다.
• 은성 업무용 웹사이트(eunsung.biz)의 HTML 구조를 직접 분석하고 유사한 구조를 만들어본다.

📅 강의 진행 계획

시간 강의 내용 실습 활동 비고

15분	HTML 리스트 및 테이블 학습	- 목록 태그(ul, ol, li)- 테이블 태그(table, tr, td)	간단한 리스트 및 테이블 작성
20분	HTML 폼 태그 학습	- 폼(form), 입력(input), 버튼(button) 태그- 사용자 입력을 받는 웹페이지 만들기	간단한 로그인 폼 구현
25분	은성 웹사이트 HTML 상세 분석	- 은성 웹사이트(eunsung.biz) 내 폼, 리스트, 테이블 구조 분석	브라우저 개발자 도구를 활용한 심층 분석
25분	HTML 레이아웃 페이지 제작 실습	- 은성 웹사이트의 기본 레이아웃을 참고하여 유사한 구조 만들기	VS Code 또는 Notepad++을 사용하여 실습

📌 2회차 과제

✅ HTML 폼을 활용한 간단한 입력 페이지 제작

• 이름, 이메일, 메시지를 입력할 수 있는 간단한 HTML 폼 만들기

✅ 은성 업무용 웹사이트의 일부 페이지 클론 제작

• 은성 웹사이트의 특정 페이지(메뉴, 소개 페이지 등)를 참고하여 유사한 구조 제작
• 기본적인 텍스트, 이미지 배치 연습

---

📌 1주차 학습 정리 및 기대 효과

• 웹과 HTML의 기본 개념을 이해하고, 웹사이트의 HTML 구조를 분석할 수 있다.
• HTML 태그를 활용하여 기본적인 웹페이지를 직접 만들 수 있다.
• 브라우저 개발자 도구를 활용하여 실제 서비스(eunsung.biz)의 코드 구조를 분석할 수 있다.
• HTML을 활용한 기초적인 웹 개발 능력을 갖추고, 실무 웹사이트 구조를 이해하는 첫걸음을 뗀다.

---

📌 2주차부터는 CSS를 활용하여 웹페이지를 디자인하는 방법을 학습하며, 실제 웹사이트 디자인을 참고하여 스타일을 추가하는 연습을 진행할 예정입니다.